setShowModalReview(false)}\n overlayClassName=\"modal-overlay\"\n >\n setShowModalReview(false)}>\n x \n \n\n \n\n \n enviar \n avaliação \n
\n\n \n Gostaríamos de ouvir sua opinião. Deixe sua avaliação clicando aqui . \n \n \n \n )\n}\n\nexport default ModalReview","import React, { useEffect, useState } from \"react\";\r\nimport { FiCheck, FiMail, FiClock, FiSend, FiCalendar, FiChevronLeft, FiAlertTriangle } from \"react-icons/fi\";\r\nimport AvailableNow from \"../../components/AvailableNow\";\r\nimport { getDayName } from \"../../../../utils/utils\";\r\nimport Moment from \"moment-timezone\";\r\nimport { InfoView, AndNowBanner, BackgroundImage } from './styles';\r\nimport Header from \"../../../../components/Header\";\r\nimport TabButton from \"../../../../components/TabButton\";\r\nimport { toast } from \"react-toastify\";\r\nimport { createOrder } from \"../../../../api/service_orders\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport LoaderSpinner from \"../../../../components/LoaderSpinner\";\r\nimport { PixPage } from \"../components/PixPage\";\r\nimport ModalReview from \"../../../../components/Modals/ModalReview\";\r\n\r\nconst CompleteOrder = ({ location }) => {\r\n const history = useHistory();\r\n\r\n if (!location.state) {\r\n history.goBack();\r\n }\r\n\r\n const [loading, setLoading] = useState(false);\r\n const {\r\n state: {\r\n orderType,\r\n attendanceLocale,\r\n slot,\r\n hourBegin,\r\n offer,\r\n paymentMethod,\r\n paymentSignature,\r\n pixCode,\r\n paymentExpirationMinutes,\r\n nextSuggestion,\r\n serviceId,\r\n cardId,\r\n addressId,\r\n walletSelected,\r\n note,\r\n order\r\n } = {}\r\n } = location;\r\n\r\n let time = Moment(hourBegin).tz(\"America/Sao_Paulo\").format(\"HH\");\r\n let minute = Moment(hourBegin).tz(\"America/Sao_Paulo\").format(\"mm\");\r\n let dayOfWeek = getDayName(hourBegin);\r\n\r\n const waitingList = time === \"00\" && minute === \"00\";\r\n\r\n const createNewOrder = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n const response = await createOrder(nextSuggestion?.hour_begin, nextSuggestion?.job_day_id, paymentMethod, paymentSignature, serviceId, cardId, null, addressId, orderType, walletSelected, note);\r\n\r\n setLoading(false);\r\n\r\n history.push(\"/completeOrder\", {\r\n orderType: orderType,\r\n attendanceLocale: response.attendance_locale,\r\n slot: slot,\r\n hourBegin: nextSuggestion?.hour_begin,\r\n offer: offer,\r\n paymentMethod: paymentMethod,\r\n paymentSignature: paymentSignature,\r\n pixCode: response.pix_qr_code,\r\n paymentExpirationMinutes: response.payment_expiration_minutes,\r\n nextSuggestion: response?.next_date_suggestion,\r\n serviceId: serviceId,\r\n cardId: cardId,\r\n addressId: addressId,\r\n walletSelected: false,\r\n note: note\r\n });\r\n\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (nextSuggestion?.job_day_id) {\r\n sessionStorage.setItem('oneClick', JSON.stringify(location.state));\r\n } else {\r\n sessionStorage.removeItem('oneClick');\r\n }\r\n }, [nextSuggestion]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
Tudo certo! \r\n
\r\n\r\n\r\n\r\n {(\"online_group\" === slot?.service_type ||\r\n \"online_personal\" === slot?.service_type) && (\r\n
\r\n
\r\n \r\n Sua solicitação para participar da {offer.title} foi confirmada para {dayOfWeek} {Moment(hourBegin).tz(\"America/Sao_Paulo\").format(\" DD/MM\")}\r\n\r\n {!waitingList &&\r\n \r\n {' '} às {Moment(hourBegin).tz(\"America/Sao_Paulo\").format(\"HH:mm\")}.\r\n \r\n }\r\n\r\n {waitingList &&\r\n para a lista de encaixe. \r\n }\r\n\r\n \r\n \r\n\r\n
\r\n \r\n Olha como é fácil acessar seu serviço: \r\n
\r\n \r\n\r\n
\r\n
1 \r\n\r\n
\r\n
\r\n
\r\n
\r\n Geramos um link para sua sessão.\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n
2 \r\n\r\n
\r\n
\r\n
\r\n
\r\n Esse link já está disponível no seu email, calendário e no seu app POSHER\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n
3 \r\n
\r\n
\r\n
\r\n No horário da sessão, clique no link em um desses locais e boa sessão!\r\n \r\n
\r\n\r\n {nextSuggestion?.job_day_id &&\r\n
\r\n \r\n
\r\n \r\n
\r\n Clique aqui e agende o mesmo serviço para {getDayName(nextSuggestion.hour_begin)}, {Moment(nextSuggestion.hour_begin).tz(\"America/Sao_Paulo\").format('DD/MM')}, às {Moment(nextSuggestion.hour_begin).tz(\"America/Sao_Paulo\").format('HH:mm')}. \r\n \r\n }\r\n\r\n
\r\n
\r\n )}\r\n\r\n {\"presential\" === slot?.service_type && (\r\n
\r\n
\r\n \r\n Seu pedido de {offer.title} com o {slot.professional.name} foi confirmado para {dayOfWeek} {Moment(hourBegin).tz(\"America/Sao_Paulo\").format(\" DD/MM\")} \r\n\r\n {!waitingList && (\r\n às {Moment(hourBegin).tz(\"America/Sao_Paulo\").format(\"HH:mm\")}. \r\n )}\r\n\r\n {waitingList && (\r\n para a lista de encaixe. \r\n )}\r\n\r\n \r\n \r\n\r\n
\r\n \r\n E AGORA? \r\n
\r\n \r\n\r\n
\r\n
1 \r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviamos todas as informações do agendamento para seu email.\r\n \r\n
\r\n\r\n
\r\n\r\n
\r\n
2 \r\n
\r\n
\r\n
\r\n\r\n
\r\n No horário combinado se dirija ao local do serviço {attendanceLocale}. O profissional estará te aguardando\r\n \r\n
\r\n
\r\n\r\n {paymentMethod === 'credit' &&\r\n
\r\n
! \r\n
\r\n
\r\n
Para validar o cartão, podemos fazer um lançamento agora no valor do pedido, que será estornado imediatamente. O serviço só será cobrado após a sua realização. \r\n
\r\n }\r\n\r\n {nextSuggestion?.job_day_id &&\r\n
\r\n \r\n
\r\n \r\n
\r\n Clique aqui e agende o mesmo serviço para {getDayName(nextSuggestion.hour_begin)}, {Moment(nextSuggestion.hour_begin).tz(\"America/Sao_Paulo\").format('DD/MM')}, às {Moment(nextSuggestion.hour_begin).tz(\"America/Sao_Paulo\").format('HH:mm')}. \r\n \r\n }\r\n\r\n
\r\n
\r\n )}\r\n
\r\n
\n \n
\n \n \n \n );\n}\n\nexport default SkeletonExpressOrder;","import React, { useState } from \"react\";\nimport { FiCheck, FiMail, FiClock, FiCalendar } from \"react-icons/fi\";\nimport AvailableNow from \"../../components/AvailableNow\";\nimport { getDayName } from \"../../../../utils/utils\";\nimport Moment from \"moment-timezone\";\nimport { InfoView, AndNowBanner, BackgroundImage } from './styles';\nimport Header from \"../../../../components/Header\";\nimport TabButton from \"../../../../components/TabButton\";\nimport { toast } from \"react-toastify\";\nimport { createExpressOrder } from \"../../../../api/service_orders\";\nimport { useHistory } from \"react-router-dom\";\nimport ModalReview from \"../../../../components/Modals/ModalReview\";\nimport SkeletonExpressOrder from './SkeletonExpressOrder';\nimport LoaderSpinner from '../../../../components/LoaderSpinner';\nimport { useEffect } from \"react\";\nimport { debounce } from 'throttle-debounce';\n\nconst CompleteExpressOrder = ({ location }) => {\n const history = useHistory();\n\n if (!location.state) {\n history.goBack();\n }\n\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\n const [loading, setLoading] = useState(false);\n const [order, setOrder] = useState();\n const [dayOfWeek, setDayOfWeek] = useState();\n const {\n state: {\n offer\n } = {}\n } = location;\n\n const createOrder = async () => {\n try {\n setOrder(await createExpressOrder(offer.slot_suggestion?.hour_begin, offer.slot_suggestion?.job_day_id, offer.service_id, offer.order_type));\n setLoadingSkeleton(false);\n \n } catch (error) {\n toast.error(error.message);\n \n history.goBack();\n }\n }\n\n useEffect(() => {\n let isMounted = true;\n\n if (isMounted) {\n setLoadingSkeleton(true);\n setTimeout(() => debounce(5000, createOrder()), 1500);\n \n if(order){\n setDayOfWeek(getDayName(order.scheduled_date));\n }\n }\n\n return () => { isMounted = false; };\n }, []);\n\n return (\n \n
\n
\n\n {loadingSkeleton &&\n
\n
\n }\n \n {order && \n <> \n
\n \n
\n
\n
\n\n
Tudo certo! \n
\n\n
\n
\n \n Seu checkin de {offer.title} foi confirmado para {dayOfWeek} {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format(\" DD/MM\")} \n\n às {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format(\"HH:mm\")}. \n\n \n \n\n
\n \n E AGORA? \n
\n \n\n
\n
1 \n
\n
\n
\n\n
\n Enviamos todas as informações do agendamento para seu email.\n \n
\n\n
\n\n {\"presential\" === offer.service_type &&\n
\n
2 \n
\n
\n
\n\n
\n No horário combinado se dirija ao local do serviço {order.attendance_locale}. O profissional estará te aguardando\n \n
\n
\n }\n\n {\"online\" === offer.service_type &&\n <>\n
\n
2 \n\n
\n
\n
\n
\n Esse link já está disponível no seu email, calendário e no seu app POSHER\n \n
\n\n
\n\n
\n
3 \n
\n
\n
\n No horário da sessão, clique no link em um desses locais e boa sessão!\n \n
\n \n }\n\n
\n
\n
\n \n }\n
\r\n \r\n\r\n {paymentMethod === \"pix\" ?\r\n \r\n\r\n
\r\n
\r\n
\r\n\r\n
Recebemos sua solicitação \r\n
\r\n\r\n {\"online\" === offer?.service_type && (\r\n
\r\n
\r\n Sua solicitação de {offer?.title} para {dayOfWeek} está aguardando confirmação. \r\n \r\n\r\n\r\n
\r\n \r\n E AGORA? \r\n
\r\n \r\n\r\n
\r\n
1 \r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviamos um email com um resumo do seu pedido.\r\n \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Pague com PIX usando a chave fornecida ou o QR Code enviado em seu email.\r\n \r\n
\r\n )}\r\n
\r\n\r\n
\r\n
2 \r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviaremos em breve a confirmação do horário e profissional para seu serviço por email.\r\n \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
\r\n O agendamento será cancelado se o pagamento não for realizado em até 10 minutos.\r\n \r\n
\r\n )}\r\n
\r\n\r\n {paymentMethod !== \"pix\" && (\r\n
\r\n
3 \r\n
\r\n
\r\n
\r\n\r\n
\r\n No horário da sessão, clique no link (no email, agenda ou app POSHER) e boa sessão.\r\n \r\n
\r\n
\r\n )}\r\n\r\n
\r\n
\r\n )}\r\n\r\n {\"online\" !== offer?.service_type && (\r\n
\r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n Sua solicitação de {offer?.title} para {dayOfWeek} {Moment(scheduledFrom).format(\"DD/MM\")} está aguardando confirmação. \r\n \r\n ) : (\r\n
\r\n Sua solicitação de {offer?.title} para {dayOfWeek} {Moment(scheduledFrom).format(\"DD/MM\")} está aguardando o pagamento. \r\n \r\n )}\r\n\r\n
\r\n \r\n E AGORA? \r\n
\r\n \r\n\r\n
\r\n
1 \r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviamos um email com um resumo do seu pedido\r\n \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Pague com PIX usando a chave fornecida ou o QR Code enviado em seu email.\r\n \r\n
\r\n )}\r\n
\r\n\r\n
\r\n
2 \r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviaremos em breve um email com a confirmação do horário e profissional para seu serviço.\r\n \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
\r\n O agendamento será cancelado se o pagamento não for realizado em até 10 minutos.\r\n \r\n
\r\n )}\r\n
\r\n\r\n {paymentMethod !== \"pix\" && (\r\n
\r\n
3 \r\n
\r\n
\r\n
\r\n\r\n
\r\n No horário agendado o profissional fará seu atendimento.\r\n \r\n
\r\n
\r\n )}\r\n\r\n
\r\n
\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default CompleteOnDemandOrder;\r\n","import { header, fetchWithTimeout } from './helper/request';\r\nimport {\r\n API_BASE,\r\n API_VERSION,\r\n COMPANIES,\r\n CUSTOMER_COMPANY,\r\n} from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\n\r\n/*get*/\r\n\r\nconst getCompanyById = async (codeCompany) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${COMPANIES}?code=${codeCompany}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n return responseJson;\r\n\r\n } else if (response.status === 404) {\r\n validationError = true;\r\n\r\n throw new Error(\"Empresa não encontrada\");\r\n\r\n } else if (response.status === 400) {\r\n validationError = true;\r\n\r\n throw new Error(\"Dados inválidos\");\r\n\r\n } else {\r\n throw new Error(\"erro na chamada getCompanyById: \" + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao buscar empresa por código');\r\n }\r\n }\r\n}\r\n\r\nconst getCompanyByEmail = async (emailCompany) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${COMPANIES}?employee_email=${emailCompany}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n return responseJson;\r\n\r\n } else if (response.status === 404) {\r\n validationError = true;\r\n\r\n throw new Error(\"Empresa não encontrada\");\r\n\r\n } else if (response.status === 400) {\r\n validationError = true;\r\n\r\n throw new Error(\"Dados inválidos\");\r\n\r\n } else {\r\n throw new Error(\"erro na chamada getCompanyByEmail: \" + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao buscar empresa por email');\r\n }\r\n }\r\n}\r\n\r\n/*put*/\r\n\r\nconst putEmployeeInCompany = async (idCompany) => {\r\n let validationError = false;\r\n try {\r\n const { put_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${CUSTOMER_COMPANY}/${idCompany}/join`, put_bearer);\r\n\r\n if (response.ok) {\r\n return response.status;\r\n\r\n } else if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n\r\n } else {\r\n throw new Error(\"erro na chamada putEmployeeInCompany: \" + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao adicionar empregado na empresa');\r\n }\r\n }\r\n}\r\n\r\nexport {\r\n getCompanyById,\r\n getCompanyByEmail,\r\n putEmployeeInCompany\r\n}","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalCompanies = ({ showModalCompany, setShowModalCompany, companies, choosed }) => {\r\n const array = [];\r\n const sendChoose = (company) => {\r\n array.push(company);\r\n choosed(array);\r\n setShowModalCompany(false);\r\n }\r\n\r\n return showModalCompany && (\r\n \r\n
setShowModalCompany(false)}\r\n overlayClassName=\"modal-overlay company\"\r\n className=\"modal-content company\"\r\n ariaHideApp={false}\r\n >\r\n setShowModalCompany(false)}>\r\n x \r\n \r\n\r\n \r\n Selecione seu \r\n ESCRITÓRIO \r\n
\r\n\r\n \r\n
Oba! Vimos aqui que você trabalha em um empresa que tem POSHER.. \r\n
Selecione abaixo em qual escritório você está: \r\n\r\n
\r\n
\r\n {companies[0]?.map((company, companyIndex) => {\r\n return (\r\n
\r\n
\r\n sendChoose(company)}\r\n />\r\n sendChoose(company)}>{company.name} \r\n
\r\n\r\n
{company.address.address}, {company.address.number} \r\n
\r\n )\r\n })}\r\n
\r\n
\r\n \r\n \r\n Copyright © 2021 - POSHER DO BRASIL TECNOLOGIA EM SERVIÇOS LTDA. Todos os direitos reservados. \r\n Av Pedroso de Morais, 377 - Pinheiros - São Paulo, SP - CEP: 05.419-000 \r\n \r\n \r\n\r\n \r\n\r\n \r\n {\r\n window.location = 'mailto:contato@posherapp.com';\r\n e.preventDefault();\r\n }}\r\n className=\"title-suport\"\r\n >\r\n Atendimento ao cliente\r\n \r\n\r\n {\r\n window.location = 'mailto:vendas@posherapp.com';\r\n e.preventDefault();\r\n }}\r\n className=\"title-suport\"\r\n >\r\n Vendas para empresas\r\n \r\n\r\n {\r\n window.location = 'mailto:parceiros@posherapp.com';\r\n e.preventDefault();\r\n }}\r\n className=\"title-suport\"\r\n >\r\n Suporte aos profissionais\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default Footer;","import { getSectionsCatchErrors } from \"../getSectionsCatchErrors\";\r\nimport { fetchWithTimeout, header } from \"./request\";\r\n\r\nexport const validateGetResponse = async (getUrl, errorMessage, body) => {\r\n const { get_bearer } = header(body);\r\n let isValidation = false;\r\n try {\r\n const response = await fetchWithTimeout(`${getUrl}`, get_bearer);\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n\r\n } else if (response.status === 400) {\r\n isValidation = true;\r\n const data = response.data;\r\n throw new Error(data.message);\r\n\r\n } else if (response.status === 404) {\r\n isValidation = true;\r\n throw new NotFoundError(\"Não encontrado!\");\r\n\r\n } else if (response.status !== 200) {\r\n const data = response.data;\r\n throw new Error(data.message + \" \" + response.status);\r\n\r\n }\r\n } catch (error) {\r\n if (isValidation) throw error;\r\n getSectionsCatchErrors(error, errorMessage);\r\n }\r\n};\r\n\r\nexport const validateGetResponseBasic = async (getUrl, errorMessage, body) => {\r\n const { get } = header(body);\r\n let isValidation = false;\r\n try {\r\n const response = await fetchWithTimeout(`${getUrl}`, get);\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n\r\n } else if (response.status === 400) {\r\n isValidation = true;\r\n const data = response.data;\r\n throw new Error(data.message);\r\n\r\n } else if (response.status === 404) {\r\n isValidation = true;\r\n throw new Error(\"Não encontrado!\");\r\n\r\n } else if (response.status !== 200) {\r\n const data = response.data;\r\n throw new Error(data.message + \" \" + response.status);\r\n\r\n }\r\n } catch (error) {\r\n if (isValidation) throw error;\r\n getSectionsCatchErrors(error, errorMessage);\r\n }\r\n};\r\n\r\nclass NotFoundError extends Error {\r\n constructor(message) {\r\n super(message);\r\n this.name = \"NotFoundError\";\r\n }\r\n}","import {\r\n API_BASE,\r\n API_VERSION,\r\n COMPANIES,\r\n GROUP,\r\n} from \"../../helper/api_urls\";\r\nimport { validateGetResponse } from \"../../helper/validateGetResponse\";\r\n\r\nconst getCompaniesGroup = async () => {\r\n try {\r\n const getUrl = `${API_BASE}${API_VERSION}${COMPANIES}${GROUP}`;\r\n\r\n return await validateGetResponse(\r\n getUrl,\r\n \"Erro ao verificar os grupos disponíveis\"\r\n );\r\n } catch (error) {\r\n throw error;\r\n }\r\n};\r\n\r\nconst getCompaniesGroupByCode = async (code) => {\r\n try {\r\n const getUrl = `${API_BASE}${API_VERSION}${COMPANIES}?code=${code}`;\r\n\r\n return await validateGetResponse(\r\n getUrl,\r\n \"Erro ao achar o grupo pelo código\"\r\n );\r\n } catch (error) {\r\n throw error;\r\n }\r\n};\r\n\r\nexport { getCompaniesGroup, getCompaniesGroupByCode };\r\n","import React from 'react';\r\nimport { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport Modal from 'react-modal';\r\nimport { getCompaniesGroup } from '../../../api/requests/companies/changeCompany';\r\nimport './styles.css';\r\n\r\nconst ModalCompaniesGroup = ({ choosed }) => {\r\n const [showModalCompany, setShowModalCompany] = useState(false);\r\n const [companies, setCompanies] = useState([]);\r\n\r\n const array = [];\r\n\r\n const sendChoose = (company) => {\r\n array.push(company);\r\n choosed(array);\r\n setShowModalCompany(false);\r\n }\r\n\r\n async function getAllGroups() {\r\n await getCompaniesGroup().then((res) => {\r\n if (res.length > 0) {\r\n setCompanies(res);\r\n setShowModalCompany(true);\r\n }\r\n }).catch(() => { return })\r\n }\r\n\r\n useEffect(() => {\r\n getAllGroups();\r\n }, [])\r\n\r\n return (\r\n \r\n
setShowModalCompany(false)}\r\n overlayClassName=\"modal-overlay company\"\r\n className=\"modal-content company\"\r\n ariaHideApp={false}\r\n >\r\n setShowModalCompany(false)}>\r\n x \r\n \r\n\r\n \r\n Selecione seu \r\n ESCRITÓRIO \r\n
\r\n\r\n \r\n
Oba! Vimos aqui que você tem algumas empresas no grupo nas quais pode entrar. Selecione abaixo em qual escritório você está: \r\n \r\n
\r\n\r\n
\r\n {companies.map((company, companyIndex) => {\r\n return (\r\n
\r\n
\r\n sendChoose(company)}\r\n />\r\n sendChoose(company)}>{company.name} \r\n
\r\n\r\n
{company.address.address}, {company.address.number} \r\n
\r\n )\r\n })}\r\n
\r\n
setShowModalCompany(false)}>\r\n não, não é nenhuma dessas. \r\n \r\n \r\n \r\n \r\n setShowModal(val)}\r\n companies={companiesGroups}\r\n choosed={val => setCompany(val)}\r\n />\r\n\r\n setCompany(val)}\r\n />\r\n\r\n \r\n\r\n
\r\n
\r\n Para vincular sua conta a uma empresa é super tranquilo. \r\n Escolha uma das formas abaixo: \r\n
\r\n\r\n
\r\n
\r\n
\r\n OPÇÃO 1: \r\n Já tem um código POSHER? \r\n
\r\n
obs.: Seu RH poderá informar esse código. \r\n\r\n
\r\n
setCodeCompany(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n confirmar \r\n \r\n \r\n\r\n
\r\n
\r\n OPÇÃO 2: \r\n Informe seu email corporativo \r\n
\r\n
Você usou um email pessoal. Se preferir, use o corporativo para identificarmos sua empresa. \r\n\r\n
\r\n
setEmail(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n confirmar \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default LinkCompany;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .background-body {\r\n padding-bottom: 150px;\r\n }\r\n\r\n .content-wallet {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .balance {\r\n width: 800px;\r\n background-color: #FFFFFF;\r\n align-self: center;\r\n display: flex;\r\n padding: 10px 0;\r\n align-items: center;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 20px;\r\n border: 1px solid #FA9F2A;\r\n margin: 50px 0 20px;\r\n }\r\n\r\n .balance-text {\r\n color: #FA9F2A;\r\n font-size: 1.2rem;\r\n }\r\n\r\n .balance-text:first-child {\r\n margin-right: 10px;\r\n }\r\n\r\n .table-container {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .card {\r\n width: 800px;\r\n align-self: center;\r\n margin: 10px 0;\r\n }\r\n\r\n .card-top {\r\n background-color: #FFFFFF;\r\n border-radius: 18px;\r\n padding: 10px 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n align-items: center;\r\n border: 1px solid #CFCFCF;\r\n }\r\n\r\n .text-card {\r\n color: #707070;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n }\r\n\r\n .text {\r\n color: #707070;\r\n font-size: 1rem;\r\n text-align: center;\r\n }\r\n\r\n .button-more {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 30px 0 10px;\r\n }\r\n\r\n .next-page-button {\r\n background-color: #FA9F2A;\r\n font-size: 1.2rem;\r\n width: 200px;\r\n padding: 5px 0;\r\n border-radius: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #FFFFFF;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .background-body {\r\n padding-bottom: 70px;\r\n }\r\n }\r\n\r\n @media(max-width: 820px) {\r\n .balance,\r\n .card {\r\n width: 600px;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .balance,\r\n .card {\r\n width: 500px;\r\n }\r\n\r\n .text-card {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .balance-text {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .text-card:nth-child(2) {\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n margin: 0 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .balance,\r\n .card {\r\n width: 400px;\r\n }\r\n\r\n .text-card {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .balance-text {\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .balance,\r\n .card {\r\n width: 300px;\r\n }\r\n\r\n .text-card {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .balance-text {\r\n font-size: 1rem;\r\n }\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n \r\n .skeleton-price {\r\n width: 800px;\r\n height: 60px;\r\n border-radius: 20px;\r\n margin: 50px 0 20px;\r\n }\r\n\r\n .button-skeleton {\r\n width: 400px;\r\n height: 80px;\r\n border-radius: 20px;\r\n margin: 20px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .skeleton-price {\r\n width: 500px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .button-skeleton {\r\n width: 350px;\r\n }\r\n\r\n .skeleton-price {\r\n width: 400px;\r\n }\r\n }\r\n\r\n @media(max-width: 400px) {\r\n .skeleton-price {\r\n width: 350px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .button-skeleton {\r\n width: 300px;\r\n }\r\n\r\n .skeleton-price {\r\n width: 300px;\r\n }\r\n }\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n .today-skeleton {\r\n width: 800px;\r\n height: 60px;\r\n border-radius: 20px;\r\n margin: 10px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 500px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 400px;\r\n }\r\n }\r\n\r\n @media(max-width: 400px) {\r\n .today-skeleton {\r\n width: 350px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .today-skeleton {\r\n width: 300px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonWallet = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonWallet;","import React, { useEffect, useState } from 'react';\r\nimport { getWalletStatement } from '../../../api/payments';\r\nimport { formatCurrencyBRL } from '../../../utils/utils';\r\nimport Moment from 'moment-timezone';\r\nimport { toast } from 'react-toastify';\r\nimport Header from '../../../components/Header';\r\nimport { Container } from './styles';\r\nimport TabButton from '../../../components/TabButton';\r\nimport Footer from '../../../components/Footer';\r\nimport SkeletonWallet from './SkeletonWallet';\r\nimport { debounce } from 'throttle-debounce';\r\n\r\nconst WalletStatement = () => {\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n const [allStatements, setAllStatements] = useState({\r\n balance: 0,\r\n entries: [],\r\n has_next_entries_page: false\r\n });\r\n const [page, setPage] = useState(1);\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if (document.getElementById('bodyWallet')) {\r\n document.getElementById('bodyWallet').style.display = 'flex';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 1000);\r\n }\r\n\r\n const searchStatements = async () => {\r\n try {\r\n await getWalletStatement(setAllStatements, page * 10).then(() => cancelLoading());\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n if (document.getElementById('bodyWallet')) {\r\n document.getElementById('bodyWallet').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => debounce(5000, searchStatements()), 1500);\r\n }\r\n\r\n return () => { isMounted = false };\r\n }, [page]);\r\n\r\n return (\r\n \r\n \r\n\r\n \r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n
\r\n Saldo: \r\n {formatCurrencyBRL(allStatements.balance)} \r\n
\r\n\r\n
\r\n {allStatements.entries.length > 0 ?\r\n allStatements.entries.map((statement, index) => {\r\n return (\r\n
\r\n
\r\n {Moment(statement.created_at).format('DD/MM/YYYY')} \r\n {statement.description} \r\n {formatCurrencyBRL(statement.value)} \r\n
\r\n
\r\n );\r\n })\r\n :\r\n
Não há lançamentos a serem exibidos. \r\n }\r\n\r\n {allStatements.has_next_entries_page &&\r\n
\r\n setPage(page + 1)}>\r\n mais \r\n \r\n
\r\n }\r\n
\r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n );\r\n}\r\n\r\nexport default WalletStatement;","import { header, fetchWithTimeout } from './helper/request';\r\nimport {\r\n API_BASE,\r\n API_VERSION,\r\n SERVICE_PACKAGES,\r\n SERVICE_PACKAGES_METHODS,\r\n SERVICE_PACKAGES_PURCHARSE,\r\n PAYMENTS,\r\n} from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\n\r\n/* Get */\r\n\r\nconst getServicePackages = async (callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${SERVICE_PACKAGES}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else if (response.status === 404) {\r\n\r\n callback([]);\r\n } else {\r\n throw new Error('erro na chamada getServicePackages: ' + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de pacotes');\r\n }\r\n}\r\n\r\nconst getPackagePaymentsMethods = async (callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${PAYMENTS}${SERVICE_PACKAGES_METHODS}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error('erro na chamada getPaymentsMethods: ' + response.status);\r\n }\r\n\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta dos métodos de pagamentos');\r\n }\r\n}\r\n\r\nconst getPackageList = async (idCategory, callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${SERVICE_PACKAGES_PURCHARSE}?category_id=${idCategory}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error('erro na chamada getPackageList: ' + response.status);\r\n }\r\n\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta da lista de pacotes');\r\n }\r\n}\r\n\r\n/* Post */\r\n\r\nconst createOrderPackage = async (idPackage, paymentMethod, cardId) => {\r\n let validationError = false;\r\n try {\r\n let data = {\r\n payment_method: paymentMethod,\r\n card_id: cardId,\r\n };\r\n\r\n const { post_bearer } = header(data);\r\n\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${SERVICE_PACKAGES}/${idPackage}/orders`, post_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n\r\n } else if (response.status === 400) {\r\n const responseJson = response.data;\r\n validationError = true;\r\n throw new Error(responseJson.message);\r\n\r\n } else {\r\n throw new Error('erro na chamada createOrderPackage: ' + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar criação do pedido de pacote');\r\n }\r\n }\r\n}\r\n\r\nexport {\r\n getServicePackages,\r\n getPackagePaymentsMethods,\r\n getPackageList,\r\n createOrderPackage,\r\n}","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 800px;\r\n padding: 5px 0;\r\n border-radius: 18px;\r\n background-color: #FFFFFF;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n position: relative;\r\n margin: 12px 0;\r\n align-self: center;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);\r\n\r\n .image {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 18px;\r\n margin: 5px 0;\r\n margin-left: 12px;\r\n };\r\n\r\n .info {\r\n display: flex;\r\n flex-direction: column;\r\n margin-left: 13px;\r\n };\r\n\r\n .title {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n };\r\n\r\n .title-text {\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n max-width: 590px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n };\r\n\r\n .status {\r\n color: #14213D;\r\n font-size: 0.9rem;\r\n font-weight: bold;\r\n margin: 2px 0; \r\n };\r\n\r\n .status-disabled {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n font-weight: bold;\r\n margin: 2px 0; \r\n };\r\n\r\n .quantity {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n margin: 2px 0; \r\n };\r\n\r\n .quantity-bold {\r\n color: #14213D;\r\n font-weight: bold;\r\n };\r\n\r\n .expire {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n };\r\n\r\n .button-more {\r\n background: none;\r\n width: 100%;\r\n };\r\n\r\n .more-info {\r\n color: #FA9F2A;\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-self: flex-start;\r\n text-align: left;\r\n margin: 2px 0; \r\n };\r\n\r\n .price {\r\n border-radius: 17px 17px 0 17px;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 71px;\r\n height: 28px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border: 1px solid #14213D;\r\n };\r\n\r\n .price-text {\r\n color: #14213D;\r\n font-size: 0.8rem;\r\n };\r\n\r\n .price-value {\r\n font-size: 0.85rem;\r\n };\r\n\r\n @media(max-width: 840px) {\r\n width: 600px;\r\n\r\n .image {\r\n width: 90px;\r\n height: 90px;\r\n margin-left: 10px;\r\n };\r\n\r\n .title-text {\r\n width: 400px;\r\n };\r\n }\r\n\r\n @media(max-width: 630px) {\r\n width: 500px;\r\n\r\n .image {\r\n width: 85px;\r\n height: 85px;\r\n margin-left: 8px;\r\n };\r\n\r\n .title-text {\r\n width: 300px;\r\n };\r\n }\r\n\r\n @media(max-width: 530px) {\r\n width: 400px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n margin-left: 8px;\r\n };\r\n\r\n .title-text {\r\n width: 200px;\r\n };\r\n }\r\n\r\n @media(max-width: 425px) {\r\n width: 350px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n margin-left: 8px;\r\n };\r\n\r\n .title-text {\r\n width: 170px;\r\n };\r\n }\r\n\r\n @media(max-width: 375px) {\r\n width: 300px;\r\n\r\n .image {\r\n width: 75px;\r\n height: 75px;\r\n margin-left: 8px;\r\n };\r\n\r\n .title-text {\r\n width: 120px;\r\n font-size: 1rem;\r\n };\r\n }\r\n`;","import React from 'react';\r\nimport { formatCurrencyBRL } from '../../../../utils/utils';\r\nimport Moment from 'moment-timezone';\r\nimport { Container } from './styles';\r\n\r\nconst PackageUnit = ({ pack, descriptionSelected }) => {\r\n var purchased = 0;\r\n var available = 0;\r\n\r\n for (let i = 0; i < pack.items.length; i++) {\r\n purchased += parseInt(pack.items[i].purchased_quantity);\r\n available += parseInt(pack.items[i].available_quantity);\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n {pack.name} \r\n
\r\n\r\n
Disponível\r\n 0 && \"quantity-bold\"}> {available} \r\n 0 && \"quantity-bold\"}>/{purchased} \r\n \r\n\r\n
Válido até: {Moment(pack.expires_at).format('DD/MM/YYYY')} \r\n\r\n
{pack.stateName} \r\n\r\n
descriptionSelected(pack)}>\r\n + informações \r\n \r\n
\r\n R$ {formatCurrencyBRL(pack.price).substr(2)} \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default PackageUnit;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .no-service {\r\n font-size: 1.2rem;\r\n color: #C4C4C4;\r\n margin: 20px 0;\r\n };\r\n\r\n .container-pack {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n margin-top: 15px;\r\n padding-bottom: 150px;\r\n };\r\n\r\n .container-pack-unit {\r\n display: flex;\r\n margin: 20px 0;\r\n width: 20rem;\r\n };\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n };\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .container-pack {\r\n padding-bottom: 80px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalMoreInformation = ({ showModal, setShowModal, title, body }) => {\r\n return (\r\n \r\n
setShowModal(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content more-info\"\r\n ariaHideApp={false}\r\n >\r\n \r\n {title} \r\n
\r\n\r\n \r\n \r\n {body}\r\n \r\n
\r\n\r\n setShowModal(false)}>\r\n fechar \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonMyPackages;","import React, { useEffect, useState } from 'react';\r\nimport { getServicePackages } from '../../api/service_packages';\r\nimport PackageUnit from './components/PackageUnit';\r\nimport { toast } from 'react-toastify';\r\nimport Header from '../../components/Header';\r\nimport TabButton from '../../components/TabButton';\r\nimport { Container } from './styles';\r\nimport ModalMoreInformation from '../../components/Modals/ModalMoreInformation';\r\nimport Footer from '../../components/Footer';\r\nimport { debounce } from 'throttle-debounce';\r\nimport SkeletonMyPackages from './SkeletonMyPackages';\r\n\r\nconst MyPackages = () => {\r\n const [allPackages, setAllPackages] = useState([]);\r\n const [descriptionSelected, setDescriptionSelected] = useState({});\r\n const [modalVisible, setModalVisible] = useState(false);\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if (document.getElementById('packageBody')) {\r\n document.getElementById('packageBody').style.display = 'flex';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 1000);\r\n }\r\n\r\n const getAllPackages = async () => {\r\n try {\r\n await getServicePackages(setAllPackages);\r\n cancelLoading();\r\n } catch (error) {\r\n toast.error(error.message, { autoClose: 3000 });\r\n cancelLoading();\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n if (document.getElementById('packageBody')) {\r\n document.getElementById('packageBody').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => debounce(5000, getAllPackages()), 1500);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n\r\n {modalVisible &&\r\n setModalVisible(val)} body={descriptionSelected.description} />\r\n }\r\n\r\n \r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n {allPackages.length > 0 ?\r\n allPackages.map((pack, index) => {\r\n return (\r\n
{ setDescriptionSelected(val); setModalVisible(true) }}\r\n />\r\n );\r\n })\r\n :\r\n \r\n Nenhum pacote encontrado. \r\n
\r\n }\r\n \r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n )\r\n};\r\n\r\nexport default MyPackages;","import styled from 'styled-components';\r\nimport imgSrc from \"../../../assets/bg-login.png\";\r\n\r\nexport const Container = styled.div`\r\n background-image: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url(${imgSrc});\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n position: relative;\r\n min-height: 100vh;\r\n background-color: #FFF;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .content-register {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin: 70px 0;\r\n }\r\n\r\n .login-text {\r\n font-size: 2rem;\r\n color: #fff;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .select-input,\r\n .inputs {\r\n width: 600px;\r\n text-align: center;\r\n margin: 10px 0;\r\n font-size: 1.2rem;\r\n height: 60px;\r\n border-radius: 30px;\r\n border: 1px solid #CFCFCF;\r\n padding: 0 40px;\r\n background-color: #fff;\r\n color: #707070;\r\n }\r\n\r\n .select-input:focus,\r\n .inputs:focus {\r\n border: 2px solid #FA9F2A;\r\n }\r\n\r\n .input-container-select {\r\n position: relative;\r\n }\r\n\r\n .icon-select-input {\r\n position: absolute;\r\n top: 25px;\r\n right: 20px;\r\n }\r\n\r\n .select-input::-ms-expand {\r\n display: none;\r\n }\r\n\r\n .select-input {\r\n text-align: center;\r\n text-align-last: center;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n cursor: pointer;\r\n }\r\n\r\n .select-input::-webkit-scrollbar-track {\r\n background-color: #f7f7f7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n .select-input::-webkit-scrollbar {\r\n width: 7px;\r\n background: #f7f7f7;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n\r\n .select-input::-webkit-scrollbar-thumb {\r\n background: #dad7d7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n .select-input::-webkit-scrollbar-corner {\r\n border-radius: 20px;\r\n }\r\n\r\n .input-disabled {\r\n background-color: #CFCFCF;\r\n color: #FFF;\r\n }\r\n\r\n .input-password-container {\r\n position: relative;\r\n }\r\n\r\n .border-icon-input {\r\n position: absolute;\r\n right: 15px;\r\n top: 22px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 8px;\r\n background-color: #FA9F2A;\r\n border-radius: 100%;\r\n }\r\n\r\n .buttom-view {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 20px;\r\n background-color: #FA9F2A;\r\n border-radius: 25px;\r\n padding: 15px 0;\r\n width: 400px;\r\n font-size: 1.2rem;\r\n transition: .2s background;\r\n }\r\n\r\n .buttom-view:hover {\r\n background-color: #E6860B;\r\n }\r\n\r\n .recaptcha {\r\n margin-top: 30px;\r\n }\r\n\r\n @media(max-width: 820px) {\r\n .select-input,\r\n .inputs {\r\n width: 500px;\r\n font-size: 1rem;\r\n }\r\n\r\n .buttom-view {\r\n width: 350px;\r\n font-size: 1rem;\r\n }\r\n\r\n .login-text {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n @media(max-width: 560px) {\r\n .select-input,\r\n .inputs {\r\n width: 400px;\r\n }\r\n\r\n .buttom-view {\r\n width: 300px;\r\n }\r\n\r\n .login-text {\r\n font-size: 1.4rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .select-input,\r\n .inputs {\r\n width: 300px;\r\n height: 50px;\r\n font-size: 1rem;\r\n }\r\n\r\n .buttom-view {\r\n width: 250px;\r\n font-size: 1rem;\r\n }\r\n\r\n .login-text {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .icon-select-input {\r\n top: 20px;\r\n right: 10px;\r\n }\r\n\r\n .border-icon-input {\r\n top: 20px;\r\n right: 10px;\r\n padding: 5px 8px;\r\n }\r\n\r\n .border-icon-input svg {\r\n width: 15px;\r\n }\r\n }\r\n`;","import i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\n\nimport ptBRJson from './translations/ptBR.json'\nimport enJson from './translations/en.json'\nimport esJson from './translations/es.json'\nimport { getDeviceLocaleLanguage } from \"./languageUtils\";\n\n\nconst detectLocale = (callback) => {\n const storedLocale = localStorage.getItem(\"userSelectedLanguage\");\n const language = storedLocale || getDeviceLocaleLanguage()\n\n return callback(language)\n}\n\nconst languageDetector = {\n type: \"languageDetector\",\n async: true,\n detect: detectLocale,\n init: () => { },\n cacheUserLanguage: () => { },\n};\n\ni18n\n .use(initReactI18next)\n .use(languageDetector) //Detect last used language\n .init({\n fallbackLng: \"ptBR\", //Fallback language\n interpolation: {\n escapeValue: false\n },\n resources: {\n \"ptBR\": ptBRJson,\n \"es\": esJson,\n \"en\": enJson\n }\n })\n\nexport default i18n;","import React, { useState, useEffect } from \"react\";\r\nimport { FiEye, FiEyeOff } from \"react-icons/fi\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { toast } from \"react-toastify\";\r\nimport InputMask from \"react-input-mask\";\r\nimport { RiArrowDownSFill } from \"react-icons/ri\";\r\nimport {\r\n getCustomerCountries,\r\n makeRegisterCustomer,\r\n getTermsConditions,\r\n} from \"../../../api/customer\";\r\nimport { makePasswordLogin } from \"../../../api/login\";\r\nimport { useAuthContext } from \"../../../hooks/context\";\r\nimport { onSignIn, getUser } from \"../../../utils/auth\";\r\nimport {\r\n putEmployeeInCompany,\r\n getCompanyByEmail,\r\n} from \"../../../api/companies\";\r\nimport ModalCompanies from \"../../../components/Modals/ModalCompanies\";\r\nimport { Container } from \"./styles\";\r\nimport LoaderSpinner from \"../../../components/LoaderSpinner\";\r\nimport ModalTermsAndConditions from \"../../../components/Modals/ModalTermsAndConditions\";\r\nimport ReCAPTCHA from \"react-google-recaptcha\";\r\nimport { t } from \"i18next\";\r\nimport { countryToLanguage } from \"../../../i18n/languageUtils\";\r\nimport i18n from \"../../../i18n\";\r\n\r\nconst RegisterCustomer = ({ location, authenticated }) => {\r\n const navigation = useHistory();\r\n const username = location.state ? location.state.username : null;\r\n const external = location.state?.external || null;\r\n const [loading, setLoading] = useState(false);\r\n const [email, setEmail] = useState(location?.state && location?.state?.email);\r\n const [cpf, setCpf] = useState(\"\");\r\n const [fullName, setFullName] = useState(\r\n location?.state && location.state.name\r\n );\r\n const [disableCpf, setDisableCpf] = useState(false);\r\n const [hidePassword, setHidePassword] = useState(true);\r\n const [disableEmail, setDisableEmail] = useState(false);\r\n const [password, setPassword] = useState(\"\");\r\n const [terms, setTerms] = useState();\r\n const [selectedCompany, setSelectedCompany] = useState([]);\r\n const [mobilePhone, setMobilePhone] = useState();\r\n const [showModalTerms, setShowModalTerms] = useState(false);\r\n const [showModalCompanies, setShowModalCompanies] = useState(false);\r\n const [identificationDocument, setIdentificationDocument] = useState(\"\");\r\n const [country, setCountry] = useState(\"Brasil\");\r\n const [token, setToken] = useState(\"\");\r\n const [countries, setCountries] = useState([]);\r\n const [codeRegistrationRequired, setCodeRegistrationRequired] =\r\n useState(false);\r\n const { user, userRef } = useAuthContext();\r\n\r\n const onCancelTerms = () => {\r\n navigation.push(\"/\");\r\n };\r\n\r\n const passwordHideAndShow = () => {\r\n setHidePassword(!hidePassword);\r\n };\r\n\r\n const doLinkCompany = async (selectedCompany) => {\r\n try {\r\n setLoading(true);\r\n\r\n await putEmployeeInCompany(\r\n selectedCompany[0].id || selectedCompany[0][0].id\r\n );\r\n\r\n getUser().company = selectedCompany;\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message);\r\n } finally {\r\n setLoading(false);\r\n navigation.push(\"/home\");\r\n }\r\n };\r\n\r\n const changeCountry = async (selectedCountry) => {\r\n setCountry({ selectedValue: selectedCountry });\r\n let language = countryToLanguage[selectedCountry];\r\n i18n.changeLanguage(language);\r\n localStorage.setItem(\"userSelectedLanguage\", language);\r\n };\r\n\r\n const register = async () => {\r\n try {\r\n if (!token) {\r\n toast.warn(\"Favor preencher o reCAPTCHA\");\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n let finalPassword = password;\r\n\r\n if (external) {\r\n const provider = localStorage.getItem(\"provider\");\r\n finalPassword = provider;\r\n }\r\n\r\n await makeRegisterCustomer(\r\n email,\r\n cpf,\r\n identificationDocument,\r\n fullName,\r\n mobilePhone,\r\n country.selectedValue,\r\n finalPassword\r\n );\r\n\r\n const data = await makePasswordLogin(username, finalPassword);\r\n\r\n if (data.pending_registration === true) {\r\n setCodeRegistrationRequired(true);\r\n }\r\n\r\n onSignIn(data);\r\n\r\n await getCompanyByEmail(email).then((companies) => {\r\n let array = [];\r\n if (companies.length > 0) {\r\n array.push(companies);\r\n setSelectedCompany(array);\r\n } else if (companies.length === 0) {\r\n toast.error(\"Empresa não encontrada\");\r\n }\r\n });\r\n\r\n await getTermsConditions(setTerms);\r\n\r\n setLoading(false);\r\n } catch (error) {\r\n setLoading(false);\r\n\r\n const errorMessage = error.message;\r\n const validationMessages = [];\r\n\r\n if (errorMessage.indexOf(\"email\") >= 0) {\r\n validationMessages.push(\"Email\");\r\n }\r\n\r\n if (errorMessage.indexOf(\"country\") >= 0) {\r\n validationMessages.push(\"País\");\r\n }\r\n\r\n if (\r\n country.selectedValue === \"BR\" &&\r\n (!cpf || errorMessage.indexOf(\"cpf\") >= 0)\r\n ) {\r\n validationMessages.push(\"CPF\");\r\n }\r\n\r\n if (\r\n country.selectedValue !== \"BR\" &&\r\n (!identificationDocument ||\r\n errorMessage.indexOf(\"identificationDocument\") >= 0)\r\n ) {\r\n validationMessages.push(\"Documento de identificação\");\r\n }\r\n\r\n if (errorMessage.indexOf(\"name\") >= 0) {\r\n validationMessages.push(\"Nome\");\r\n }\r\n\r\n if (errorMessage.indexOf(\"mobilePhone\") >= 0) {\r\n validationMessages.push(\"Telefone\");\r\n }\r\n\r\n if (errorMessage.indexOf(\"password\") >= 0 && !external) {\r\n validationMessages.push(\"Senha\");\r\n }\r\n\r\n if (validationMessages.length > 0) {\r\n toast.warn(\r\n `Favor preencher os campos obrigatórios:\\n- ${validationMessages.join(\r\n \"\\n- \"\r\n )}`\r\n );\r\n } else {\r\n toast.error(`Erro ao realizar cadastro: ${errorMessage}`);\r\n }\r\n }\r\n };\r\n\r\n const getAllInfo = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n await getCustomerCountries(setCountries);\r\n\r\n setCountry({ selectedValue: \"BR\" });\r\n setDisableCpf(cpf && cpf.length > 0);\r\n setDisableEmail(email && email.length > 0);\r\n\r\n setLoading(false);\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (!location || !location.state) {\r\n navigation.push(\"/\");\r\n }\r\n\r\n if (authenticated) {\r\n navigation.push(\"/home\");\r\n }\r\n\r\n if (authenticated || user || userRef.current) {\r\n navigation.push(\"/home\");\r\n }\r\n\r\n getAllInfo();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (terms?.privacy) {\r\n setShowModalTerms(true);\r\n } else if (terms?.acceptance_token && selectedCompany[0]?.length > 1) {\r\n setShowModalCompanies(true);\r\n } else if (terms?.acceptance_token && selectedCompany.length === 1) {\r\n doLinkCompany(selectedCompany);\r\n } else if (\r\n terms?.acceptance_token &&\r\n selectedCompany.length < 1 &&\r\n !codeRegistrationRequired\r\n ) {\r\n navigation.push(\"/home\");\r\n } else if (codeRegistrationRequired) {\r\n navigation.replace(\"/register-otp\");\r\n }\r\n }, [terms, selectedCompany, codeRegistrationRequired]);\r\n\r\n useEffect(() => {\r\n sessionStorage.clear();\r\n }, []);\r\n\r\n return (\r\n \r\n setShowModalCompanies(val)}\r\n companies={selectedCompany}\r\n choosed={(val) => setSelectedCompany(val)}\r\n />\r\n\r\n setShowModalTerms(val)}\r\n setLoading={(val) => setLoading(val)}\r\n privacy={terms?.privacy}\r\n service={terms?.service}\r\n version={terms?.version}\r\n onCancel={onCancelTerms}\r\n setTerm={(val) => setTerms(val)}\r\n />\r\n\r\n \r\n
{t(\"letsGetToKnowEachOther\")} \r\n\r\n
setEmail(e.target.value)}\r\n disabled={!!disableEmail}\r\n />\r\n\r\n \r\n
changeCountry(e.target.value)}\r\n className=\"select-input\"\r\n >\r\n \r\n {t(\"selectCountryPlaceholder\")}\r\n \r\n {countries.map((country) => {\r\n return (\r\n \r\n {country.name}\r\n \r\n );\r\n })}\r\n \r\n\r\n \r\n
\r\n setCpf(e.target.value)}\r\n maskChar=\"\"\r\n mask=\"999.999.999-99\"\r\n />\r\n )}\r\n\r\n {country.selectedValue !== \"BR\" && (\r\n setIdentificationDocument(e.target.value)}\r\n />\r\n )}\r\n\r\n setFullName(e.target.value)}\r\n />\r\n\r\n setMobilePhone(e.target.value)}\r\n maskChar=\"\"\r\n mask=\"(99) 99999-9999\"\r\n />\r\n\r\n {!external && (\r\n \r\n setPassword(e.target.value)}\r\n />\r\n\r\n \r\n {hidePassword ? (\r\n
\r\n )}\r\n\r\n \r\n {t(\"registerButton\")} \r\n \r\n\r\n \r\n setToken(token)}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default RegisterCustomer;\r\n","import styled from \"styled-components\";\nimport imgSrc from \"../../../assets/bg-login.png\";\n\nexport const Container = styled.div`\n background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n url(${imgSrc});\n background-repeat: no-repeat;\n background-size: cover;\n height: 100vh;\n background-position: center;\n position: relative;\n background-color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .logo-img-login {\n position: absolute;\n top: 100px;\n width: 500px;\n }\n\n .code-forms {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .code-forms .input-code > input {\n margin: 10px;\n width: 60px;\n height: 60px;\n border-radius: 10px;\n font-size: 2rem;\n border: 1px solid lightgrey;\n box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;\n text-align: center;\n box-sizing: border-box;\n color: #fa9f2a;\n background-color: white;\n }\n\n .code-forms .input-code > input::-webkit-outer-spin-button,\n .code-forms .input-code > input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n }\n\n .code-forms .input-code > input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n .login-text {\n text-align: center;\n width: 500px;\n margin-bottom: 10px;\n }\n\n @media (max-width: 740px) {\n .code-forms .input-code > input {\n margin: 5px;\n width: 50px;\n height: 50px;\n border-radius: 5px;\n font-size: 1.5rem;\n }\n\n .logo-img-login {\n width: 400px;\n }\n }\n\n @media (max-width: 520px) {\n .login-text {\n width: 250px;\n }\n\n .code-forms .input-code > input {\n width: 40px;\n height: 40px;\n font-size: 1.3rem;\n }\n\n .logo-img-login {\n width: 350px;\n }\n }\n\n @media (max-width: 375px) {\n .code-forms .input-code > input {\n width: 30px;\n height: 30px;\n font-size: 1rem;\n }\n\n .logo-img-login {\n width: 300px;\n }\n }\n`;\n\nexport const ButtonSendAgain = styled.button`\n background: none;\n display: flex;\n align-items: center;\n text-decoration: underline;\n font-size: 1rem;\n margin-top: 20px;\n\n > .text-button-code {\n margin-left: 5px;\n }\n`;\n","import React, { useState, useEffect } from \"react\";\nimport { useHistory } from \"react-router-dom\";\nimport { toast } from \"react-toastify\";\nimport { Container, ButtonSendAgain } from \"./styles\";\nimport { makeRegisterOTP, makePutOTP } from \"../../../api/customer\";\nimport LoaderSpinner from \"../../../components/LoaderSpinner\";\nimport ReactCodeInput from \"react-code-input\";\nimport { FiRotateCcw } from \"react-icons/fi\";\nimport LogoImg from \"../../../assets/posherlogo.png\";\nimport { LoginFooter } from \"../../Login/components/LoginFooter\";\n\nconst RegisterOTP = ({ location }) => {\n const navigation = useHistory();\n const deep = location?.state?.callback;\n const [timer, setTimer] = useState(0);\n const [loading, setLoading] = useState(false);\n const [code, setCode] = useState(\"\");\n\n const doRegisterOtp = async () => {\n try {\n setLoading(true);\n\n await makeRegisterOTP(code);\n\n toast.success(\"Código registrado\");\n\n if (deep) {\n return navigation.push(deep);\n }\n\n return navigation.push(\"Home\");\n } catch (error) {\n toast.error(error.message);\n } finally {\n setLoading(false);\n }\n };\n\n const doResendOtp = async () => {\n try {\n setLoading(true);\n\n await makePutOTP();\n\n toast.success(\"Código reenviado\");\n\n setTimer(30);\n } catch (error) {\n toast.error(error.message);\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n const interval = setInterval(() => {\n if (timer === 0) return;\n setTimer((prev) => (prev -= 1));\n }, 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, [timer]);\n\n useEffect(() => {\n if (code.length === 6) {\n let isMounted = true;\n\n if (isMounted) {\n doRegisterOtp();\n }\n\n return () => {\n isMounted = false;\n };\n }\n }, [code]);\n\n return (\n \n \n
\n Preencha com o código enviado por e-mail e SMS\n \n\n
setCode(cod)}\n />\n\n \n {timer !== 0 ? (\n \n Você pode reenviar o código em {timer} segundos\n \n ) : (\n \n enviar novamente \n
\n )}\n \n \n );\n};\n\nexport default RegisterOTP;\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n margin-top: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .carousel {\r\n width: 900px !important;\r\n }\r\n\r\n .orderNotFound {\r\n color: #C4C4C4;\r\n margin-left: 20px;\r\n text-align: center;\r\n }\r\n\r\n .button-left {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n left: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n right: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right svg {\r\n color: #3e3e3e;\r\n fill: #3e3e3e;\r\n }\r\n\r\n .title {\r\n color: #14213D;\r\n font-size: 1.4rem;\r\n margin-bottom: 10px;\r\n margin-top: 30px;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n margin-left: 20px;\r\n text-align: center;\r\n }\r\n\r\n @media(max-width: 1000px) {\r\n .carousel {\r\n width: 850px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 47px;\r\n }\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .carousel {\r\n width: 800px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 48px;\r\n }\r\n }\r\n\r\n @media(max-width: 910px) {\r\n .carousel {\r\n width: 700px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 45px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .carousel {\r\n width: 650px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 45px;\r\n width: 35px;\r\n height: 35px;\r\n }\r\n\r\n .title {\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .carousel {\r\n width: 600px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n }\r\n\r\n @media(max-width: 639px) {\r\n .carousel {\r\n width: 450px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 48px;\r\n width: 30px;\r\n height: 30px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .carousel {\r\n width: 400px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 42px;\r\n }\r\n }\r\n\r\n @media(max-width: 440px) {\r\n .carousel {\r\n width: 350px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .carousel {\r\n width: 300px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 37px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .carousel {\r\n width: 280px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n }\r\n`;\r\n\r\nexport const ButtonsContainer = styled.div`\r\n\r\n`;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.button`\r\n display: flex;\r\n position: relative;\r\n width: 420px;\r\n height: 130px;\r\n border-radius: 20px;\r\n border: 1px solid #FA9F2A;\r\n background: #FFF;\r\n margin: 0 10px;\r\n transition: .2s background;\r\n\r\n :hover {\r\n background: #F8F8F8;\r\n }\r\n\r\n .img-button {\r\n align-self: center;\r\n margin-left: 10px;\r\n }\r\n\r\n .img-button img {\r\n width: 110px;\r\n height: 110px;\r\n border-radius: 25px;\r\n border: 1px solid #f2f2f2;\r\n background-color: #f2f2f2;\r\n }\r\n\r\n .info-button {\r\n margin: 0 15px;\r\n color: #14213D;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .info-button h3 {\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n color: #14213D;\r\n font-size: 1rem;\r\n margin: 10px 0 5px;\r\n text-align: left;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n width: 200px;\r\n height: 35px;\r\n }\r\n\r\n .more-info {\r\n display: flex;\r\n align-items: center;\r\n margin: 3px 0;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .more-info > span {\r\n margin-left: 4px;\r\n }\r\n\r\n .icon-button {\r\n position: absolute;\r\n right: 0;\r\n }\r\n\r\n .icon-button .button-orange{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #FA9F2A;\r\n width: 40px;\r\n height: 129px;\r\n border-radius: 0 18px 18px 0;\r\n }\r\n\r\n .icon-button .button-free {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n bottom: 0;\r\n right: 0px;\r\n width: 80px;\r\n height: 35px;\r\n background: #E6860B;\r\n border-radius: 18px 0 18px 0;\r\n }\r\n\r\n @media(max-width: 1000px) {\r\n width: 395px;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n width: 370px;\r\n\r\n .info-button h3 {\r\n width: 180px;\r\n }\r\n }\r\n\r\n @media(max-width: 910px) {\r\n width: 320px;\r\n height: 120px;\r\n\r\n .img-button img {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 119px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 150px;\r\n height: 28px;\r\n font-size: 0.713rem;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n width: 295px;\r\n\r\n .info-button h3 {\r\n width: 120px;\r\n height: 28px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n width: 270px;\r\n height: 100px;\r\n\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 99px;\r\n }\r\n\r\n .icon-button .button-free {\r\n width: 70px;\r\n height: 30px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 100px;\r\n height: 24px;\r\n }\r\n }\r\n\r\n @media(max-width: 639px) {\r\n width: 435px;\r\n height: 120px;\r\n\r\n .img-button img {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 119px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 230px;\r\n height: 32px;\r\n font-size: 0.813rem;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n width: 380px;\r\n height: 110px;\r\n\r\n .img-button img {\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 109px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 220px;\r\n }\r\n }\r\n\r\n @media(max-width: 440px) {\r\n width: 330px;\r\n\r\n .info-button h3 {\r\n width: 150px;\r\n height: 28px;\r\n font-size: 0.753rem;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n width: 280px;\r\n height: 100px;\r\n\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 99px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n width: 260px;\r\n height: 100px;\r\n\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 99px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 100px;\r\n height: 23px;\r\n font-size: 0.713rem;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { Container } from './styles';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { FiMapPin, FiChevronRight } from 'react-icons/fi';\r\nimport { FaCalendar, FaClock } from 'react-icons/fa';\r\nimport { toast } from 'react-toastify';\r\nimport { residentialAvailable } from '../../api/customer';\r\nimport { formatCurrencyBRL } from '../../utils/utils';\r\nimport moment from 'moment';\r\nimport ModalAddress from '../Modals/ModalAddress';\r\n\r\nconst ButtonsOfferLarge = (props) => {\r\n const history = useHistory();\r\n const offer = props.offer;\r\n const card = props.card;\r\n const [selectedAddress, setSelectedAddress] = useState(props.address);\r\n const [selectAddress, setSelectAddress] = useState(false);\r\n const [selectAddressMessage, setSelectAddressMessage] = useState();\r\n\r\n const navigateOffer = (offer, address) => {\r\n if (offer.service_id) {\r\n if (offer.on_demand_order) {\r\n history.push(\"/onDemandOrderData\", {\r\n offer: offer,\r\n orderType: offer.order_type,\r\n address: address,\r\n });\r\n } else if (offer.express_order) {\r\n history.push(\"/completeExpressOrder\", {\r\n offer: offer\r\n });\r\n } else {\r\n history.push(\"/slotList\", {\r\n offer: offer,\r\n orderType: offer.order_type,\r\n address: address,\r\n });\r\n }\r\n } else {\r\n history.push(\"/serviceList\", {\r\n offer: offer,\r\n orderType: offer.order_type,\r\n address: address,\r\n });\r\n }\r\n };\r\n\r\n const selectOffer = (offer, address, setSelectAddress, setSelectAddressMessage) => {\r\n setSelectAddressMessage(\"\");\r\n\r\n if (\"residential\" === offer.order_type && !address) {\r\n setSelectAddress(true);\r\n return;\r\n }\r\n\r\n navigateOffer(offer, address);\r\n };\r\n\r\n const afterSelectAddress = async (offer, setSelectAddress, setSelectAddressMessage, address) => {\r\n try {\r\n let available = await residentialAvailable(address.zipCode);\r\n\r\n if (available.available) {\r\n setSelectAddress(false);\r\n\r\n navigateOffer(offer, address);\r\n setSelectAddressMessage(\"\");\r\n } else {\r\n setSelectAddressMessage(\"Serviço indisponível no endereço selecionado\");\r\n }\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
afterSelectAddress(offer, setSelectAddress, setSelectAddressMessage, address)}\r\n warningMessage={selectAddressMessage}\r\n checkResidentialAvailability={true}\r\n />\r\n\r\n selectOffer(offer, selectedAddress, setSelectAddress, setSelectAddressMessage)}>\r\n \r\n
\r\n
\r\n
{offer.title} \r\n
\r\n {offer.place_description} \r\n
\r\n\r\n {card === 'today' &&\r\n
\r\n A partir das {moment(offer.begin_at).tz(\"America/Sao_Paulo\").format(\"HH:mm\")} \r\n
\r\n }\r\n
\r\n {card === 'today' ?\r\n
\r\n
\r\n :\r\n
\r\n
\r\n }\r\n\r\n {(offer.service_id && card === 'today') &&\r\n
\r\n {offer.express_order ? 'checkin' : offer.free ? 'grátis' : formatCurrencyBRL(offer.price)} \r\n
\r\n }\r\n\r\n {(offer.free && card !== 'today') &&\r\n
\r\n grátis \r\n
\r\n }\r\n
\r\n \r\n {t(\"whatsForToday\")}
\r\n\r\n {allTodayOffers.length > 0 ?\r\n \r\n \r\n \r\n \r\n }\r\n outsideChevron={false}\r\n infiniteLoop={allTodayOffers.length > numberOfCards ? true : false}\r\n alwaysShowChevrons={allTodayOffers.lenght > numberOfCards ? true : false}\r\n >\r\n {allTodayOffers.map((offer, todayOffersIndex) => {\r\n return (\r\n \r\n \r\n );\r\n })}\r\n\r\n \r\n
\r\n :\r\n\r\n {t(\"noOfferFound\")}
\r\n }\r\n \r\n );\r\n};\r\n\r\nexport default TodayOffers;\r\n","import { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\nimport {\r\n API_BASE,\r\n API_VERSION,\r\n DISCOUNT_COUPONS_AVAILABLE,\r\n DISCOUNT_COUPONS_BY_CODE\r\n} from './helper/api_urls';\r\nimport { fetchWithTimeout, header } from './helper/request';\r\nimport { validateGetResponse } from './helper/validateGetResponse';\r\n\r\nconst getDiscountCoupons = async (callback, orderDate) => {\r\n try {\r\n const { get_bearer } = header();\r\n let getUrl\r\n if (orderDate) {\r\n getUrl = `${API_BASE}${API_VERSION}${DISCOUNT_COUPONS_AVAILABLE}?orderDate=${orderDate}`;\r\n } else {\r\n getUrl = `${API_BASE}${API_VERSION}${DISCOUNT_COUPONS_AVAILABLE}`;\r\n }\r\n\r\n const response = await fetchWithTimeout(getUrl, get_bearer);\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error(\"erro na chamada getDiscountCoupons: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de cupons de desconto');\r\n }\r\n}\r\n\r\nconst getDiscountCouponsByCode = async (discount_coupon_code, orderDate) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${DISCOUNT_COUPONS_BY_CODE}?code=${discount_coupon_code}&orderDate=${orderDate}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const data = response.data;\r\n return data\r\n\r\n } else if (response.status === 404) {\r\n validationError = true;\r\n throw new Error('Cupom inválido');\r\n\r\n } else {\r\n throw new Error('erro na chamada getDiscountCouponsByCode: ' + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de cupom de desconto');\r\n }\r\n }\r\n}\r\n\r\nconst validateDiscountCoupon = async (discount_coupon_id, service_id, payment_method, order_type) => {\r\n try {\r\n const getUrl = `${API_BASE}${API_VERSION}${DISCOUNT_COUPONS_BY_CODE}/${discount_coupon_id}/valid?service_id=${service_id}&payment_method=${payment_method}&order_type=${order_type}`\r\n return await validateGetResponse(\r\n getUrl,\r\n \"Erro ao validar cupom de desconto.\",\r\n )\r\n } catch (error) {\r\n throw error\r\n }\r\n}\r\n\r\nexport {\r\n getDiscountCoupons,\r\n getDiscountCouponsByCode,\r\n validateDiscountCoupon\r\n};\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n padding: 20px 0;\r\n margin: 40px 0 1rem 0;\r\n background-color: #14213D;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .info-coupon {\r\n font-size: 1.4rem;\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .info-coupon {\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media(max-width: 460px) {\r\n .info-coupon {\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .info-coupon {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const ButtonCoupon = styled.button`\r\n display: flex; \r\n flex-direction: row;\r\n background-color: #FA9F2A;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 20px;\r\n margin-left: 20px;\r\n width: 200px;\r\n height: 42px;\r\n font-size: 1.2rem;\r\n transition: .2s background;\r\n\r\n :hover {\r\n background-color: #E6860B;\r\n }\r\n\r\n .text-coupon {\r\n color: #FFF;\r\n margin-left: 8px;\r\n margin-bottom: 3px;\r\n }\r\n\r\n @media(max-width: 780px) {\r\n width: 160px;\r\n height: 38px;\r\n font-size: 1rem;\r\n }\r\n\r\n @media(max-width: 460px) {\r\n width: 100px;\r\n height: 35px;\r\n font-size: 0.9rem;\r\n\r\n > svg {\r\n width: 14px;\r\n }\r\n\r\n .text-coupon {\r\n color: #FFF;\r\n margin-left: 5px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n width: 80px;\r\n height: 28px;\r\n font-size: 0.8rem;\r\n\r\n > svg {\r\n width: 12px;\r\n }\r\n }\r\n`;","import {\n API_BASE,\n API_VERSION,\n CASHBACKS_AVAILABLE,\n} from \"./helper/api_urls\";\nimport { validateGetResponse } from \"./helper/validateGetResponse\";\n\nconst getAvailableCashbacks = async () => {\n try {\n const getUrl = `${API_BASE}${API_VERSION}${CASHBACKS_AVAILABLE}`\n return await validateGetResponse(\n getUrl,\n \"Erro ao realizar consulta de cashbacks\"\n )\n } catch (error) {\n throw error;\n }\n}\n\nexport { getAvailableCashbacks }","import React, { useEffect, useState } from 'react';\r\nimport { getDiscountCoupons } from '../../../../api/discount_coupons';\r\nimport { FiTag } from 'react-icons/fi';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Container, ButtonCoupon } from './styles';\r\nimport { getAvailableCashbacks } from '../../../../api/cashback';\r\nimport {t} from 'i18next'\r\n\r\nconst DiscountCouponsBanner = () => {\r\n const history = useHistory();\r\n const [allCoupons, setAllCoupons] = useState([]);\r\n const [allCashbacks, setAllCashbacks] = useState([]);\r\n\r\n const couponsCount = allCoupons.length;\r\n const cashbackCount = allCashbacks.length;\r\n\r\n const searchDiscountCoupons = async (setAllCoupons) => {\r\n try {\r\n await getDiscountCoupons(setAllCoupons)\r\n } catch (error) {\r\n toast.error(error.message);\r\n setAllCoupons([]);\r\n }\r\n }\r\n\r\n const searchAvailableCashbacks = async (setAllCashbacks) => {\r\n try {\r\n await getAvailableCashbacks().then(cashback => setAllCashbacks(cashback));\r\n } catch (error) {\r\n toast.error(error.message);\r\n setAllCashbacks([]);\r\n }\r\n }\r\n\r\n const goToCoupons = () => {\r\n history.push(\"/discountCoupons\")\r\n }\r\n\r\n const buildBannerText = (couponsCount, cashbackCount) => {\r\n let text;\r\n if (couponsCount < 1 && cashbackCount < 1) {\r\n text = t(\"youDontHaveCouponsAvailable\");\r\n } else if (couponsCount > 0 && cashbackCount > 0) {\r\n text = t(\"youHaveCouponsAndCashbacks\");\r\n } else {\r\n text = t(\"youHaveText\");\r\n text += (couponsCount > 0 ? t(\"couponsWord\") : t(\"cashbackWord\")) + t(\"availableWord\")\r\n }\r\n\r\n return text;\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n searchDiscountCoupons(setAllCoupons);\r\n searchAvailableCashbacks(setAllCashbacks);\r\n }\r\n return () => { isMounted = false; };\r\n }, []);\r\n\r\n return (\r\n \r\n\r\n {buildBannerText(couponsCount, cashbackCount)}\r\n\r\n {(couponsCount > 0 || cashbackCount > 0) &&\r\n \r\n {t(\"showWord\")} \r\n \r\n }\r\n \r\n );\r\n}\r\n\r\nexport default DiscountCouponsBanner;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .carousel {\r\n width: 900px !important;\r\n }\r\n\r\n .title {\r\n color: #14213D;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n text-transform: uppercase;\r\n }\r\n\r\n .button-left {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n left: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n right: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right svg {\r\n color: #3e3e3e;\r\n fill: #3e3e3e;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n margin-left: 5px;\r\n .carousel {\r\n max-width: 860px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 910px) {\r\n .carousel {\r\n margin: 0 10px;\r\n max-width: 700px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .title {\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media(max-width: 740px) {\r\n .carousel {\r\n max-width: 600px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .carousel {\r\n max-width: 400px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .carousel {\r\n margin: 0 5px;\r\n max-width: 350px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .button-left,\r\n .button-right {\r\n display: none;\r\n }\r\n\r\n .carousel {\r\n margin-left: 0px;\r\n width: 300px !important;\r\n }\r\n }\r\n`;\r\n\r\nexport const ButtonsContainer = styled.div`\r\n\r\n`;","import Moment from 'moment-timezone';\r\nimport React from 'react';\r\nimport Modal from 'react-modal';\r\nimport { PaymentType } from '../../../utils/utils';\r\nimport './styles.css';\r\n\r\nconst ModalWarningOneClick = ({ showModalOneClick, setShowModalOneClick, oneClick, clicked }) => {\r\n const doCloseModal = (option) => {\r\n setShowModalOneClick(false);\r\n clicked(option);\r\n }\r\n\r\n return (\r\n \r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay oneClick\"\r\n className=\"modal-content oneClick\"\r\n ariaHideApp={false}\r\n >\r\n \r\n próximo agendamento \r\n serviço {oneClick.offer.title} \r\n
\r\n\r\n \r\n \r\n Confirmar agendamento do serviço {oneClick.offer.title} para o dia {Moment(oneClick.nextSuggestion.hour_begin).tz(\"America/Sao_Paulo\").format('DD/MM')} às {Moment(oneClick.nextSuggestion.hour_begin).tz(\"America/Sao_Paulo\").format('HH:mm')}, com a forma de pagamento: {PaymentType(oneClick.paymentMethod)}?\r\n \r\n
\r\n\r\n \r\n doCloseModal(true)}>\r\n confirmar \r\n \r\n doCloseModal(false)}>\r\n cancelar \r\n \r\n
\r\n \r\n \r\n {oneClick &&\r\n setShowModal(val)}\r\n oneClick={oneClick}\r\n clicked={option => option && doCreateOrder()}\r\n />\r\n }\r\n \r\n
Destaques
\r\n\r\n
\r\n \r\n \r\n \r\n }\r\n outsideChevron={false}\r\n infiniteLoop={length >= numberOfCards ? true : false}\r\n alwaysShowChevrons={length >= numberOfCards ? true : false}\r\n >\r\n {oneClick &&\r\n \r\n setShowModal(val)} />\r\n \r\n }\r\n\r\n {allHighLighted.length > 0 &&\r\n allHighLighted.map(offer => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n )\r\n })}\r\n \r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default HighLighted;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .title {\r\n color: #14213D;\r\n font-size: 1.4rem;\r\n margin-bottom: 10px;\r\n margin-top: 30px;\r\n font-weight: 700;\r\n margin-bottom: 30px;\r\n margin-left: 20px;\r\n text-align: center;\r\n }\r\n\r\n @media(max-width: 1024px) {\r\n .carousel {\r\n max-width: 680px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 910px) {\r\n .carousel {\r\n margin: 0 10px;\r\n max-width: 600px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .title {\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media(max-width: 660px) {\r\n .carousel {\r\n max-width: 580px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .carousel {\r\n max-width: 400px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 460px) {\r\n .carousel {\r\n margin: 0 5px;\r\n max-width: 350px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .carousel {\r\n max-width: 300px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n display: none;\r\n } \r\n }\r\n\r\n @media(max-width: 320px) {\r\n .carousel {\r\n max-width: 270px !important;\r\n }\r\n }\r\n\r\n`;\r\n\r\nexport const LineSeparator = styled.div`\r\n width: 100%;\r\n max-width: 800px !important;\r\n border: 0.1px solid #F2F2F2;\r\n margin: 20px 5%;\r\n\r\n @media(max-width: 930px) {\r\n max-width: 780px !important;\r\n }\r\n\r\n @media(max-width: 910px) {\r\n max-width: 650px !important;\r\n }\r\n\r\n @media(max-width: 740px) {\r\n max-width: 560px !important;\r\n }\r\n\r\n @media(max-width: 720px) {\r\n max-width: 550px !important;\r\n margin: 10px 5%;\r\n }\r\n\r\n @media(max-width: 640px) {\r\n max-width: 400px !important;\r\n }\r\n\r\n @media(max-width: 540px) {\r\n max-width: 350px !important;\r\n }\r\n\r\n @media(max-width: 425px) {\r\n max-width: 300px !important;\r\n }\r\n\r\n @media(max-width: 375px) {\r\n max-width: 270px !important;\r\n }\r\n\r\n @media(max-width: 320px) {\r\n max-width: 240px !important;\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.button`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 20px;\r\n background: none;\r\n margin: 0 20px;\r\n\r\n .img-button img {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 15px;\r\n border: 1px solid #f2f2f2;\r\n }\r\n\r\n .info-button {\r\n margin: 0 15px;\r\n color: #14213D;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .name-button {\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n color: #14213D;\r\n font-size: 0.813rem;\r\n margin: 10px 0 5px;\r\n text-align: center;\r\n height: 43px;\r\n font-size: 14px;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: 190px;\r\n }\r\n\r\n .more-info {\r\n display: flex;\r\n align-items: center;\r\n margin: 5px 0;\r\n }\r\n\r\n .more-info > span {\r\n margin-left: 2px;\r\n }\r\n\r\n .icon-button {\r\n position: absolute;\r\n right: 0;\r\n }\r\n\r\n .icon-button .button-orange{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #FA9F2A;\r\n width: 40px;\r\n height: 119px;\r\n border-radius: 0 18px 18px 0;\r\n }\r\n\r\n\r\n @media(max-width: 910px) {\r\n .img-button img {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .name-button {\r\n font-size: 0.75rem;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .img-button img {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Container } from './styles';\r\n\r\nconst ButtonsPackage = ({ pack }) => {\r\n const navigation = useHistory();\r\n\r\n const goToPackageCheckout = (pack) => {\r\n navigation.push(\"/packageCheckout\", { pack: pack });\r\n }\r\n\r\n return (\r\n goToPackageCheckout(pack, navigation)}>\r\n \r\n
\r\n
{pack.name} \r\n \r\n );\r\n}\r\n\r\nexport default ButtonsPackage;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 900px !important;\r\n\r\n .button-left {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 42px;\r\n left: -15px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 42px;\r\n right: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right svg {\r\n color: #3e3e3e;\r\n fill: #3e3e3e;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n margin-left: 5px;\r\n max-width: 860px !important;\r\n }\r\n\r\n @media(max-width: 910px) {\r\n margin: 0 10px;\r\n max-width: 700px !important;\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n }\r\n\r\n @media(max-width: 740px) {\r\n max-width: 600px !important;\r\n }\r\n\r\n @media(max-width: 640px) {\r\n max-width: 400px !important;\r\n\r\n .button-left,\r\n .button-right {\r\n top: 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n margin: 0 5px;\r\n max-width: 350px !important;\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .button-left,\r\n .button-right {\r\n display: none;\r\n }\r\n \r\n width: 300px !important;\r\n margin-left: 0px;\r\n }\r\n`;","import styled from 'styled-components';\n\nexport const Container = styled.button`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n border-radius: 20px;\n background: none;\n margin: 0 20px;\n\n .img-button img {\n width: 120px;\n height: 120px;\n border-radius: 15px;\n border: 1px solid #f2f2f2;\n }\n\n .info-button {\n margin: 0 15px;\n color: #14213D;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n .name-button {\n text-transform: uppercase;\n font-weight: 700;\n color: #14213D;\n font-size: 0.813rem;\n margin: 10px 0 5px;\n text-align: center;\n height: 43px;\n font-size: 14px;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 190px;\n }\n\n .more-info {\n display: flex;\n align-items: center;\n margin: 5px 0;\n }\n\n .more-info > span {\n margin-left: 2px;\n }\n\n .icon-button {\n position: absolute;\n right: 0;\n }\n\n .icon-button .button-orange{\n display: flex;\n align-items: center;\n justify-content: center;\n background: #FA9F2A;\n width: 40px;\n height: 119px;\n border-radius: 0 18px 18px 0;\n }\n\n\n @media(max-width: 910px) {\n .img-button img {\n width: 100px;\n height: 100px;\n }\n\n .name-button {\n font-size: 0.75rem;\n }\n }\n\n @media(max-width: 640px) {\n .img-button img {\n width: 80px;\n height: 80px;\n border-radius: 10px;\n }\n }\n\n @media(max-width: 425px) {\n .img-button img {\n width: 80px;\n height: 80px;\n }\n\n }\n\n @media(max-width: 320px) {\n .img-button img {\n width: 70px;\n height: 70px;\n }\n }\n`;","import React from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { Container } from './styles';\n\nconst ButtonsSignaturePlan = ({ signaturePlan }) => {\n const navigation = useHistory();\n\n const goToSignatureCheckout = (signaturePlan) => {\n navigation.push(\"/signatureCheckout\", { signaturePlan: signaturePlan });\n }\n\n return (\n goToSignatureCheckout(signaturePlan, navigation)}>\n \n
\n
{signaturePlan.name} \n \n );\n}\n\nexport default ButtonsSignaturePlan;","import React, { useState } from 'react';\r\nimport ItemsCarousel from 'react-items-carousel';\r\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\r\nimport ButtonsOffer from '../../../../../components/ButtonsOffer';\r\nimport ButtonsPackage from '../../../../../components/ButtonsPackage';\r\nimport { Container } from './styles';\r\nimport { useResponsiveValue } from '@theme-ui/match-media';\r\nimport ButtonsSignaturePlan from '../../../../../components/ButtonsSignaturePlan';\r\n\r\nconst GroupService = (props) => {\r\n const offers = props.offers;\r\n const packs = props.packs;\r\n const subscriptionPlans = props.subscriptionPlans || [];\r\n const sum = props.sum;\r\n const [activeItemIndex, setActiveItemIndex] = useState(0);\r\n const numberOfCards = useResponsiveValue([3, 4, 5]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n }\r\n outsideChevron={false}\r\n infiniteLoop={sum >= numberOfCards ? true : false}\r\n alwaysShowChevrons={sum >= numberOfCards ? true : false}\r\n >\r\n\r\n {offers.map(offer =>\r\n \r\n
\r\n )}\r\n\r\n {packs.map(pack =>\r\n \r\n
\r\n )}\r\n\r\n {subscriptionPlans.map(signaturePlan =>\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n )\r\n}\r\n\r\nexport default GroupService;","import React, { useEffect, useState } from 'react';\r\nimport { getGroupedServiceOffers } from '../../../../api/service_offer';\r\nimport { toast } from 'react-toastify';\r\nimport { Container, LineSeparator } from './styles';\r\nimport GroupService from './GroupService';\r\n\r\nconst GroupedServiceOffers = (props) => {\r\n const [allGroupedServiceOffers, setAllGroupedServiceOffers] = useState([]);\r\n\r\n const searchOffers = async (setAllGroupedServiceOffers, orderType) => {\r\n try {\r\n await getGroupedServiceOffers(setAllGroupedServiceOffers, orderType);\r\n\r\n } catch (error) {\r\n toast.error(error.message)\r\n setAllGroupedServiceOffers([]);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted && props.orderType) {\r\n searchOffers(setAllGroupedServiceOffers, props.orderType);\r\n }\r\n\r\n return () => { isMounted = false; };\r\n }, [props.orderType])\r\n \r\n return (\r\n \r\n {allGroupedServiceOffers.length > 0 &&\r\n allGroupedServiceOffers.map((grouped, grouped_index) => {\r\n const sum = grouped.offers.length + grouped?.servicePackages.length;\r\n\r\n return (\r\n \r\n
{grouped.group_name} \r\n\r\n \r\n \r\n )\r\n })\r\n }\r\n \r\n\r\n );\r\n}\r\n\r\nexport default GroupedServiceOffers;","import styled from 'styled-components';\r\nimport imgSrc from '../../../../assets/images/bg-last-services.png';\r\n\r\nexport const Container = styled.div`\r\n .container {\r\n width: 1080px;\r\n background-color: #14213D;\r\n margin: 50px 0 0;\r\n background-image: url(${imgSrc});\r\n padding: 40px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .carousel {\r\n width: 900px !important;\r\n }\r\n\r\n .group-text {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .title {\r\n color: #FFF;\r\n font-size: 1.4rem;\r\n margin-bottom: 5px;\r\n font-weight: 700;\r\n }\r\n\r\n .subTitle {\r\n color: #FFF;\r\n font-size: 1.2rem;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .button-left {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n left: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n right: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right svg {\r\n color: #3e3e3e;\r\n fill: #3e3e3e;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n margin-left: 5px;\r\n .container,\r\n .carousel {\r\n max-width: 860px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 910px) {\r\n .container,\r\n .carousel {\r\n margin: 0 10px;\r\n max-width: 700px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n\r\n .container {\r\n padding: 40px 20px 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .title {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .subTitle {\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 740px) {\r\n .container,\r\n .carousel {\r\n max-width: 600px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .container,\r\n .carousel {\r\n max-width: 400px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .container {\r\n width: 100%;\r\n margin: 0;\r\n }\r\n\r\n .carousel {\r\n margin: 0 5px;\r\n max-width: 350px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .button-left,\r\n .button-right {\r\n display: none;\r\n } \r\n }\r\n\r\n @media(max-width: 375px) {\r\n .container,\r\n .carousel {\r\n margin-left: 0px;\r\n max-width: 300px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .container,\r\n .carousel {\r\n max-width: 270px !important;\r\n }\r\n }\r\n`;\r\n\r\nexport const ButtonsContainer = styled.div`\r\n\r\n`;","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAADxCAYAAAAwXvePAAAABHNCSVQICAgIfAhkiAAAEpJJREFUeF7t3et22kgWhuEtQOJoOycn3enpH3Mhc/8X0p2ejpOOjyCQkJhVZEIAG7sEOtQuvfyZtTpF1a5na30jCyGCd//+z0p4IYAAAgh4JRAQ7l71k80ggAACawHCnQMBAQQQ8FCAcPewqWwJAQQQINw5BhBAAAEPBQh3D5vKlhBAAAHCnWMAAQQQ8FCAcPewqWwJAQQQINw5BhBAAAEPBQh3D5vKlhBAAAHCnWMAAQQQ8FCAcPewqWwJAQQQINw5BhBAAAEPBQh3D5vKlhBAAAHCnWMAAQQQ8FCAcPewqWwJAQQQINw5BhBAAAEPBQh3D5vKlhBAAAHCnWMAAQQQ8FCAcPewqWwJAQQQINw5BhBAAAEPBQh3D5vKlhBAAAHCnWMAAQQQ8FCAcPewqWwJAQQQINw5BhBAAAEPBQh3D5vKlhBAoBqBMJpIODyTVZ5JEt9KtlxUs1AJsxLuJSAyBQII+C8QBB0ZXXyUIAjWm12tVjJ/+OJswBPu/h+T7BABBEoQ2A931wOecC+h6UyBAALtEIgGFxINzx9tNr6/cu4MnnBvxzHJLhFAoCSB/ui1hP3JzmyrVS7x/RfJs6SkVU6fhnA/3ZAZEECgZQIaAp5wb9lByXYRQKAcAdcDnnAvp8/MggACLRRwOeAJ9xYekGwZAQTKE3A14An38nrMTAgg0FIBFwOecG/pwci2EUCgXAHXAp5wL7e/zIYAAi0WiIavJBqc7Qg0dZsk4d7iA5GtI4BA+QKuBDzhXn5vmREBBFou4ELAE+4tPwjZPgIIVCPQdMAT7tX0lVkRQAABaTLgCXcOQAQQQKBCgcMBfyV5lla2MuFeGS0TI4AAAt8Fmgh4wp2jDwEEEKhBIBpeSDTYfVzw99skqzmDJ9xraCpLIIAAAt/P4OsLeMKdYw4BBBCoUaCugCfca2wqSyGAAAJ1ncET7hxrCCCAQAMCVZ/BE+4NNJUlEUAAgWfP4O+uJM9Pu02ScOcYQwABBBoUePIMPs++/ybrCQFPuDfYVJZGAAEEDp7BnxjwhDvHFgIIIOCAQNg/k/7o1U4lqxMCnnB3oKmUgIBrAt1e37WSWlFPLxxJOJjsBXwu84cvkmVJIQPCvRAXgxHwS6DT6Uo3HEm3F0m3N5Cg0/Frgx7tZnrzScw3Wm1fhLutFOMQ8ESg040kjEbSC4cSdHue7Mr/baTzB1nE19YbJdytqRiIgG4Bc6nFPNukGw50b6Sl1c/MM2iWC+vdE+7WVAxEQKeAufQSDS6k1x9bbyBL59ZjGVieQBB0pNMNH02YLsxZ+02hhQj3QlwMRkCXQH/4SsK9H2ze38EyiSXL5pIlseR5pmuDHlVr/rIaTC4lCILNrlarlSxm32SZzArvlHAvTMYbEHBfwATEcPJeOr3oyWLNmbk5G8yWczEBwqtZgcPBfi3LZHpUcYT7UWy8CQF3BcwHpsPx2yc/LDWhnszvJCtw7dbdnfpRWRXBbmQIdz+OD3aBwFrA3AHTH715dEtjni0lnd9JeuRZILzVCFQV7IR7Nf1iVgQaEQijsfTHbx6tba6pL2b/cPmlka4cXrTKYCfcHWs25SBwrIC5FDM6//Do7eZsfRHfHjst76tIoOpgJ9wrahzTIlCngLnVcXj2y6NLMYvpNy7D1NkIy7XqCHbC3bIZDEPAVYFDd8XMH77KMo1dLbu1ddUV7IR7aw8xNu6LwGD8VnrRaGc75ivq5qvqvNwSeCrYTYXzqbmP/bjbHZ/bIXfLuNV/qkHAWuCpD1DTxXT9pRdebgmYh7INJu92vqBUZbBz5u5W/6kGgUIC4/Nfd+5lz5eJzO4/F5qDwdULNBHshHv1fWUFBCoRMA8AMz/Ptv2a3f7F4wMq0T5+0qaCnXA/vme8E4HGBMyHqKPzjzt3xyTx7fqbp7zcEWgy2Al3d44DKkHAWmD/rN38gIM5a+cZMdaElQ9sOtgJ98pbzAIIlC8wvviNs/byWUub0YVgJ9xLaycTIVCPwP43UTlrr8fddhVXgp1wt+0Y4xBwRKA/vJBwcL6phlsfHWmMiHTDoZjvHWw/j91UV9V97C/tnPvcXxLi3xFwSGB09mHnGe08YsCN5hwK9sXsev3c/CZehHsT6qyJwBEC5hkyo4uPO++c3vzJB6lHWJb5FheDncsyZXaYuRCoWGD/G6nmhzfihy8Vr8r0zwm4GuyEO8ctAooE9m+B5N72ZpvncrAT7s0eG6yOQCEBwr0QV6WDXQ92wr3S9jM5AuUKDCeX0g0Hm0nj+yt+C7VcYqvZ1j9l+MRdMU1+ePpU4XygatVOBiHQvADh3nwPepG53fHdo0IWsxtJF/fNF7hVAeHuVDsoBoHDAvu3Qc7uPkueJZDVJhDI+OJXCTrdnRVdO2P/URzhXtuBwUIInCYwef37zgQP13+cNiHvLiTQ6fZkdP7rznuS+EaSuVtn7IR7obYyGIHmBQj35nuw/ctXi/hGUkeD3Uhx5t788UIFCFgJEO5WTJUP6kVjWWWpZI5fEiPcKz8UWACBcgQI93Ic2zIL4d6WTrNP9QKEu/oW1roBwr1WbhZD4HgBwv14uza+k3BvY9fZs0oBwl1l2xormnBvjJ6FESgmQLgX82r7aMK97UcA+1cjQLiraZUThRLuTrSBIhB4WYBwf9mIET8FCHeOBgSUCBDuShrlSJmEuyONoAwEXhIg3F8S4t+3BQh3jgcElAgQ7koa5UiZhLsjjaAMBF4SINxfEuLfOXPnGEBAocD2I39Xq1ymN58U7oKS6xLgzL0uadZB4EQB8wtA0fCVBJ3O+mmEyfzuxBl5u88ChLvP3WVvCCDQWgHCvbWtZ+MIIOCzAOHuc3fZGwIItFaAcG9t69k4Agj4LEC4+9xd9oYAAq0VINxb23o2jgACPgsQ7j53l70hgEBrBQj31raejSOAgM8ChLvP3WVvCCDQWgHCvbWtZ+MIIOCzAOHuc3fZGwIIqBUIgkCGk/fS6UWyTGYyn/5TaC+EeyEuBiOAAAL1CITRWPrjN5vF5g9fZZnG1osT7tZUDEQAAQTqE4gG5xINLzYLJvFtoYfFEe719YqVEEAAAWsBwt2aioEIIICAHgHCXU+vqBQBBBCwFiDcrakYiAACCOgRINz19IpKEUAAAWsBwt2aioEIIICAHgHCXU+vqBQBBBCwFiDcrakYiAACCOgRINz19IpKEUAAAWsBwt2aioEIIICAHgHCXU+vqBQBXQJBIGE0kmWayCpPddXuQbWEuwdNZAsIOCcQdGR4dindbrQubXZ3JXm2cK5Mnwsi3H3uLntDoAmBoCujs0vpdMPN6ssklvn0axPVtHZNwr21rWfjCFQgEHRkdPZ+J9jNKovZraSLuwoWZMpDAv3RGwn7480/L6bfJE2m1mA8FdKaioEIeC5gLsVM3ku39/OM3ew4XyYyu78SkZXnAG5tbzi5lG442BQV319JtrS/NEa4u9VPqkGgGYEDZ+xZlkp8/1lkRbDX3RjCvW5x1kPANwGC3cmOji9+k6DT2dQ2vflTVgX+T5YzdyfbSlEI1CRwKNiXicQPV5yx19SGp5aZvP595z8/XP9RqBrCvRAXgxHwSOC5YOcae6ON7nQjGZ1/2NSwWuUyvflUqCbCvRAXgxHwRIBgd7qR/eGFhIPzTY3pYiqL2bdCNRPuhbgYjIAHAntfUPqxo8xciuGM3YkGj84+SKf3/Qtk5lX0NkjzHsLdiVZSBAI1CRDsNUEfv0yn05XRxcedCYp+mEq4H+/POxHQJ0Cwq+hZGI2lP36zqTVL5xI/fClcO2fuhcl4AwIKBQ4G+0LiexMc3MfuQleDIJDR2S8SdHs/L8nE15LOHwqXR7gXJuMNCCgTINjVNGz/eTLmLpn47m/J86zwHgj3wmS8AQFFAgS7mmatz9rPP+58cSmJbyWZH/dMH8JdTespFIGCAgR7QbBmh+/f/mjO2me3fxX6Vur2Dgj3ZvvJ6ghUJBDI8Pz95nnsPxYxD57iGntF5CdM2wuHMpi825lhceS19h+TEO4nNIS3IuCmQCDDM/N0x5/3SZs6CXY3u2W+jWoeErb9HJk8W8rs7r8nFUy4n8THmxFwTYBgd60jz9VjrrObxyxvf2HJjC/6eN+n1iDcNR0J1IrAswIEu7YDZP+xvqb+Y76NSrhr6zz1ImAtQLBbUzkw8NAZ+zHPkDm0Hc7cHWg0JSBwmgDBfppfve9eX2Mfv935otL6M5Ejv4lKuNfbP1ZDoCYBgr0m6FKWMXfFmN9G3f7w1ExsfsrQPD+/yI9xvFQQZ+4vCfHvCDgrQLA725q9wsxlmP7wtfS2fvD6xxBzxj6ffi012M3chLuWo4M6EdgRMMF+Kd1ef+e/fv/T/ivPinHkaDGhbp7LHkaTR2frpsQyr7Hvb5lwd+QgoAwE7AWeC/biTw+0X5eRtgLmunovGh4MdTNPWXfFHKqJcLftFuMQcEKAYHeiDU8UYa6nm7+kzP9uP9Vxf6j5gpL5VSXzpbIqX4R7lbrMjUCJAp1OTwaTS+lsPQ7WTL/Kc8mzpMSVmMpWwPTkuSDfnseEejq/kzSZ2k5/0jjC/SQ+3oxAfQLmB5PNn/u8dAmYB4Cl83tJF/elf2j6nAThrus4odoWC0xe/UskCFosoGvryySWLI1lmc5qDfUfSoS7ruOFalssYC7J9MJBiwXc3rq5Vz3L0v8Hetx4sYR74y2gAATsBQbjN9KLxjtvWOWZLGbXYv7851WvwCpfHvUrSXVUSbjXocwaCJQo0B+9lrA/2Zkxz5frJwmaoOeFgBEg3DkOEFAoQMArbFrNJRPuNYOzHAJlCRDwZUn6OQ/h7mdf2VVLBJ4O+Ezi+89comnJMXBom4R7yw8Atq9fgIDX38MqdkC4V6HKnAjULEDA1wyuYDnCXUGTKBEBGwEC3kapPWMI9/b0mp22QICAb0GTLbdIuFtCMQwBLQKHA97cB7/Usg3qPFGAcD8RkLcj4KKA+Sm3cO9Xf8wXnGbrLzoR8C72rOyaCPeyRZkPAUcECHhHGtFQGYR7Q/Asi0AdAgR8HcpurkG4u9kXqkKgNAECvjRKVRMR7qraRbEIHCdAwB/npvldhLvm7lE7AgUECPgCWB4MJdw9aCJbQMBW4FDAm8cFm8cG8/JHgHD3p5fsBAErgcH4rfSi0c5Y8yPb5mFjBLwVoYpBhLuKNlEkAuUKEPDlero4G+HuYleoCYEaBAj4GpAbXIJwbxCfpRFoWoCAb7oD1a1PuFdny8wIqBAg4FW0qXCRhHthMt6AgH8CBLx/PSXc/espO0LgKIGDAf9wJXmWHjUnb2pOgHBvzp6VEXBO4MmAX+Uyu/ub32R1rlvPF0S4K2sY5SJQtcBg/E560XBnmWTxIMnsuuqlmb9EAcK9REymQsAXgf2AJ9z1dZZw19czKkagFoH++LWE0WT9rVXzeALzYx+89AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9AgQ7np6RaUIIICAtQDhbk3FQAQQQECPAOGup1dUigACCFgLEO7WVAxEAAEE9Aj8D4piCbwQGimMAAAAAElFTkSuQmCC\"","import React, { useEffect, useState } from 'react';\r\nimport { getLastServiceOffers } from '../../../../api/service_offer';\r\nimport ButtonsOffer from '../../../../components/ButtonsOffer';\r\nimport ItemsCarousel from 'react-items-carousel';\r\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\r\nimport { Container, ButtonsContainer } from './styles';\r\nimport { toast } from 'react-toastify';\r\nimport { useResponsiveValue } from '@theme-ui/match-media';\r\n\r\nconst LastServicesOffers = (props) => {\r\n const [allLastServiceOffers, setLastServiceOffers] = useState([]);\r\n const [activeItemIndex, setActiveItemIndex] = useState(0);\r\n const numberOfCards = useResponsiveValue([3, 4, 5]);\r\n\r\n const searchOffers = async (setLastServiceOffers, orderType) => {\r\n try {\r\n await getLastServiceOffers(setLastServiceOffers, orderType);\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n setLastServiceOffers([]);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted && props.orderType) {\r\n searchOffers(setLastServiceOffers, props.orderType);\r\n }\r\n\r\n return () => { isMounted = false; };\r\n }, [props.orderType])\r\n\r\n return (\r\n \r\n {allLastServiceOffers.length > 0 &&\r\n \r\n
\r\n ÚLTIMOS SERVIÇOS AGENDADOS? \r\n bora repetir? \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n }\r\n outsideChevron={false}\r\n infiniteLoop={allLastServiceOffers.length > numberOfCards ? true : false}\r\n alwaysShowChevrons={allLastServiceOffers.lenght > numberOfCards ? true : false}\r\n >\r\n\r\n {allLastServiceOffers.map((offer, offerIndex) => {\r\n return (\r\n \r\n \r\n )\r\n })}\r\n\r\n \r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default LastServicesOffers;","import { header, fetchWithTimeout } from './helper/request';\r\nimport {\r\n API_BASE,\r\n API_VERSION,\r\n MARKETING_BANNERS_HEADER,\r\n MARKETING_BANNERS_COMPANY_OFFER,\r\n MARKETING_HR_RECOMMENDATION\r\n} from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\n\r\n/*get*/\r\n\r\nconst getHomeSliders = async (callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${MARKETING_BANNERS_HEADER}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error(\"erro na chamada getHomeSliders: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de banners');\r\n }\r\n}\r\n\r\nconst getBannerCompanyOffer = async () => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${MARKETING_BANNERS_COMPANY_OFFER}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n\r\n } else {\r\n throw new Error(\"erro na chamada getBannerCompanyOffer: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta do banner da empresa');\r\n }\r\n}\r\n\r\n/*Post*/\r\nconst makeHrRecommendation = async (name, email, companyName) => {\r\n let validationError = false;\r\n let data = {\r\n responsible_name: name,\r\n responsible_email: email,\r\n company_name: companyName,\r\n }\r\n\r\n try {\r\n const { post_bearer } = header(data);\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${MARKETING_HR_RECOMMENDATION}`, post_bearer);\r\n\r\n if (response.ok) {\r\n return response.status;\r\n\r\n } else if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n throw new Error('erro na chamada makeHrRecommendation: ' + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao enviar a recomendação');\r\n }\r\n }\r\n}\r\n\r\nexport {\r\n getHomeSliders,\r\n getBannerCompanyOffer,\r\n makeHrRecommendation\r\n}","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 70%;\r\n \r\n .container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n };\r\n\r\n .title {\r\n text-align: center;\r\n color: #14213D;\r\n font-size: 1rem;\r\n margin-bottom: 5px;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n };\r\n\r\n .in-company-banner-button {\r\n width: 70%;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #FA9F2A;\r\n margin: 10px 0;\r\n height: 40px;\r\n border-radius: 23px;\r\n };\r\n\r\n .in-company-banner-button-text {\r\n color: #fff;\r\n font-size: 1rem;\r\n };\r\n\r\n .description {\r\n text-align: center;\r\n color: #14213D;\r\n font-size: 0.9rem;\r\n margin-bottom: 15px;\r\n };\r\n\r\n .banner-image {\r\n width: 500px;\r\n };\r\n\r\n @media(max-width: 740px) {\r\n .banner-image {\r\n width: 450px;\r\n };\r\n };\r\n\r\n @media(max-width: 640px) {\r\n .banner-image {\r\n width: 300px;\r\n };\r\n };\r\n\r\n @media(max-width: 430px) {\r\n .in-company-banner-button-text {\r\n color: #fff;\r\n font-size: 0.9rem;\r\n };\r\n };\r\n\r\n @media(max-width: 390px) {\r\n .banner-image {\r\n width: 100%;\r\n };\r\n };\r\n\r\n @media(max-width: 360px) {\r\n .in-company-banner-button {\r\n width: 100%;\r\n };\r\n }\r\n`;","import React, { useEffect, useState } from 'react';\r\nimport { getBannerCompanyOffer } from '../../../../api/marketing';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { getUser } from '../../../../utils/auth';\r\nimport { Container } from './styles';\r\n\r\nconst InCompanyBanner = () => {\r\n const navigation = useHistory();\r\n const [company, setCompany] = useState(getUser()?.company);\r\n const [bannerCompanyOffer, setBannerCompanyOffer] = useState();\r\n\r\n const executeSearchs = async () => {\r\n try {\r\n await getBannerCompanyOffer().then(val => setBannerCompanyOffer(val));\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n executeSearchs();\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, []);\r\n\r\n return (\r\n \r\n {(bannerCompanyOffer && !company) &&\r\n \r\n
\r\n
{bannerCompanyOffer.title} \r\n
navigation.push(\"/linkCompany\", { linkSomeCompany: true })}>\r\n conecte-se com sua empresa \r\n \r\n
{bannerCompanyOffer.description} \r\n
\r\n
\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default InCompanyBanner;","import { header, fetchWithTimeout } from './helper/request';\r\nimport {\r\n API_BASE,\r\n API_VERSION,\r\n PARTNERS_ACTIVE,\r\n PARTNERS\r\n} from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\n\r\n/*get*/\r\n\r\nconst getPartnersActive = async (callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${PARTNERS_ACTIVE}`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error(\"erro na chamada getPartnersActive: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de parceiros');\r\n }\r\n}\r\n\r\nconst getProductsPartners = async (id, callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${PARTNERS}/${id}/products`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error(\"erro na chamada getProductsPartners: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de produtos do parceiro');\r\n }\r\n}\r\n\r\nconst getPartnerAddressValidation = async (idPartner, idAddress) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${PARTNERS}/${idPartner}/addresses/${idAddress}/available`, get_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n return responseJson;\r\n } else {\r\n throw new Error(\"erro na chamada getPartnerAddressValidation: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de validação de endereço');\r\n }\r\n}\r\n\r\n/*post*/\r\n\r\nconst makeCreatePartnerOrder = async (idPartner, idAddress, payMethod, idCard, products) => {\r\n let validationError = false;\r\n const data = {\r\n address_id: idAddress,\r\n payment_method: payMethod,\r\n card_id: idCard,\r\n products: products\r\n }\r\n\r\n try {\r\n const { post_bearer } = header(data);\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${PARTNERS}/${idPartner}/orders`, post_bearer);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n return responseJson;\r\n\r\n } else if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n throw new Error(\"erro na chamada makeCreatePartnerOrder: \" + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao criar pedido ');\r\n }\r\n }\r\n}\r\n\r\nexport {\r\n getPartnersActive,\r\n getProductsPartners,\r\n getPartnerAddressValidation,\r\n makeCreatePartnerOrder\r\n}","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n margin-top: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .carousel {\r\n width: 900px !important;\r\n }\r\n\r\n .title {\r\n color: #14213D;\r\n font-size: 1.4rem;\r\n margin-bottom: 10px;\r\n margin-top: 30px;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n\r\n .button-left {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n left: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 50px;\r\n right: -10px;\r\n width: 39px;\r\n height: 39px;\r\n border-radius: 100%;\r\n color: #14213D;\r\n border: 1px solid #c4c4c4;\r\n background: white;\r\n }\r\n\r\n .button-right svg {\r\n color: #3e3e3e;\r\n fill: #3e3e3e;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n margin-left: 5px;\r\n .carousel {\r\n max-width: 860px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 910px) {\r\n .carousel {\r\n margin: 0 10px;\r\n max-width: 700px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 35px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .title {\r\n font-size: 1.2rem;\r\n }\r\n }\r\n\r\n @media(max-width: 740px) {\r\n .carousel {\r\n max-width: 600px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .carousel {\r\n max-width: 400px !important;\r\n }\r\n\r\n .button-left,\r\n .button-right {\r\n top: 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .carousel {\r\n margin: 0 5px;\r\n max-width: 350px !important;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .button-left,\r\n .button-right {\r\n display: none;\r\n } \r\n \r\n .carousel {\r\n margin-left: 0px;\r\n width: 100%;\r\n }\r\n }\r\n`;\r\n\r\nexport const ButtonsContainer = styled.div`\r\n\r\n`;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.button`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n border-radius: 20px;\r\n background: none;\r\n margin: 0 20px;\r\n\r\n .img-button img {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 15px;\r\n border: 1px solid #f2f2f2;\r\n }\r\n\r\n .info-button {\r\n margin: 0 15px;\r\n color: #14213D;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .name-button {\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n color: #14213D;\r\n font-size: 0.813rem;\r\n margin: 10px 0 5px;\r\n text-align: center;\r\n height: 43px;\r\n font-size: 14px;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n max-width: 190px;\r\n }\r\n\r\n .more-info {\r\n display: flex;\r\n align-items: center;\r\n margin: 5px 0;\r\n }\r\n\r\n .more-info > span {\r\n margin-left: 2px;\r\n }\r\n\r\n .icon-button {\r\n position: absolute;\r\n right: 0;\r\n }\r\n\r\n .icon-button .button-orange{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #FA9F2A;\r\n width: 40px;\r\n height: 119px;\r\n border-radius: 0 18px 18px 0;\r\n }\r\n\r\n\r\n @media(max-width: 910px) {\r\n .img-button img {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .name-button {\r\n font-size: 0.75rem;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .img-button img {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { getPartnerAddressValidation } from '../../api/partners';\r\nimport { Container } from './styles';\r\nimport ModalAddress from '../Modals/ModalAddress';\r\n\r\nconst ButtonsPartner = (props) => {\r\n const navigation = useHistory();\r\n const partner = props.partner;\r\n const [selectAddress, setSelectAddress] = useState(false);\r\n const [selectAddressMessage, setSelectAddressMessage] = useState('');\r\n\r\n const navigatePartner = (address) => {\r\n localStorage.removeItem('products');\r\n navigation.push(\"/partner\", { partner: partner, address: address });\r\n }\r\n\r\n const afterSelectAddress = async (address) => {\r\n try {\r\n let available = await getPartnerAddressValidation(partner.id, address.id);\r\n\r\n if (available.available) {\r\n setSelectAddress(false);\r\n\r\n navigatePartner(address);\r\n setSelectAddressMessage('');\r\n } else {\r\n setSelectAddressMessage('Parceiro indisponível no endereço selecionado');\r\n }\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n return (\r\n \r\n
afterSelectAddress(address)}\r\n warningMessage={selectAddressMessage}\r\n checkResidentialAvailability={true}\r\n message={`Selecione o endereço onde deseja receber os produtos do nosso parceiro `}\r\n partner={partner.name}\r\n />\r\n\r\n { setSelectAddress(true); setSelectAddressMessage('') }}>\r\n \r\n
\r\n
{partner.name} \r\n \r\n \r\n {allPartners.length > 0 &&\r\n \r\n
Parceiros e Produtos
\r\n
\r\n \r\n \r\n \r\n }\r\n outsideChevron={false}\r\n infiniteLoop={allPartners.length > numberOfCards ? true : false}\r\n alwaysShowChevrons={allPartners.lenght > numberOfCards ? true : false}\r\n >\r\n\r\n {allPartners.map((partner, partnerIndex) => {\r\n return (\r\n \r\n \r\n )\r\n })}\r\n\r\n \r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default Partners;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n position: fixed;\r\n z-index: 10;\r\n width: 100%;\r\n justify-content: center;\r\n margin-top: 30px;\r\n bottom: 30px;\r\n\r\n .text-view {\r\n display: flex;\r\n border: 1px solid #FA9F2A;\r\n align-items: center;\r\n background-color: #FFFFFF;\r\n width: 600px;\r\n min-height: 80px;\r\n padding: 15px;\r\n border-radius: 30px 0 0 30px;\r\n justify-content: center;\r\n }\r\n\r\n .close-button {\r\n width: 40px;\r\n height: 40px;\r\n border: 1px solid #B7B7B7;\r\n border-radius: 100%;\r\n font-size: 1.2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-left: -55px;\r\n background-color: #FFFFFF;\r\n color: #B7B7B7;\r\n }\r\n\r\n .close-button span {\r\n margin-top: -3px;\r\n }\r\n\r\n .text {\r\n margin-left: 20px;\r\n font-size: 1rem;\r\n color: #14213D;\r\n }\r\n\r\n .text span {\r\n font-weight: 700;\r\n }\r\n\r\n .button-go-to-service {\r\n width: 40px;\r\n border: 1px solid #FA9F2A;\r\n background-color: #FA9F2A;\r\n border-radius: 0 30px 30px 0;\r\n justify-content: center;\r\n margin-left: -2px;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n bottom: 80px;\r\n }\r\n\r\n\r\n @media(max-width: 760px) {\r\n .text-view {\r\n width: 450px;\r\n }\r\n\r\n .close-button {\r\n margin-left: 0;\r\n }\r\n\r\n .text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 620px) {\r\n .text-view {\r\n width: 350px;\r\n }\r\n\r\n .close-button {\r\n width: 40px;\r\n height: 30px;\r\n }\r\n\r\n .text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .text-view {\r\n width: 280px;\r\n min-height: 40px;\r\n }\r\n\r\n .close-button {\r\n width: 50px;\r\n height: 30px;\r\n }\r\n\r\n .text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;","import React, { useEffect, useState } from 'react';\r\nimport { FaArrowRight } from 'react-icons/fa';\r\nimport Moment from 'moment-timezone';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Container } from './styles';\r\n\r\nconst NextOpenOrder = (props) => {\r\n const order = props.order;\r\n const render = props.render;\r\n const navigation = useHistory();\r\n const [modalVisible, setModalVisible] = useState();\r\n const [locale, setLocale] = useState();\r\n const [day, setDay] = useState();\r\n\r\n const serviceOrderHistory = async () => {\r\n localStorage.setItem(\"nextOpenOrderId\" + order.id, order.id);\r\n navigation.push(\"serviceOrderHistory\", { selectedOrder: order });\r\n }\r\n\r\n const closeModal = async () => {\r\n localStorage.setItem(\"nextOpenOrderId\" + order.id, order.id);\r\n setModalVisible(false);\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted && order?.id) {\r\n setModalVisible(render);\r\n\r\n if (localStorage.getItem(\"nextOpenOrderId\" + order.id)) {\r\n setModalVisible(false);\r\n }\r\n\r\n if ('global' === order.order_type) {\r\n setLocale('on-line');\r\n } else if ('residential' === order.order_type) {\r\n setLocale('em casa');\r\n } else {\r\n setLocale('na empresa');\r\n }\r\n\r\n let today = new Date();\r\n let tomorrow = new Date();\r\n tomorrow.setDate(tomorrow.getDate() + 1);\r\n let scheduleDate = new Date(order.scheduled_date);\r\n\r\n if (scheduleDate.getDate() === today.getDate() &&\r\n scheduleDate.getMonth() === today.getMonth() &&\r\n scheduleDate.getFullYear() === today.getFullYear()) {\r\n setDay(' Hoje');\r\n } else if (scheduleDate.getDate() === tomorrow.getDate() &&\r\n scheduleDate.getMonth() === tomorrow.getMonth() &&\r\n scheduleDate.getFullYear() === tomorrow.getFullYear()) {\r\n setDay(' Amanhã');\r\n } else {\r\n setDay((' dia ' + Moment(order.scheduled_date).format('DD/MM/yyyy')));\r\n }\r\n }\r\n\r\n return () => { isMounted = false; };\r\n }, [order]);\r\n\r\n if (modalVisible) {\r\n return (\r\n \r\n \r\n \r\n x \r\n \r\n\r\n Você tem um agendamento {locale} de {order.service.name} {day} às {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format('HH:mm')} \r\n
\r\n\r\n \r\n \r\n \r\n );\r\n } else {\r\n return (\r\n <>\r\n );\r\n }\r\n}\r\n\r\nexport default NextOpenOrder;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n max-width: 1280px !important;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 2rem 0 4rem 0;\r\n\r\n .container-choose {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .choose-location-text {\r\n color: #14213D;\r\n font-size: 1.4rem;\r\n margin: 0 10px;\r\n }\r\n\r\n .choose-location-view {\r\n margin: 10px 0;\r\n }\r\n\r\n .react-switch-selector-wrapper {\r\n border: 1px solid #FA9F2A;\r\n }\r\n\r\n .react-switch-selector-wrapper::before{\r\n border: none;\r\n margin: 0 2px;\r\n }\r\n\r\n .react-switch-selector-option label {\r\n font-size: 1rem;\r\n padding: 10px 30px;\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .choose-location-text {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .react-switch-selector-option label {\r\n padding: 8px 20px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .choose-location-text {\r\n font-size: 1rem;\r\n }\r\n\r\n .react-switch-selector-option label {\r\n padding: 8px 15px;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;","import React, { useEffect, useState } from 'react';\r\nimport { getUser } from '../../../../utils/auth';\r\nimport SwitchSelector from \"react-switch-selector\";\r\nimport { Container } from \"./styles\";\r\nimport { t } from 'i18next';\r\n\r\nconst LocationSelector = ({ setLocation }) => {\r\n const [locations, setLocations] = useState([]);\r\n const [company, setCompany] = useState();\r\n const [ready, setReady] = useState(false);\r\n const [disable, setDisable] = useState(false);\r\n\r\n useEffect(() => {\r\n setCompany(getUser()?.company);\r\n setReady(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (disable) {\r\n setTimeout(() => setDisable(false), 2000);\r\n }\r\n }, [disable]);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted && ready) {\r\n let tempLocations = [];\r\n\r\n if (company) {\r\n tempLocations.push({\r\n label: t(\"company\"),\r\n value: \"corporate\",\r\n });\r\n }\r\n\r\n if (!company || company.accept_residential) {\r\n tempLocations.push({ \r\n label: t(\"home\"), \r\n value: \"residential\",\r\n });\r\n }\r\n\r\n setLocations(tempLocations);\r\n }\r\n }, [ready, company]);\r\n\r\n return (\r\n \r\n {ready && locations && locations.length > 0 &&\r\n \r\n
{t(\"viewServicesFor\")} \r\n
\r\n {\r\n setDisable(true); setLocation(value);\r\n }}\r\n disabled={disable}\r\n fontColor=\"#FA9F2A\"\r\n selectedBackgroundColor=\"#FA9F2A\"\r\n selectedFontColor=\"#FFF\"\r\n backgroundColor=\"#FFF\"\r\n buttonColor=\"#FA9F2A\"\r\n borderColor=\"#FA9F2A\"\r\n options={locations}\r\n />\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default LocationSelector;\r\n","import { header, fetchWithTimeout } from \"./helper/request\";\r\nimport {\r\n ACCEPT,\r\n ACTIVE,\r\n API_BASE,\r\n API_VERSION,\r\n CUSTOMERS,\r\n CUSTOMER_MESSAGES_NEXT,\r\n MESSAGES,\r\n} from \"./helper/api_urls\";\r\nimport { getSectionsCatchErrors } from \"./getSectionsCatchErrors\";\r\nimport { validatePutResponse } from \"./helper/validatePutResponse\";\r\n\r\nconst getMessagesNext = async (callback) => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_BASE}${API_VERSION}${CUSTOMER_MESSAGES_NEXT}`,\r\n get_bearer\r\n );\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else if (response.status === 404) {\r\n callback(null);\r\n } else {\r\n throw new Error(\"erro na chamada getMessagesNext: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(\r\n error,\r\n \"Erro ao realizar consulta de proximas mensagens\"\r\n );\r\n }\r\n};\r\n\r\nconst getMessagesViewed = async () => {\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_BASE}${API_VERSION}${CUSTOMERS}${MESSAGES}${ACTIVE}`,\r\n get_bearer\r\n );\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n } else if (response.status === 404) {\r\n return null;\r\n } else {\r\n throw new Error(\"erro na chamada getMessagesViewed: \" + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(\r\n error,\r\n \"Erro ao realizar consulta de mensagens lidas\"\r\n );\r\n }\r\n};\r\n\r\nconst putAcceptMessage = async (messageId) => {\r\n try {\r\n const putUrl = `${API_BASE}${API_VERSION}${CUSTOMERS}${MESSAGES}/${messageId}${ACCEPT}`;\r\n\r\n return await validatePutResponse(\r\n putUrl,\r\n \"Erro ao realizar aceite da mensagem\"\r\n );\r\n } catch (error) {\r\n throw error;\r\n }\r\n}\r\n\r\nexport { getMessagesNext, getMessagesViewed, putAcceptMessage };\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n background-color: #FFF;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n max-width: 1080px !important;\r\n margin: auto;\r\n padding-bottom: 50px;\r\n box-sizing: border-box;\r\n padding-top: 10px;\r\n\r\n .body-home {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n margin-bottom: 50px;\r\n }\r\n\r\n @media(max-width: 620px) {\r\n margin-bottom: 20px;\r\n }\r\n`;\r\n\r\nexport const LineSeparator = styled.div`\r\n width: 100%;\r\n max-width: 900px !important;\r\n border: 0.1px solid #F2F2F2;\r\n margin: 50px 5% 50px;\r\n`;\r\n\r\nexport const ContainerMain = styled.div`\r\n \r\n`;\r\n\r\nexport const Divider = styled.div`\r\n margin-top: 4rem;\r\n`","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .carousel {\r\n max-width: 600px;\r\n }\r\n\r\n .button-banner {\r\n border-radius: 10px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 250px;\r\n border-radius: 10px;\r\n }\r\n\r\n .carousel .control-dots .dot {\r\n background: #000;\r\n box-shadow: none;\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .carousel {\r\n max-width: 550px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 250px;\r\n }\r\n }\r\n\r\n @media(max-width: 610px) {\r\n .carousel {\r\n max-width: 500px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 200px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .carousel {\r\n max-width: 450px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 200px;\r\n }\r\n }\r\n\r\n @media(max-width: 470px) {\r\n .carousel {\r\n max-width: 400px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 180px;\r\n }\r\n\r\n .carousel .control-dots .dot {\r\n width: 6px;\r\n height: 6px;\r\n margin: 0 6px -5px;\r\n }\r\n }\r\n\r\n @media(max-width: 410px) {\r\n .carousel {\r\n max-width: 300px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 140px;\r\n }\r\n\r\n .carousel .control-dots .dot {\r\n width: 4px;\r\n height: 4px;\r\n margin: 0 4px -5px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .carousel {\r\n max-width: 280px;\r\n }\r\n\r\n .button-banner > img {\r\n height: 130px;\r\n }\r\n\r\n .carousel .control-dots .dot {\r\n width: 4px;\r\n height: 4px;\r\n margin: 0 4px -5px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalBannerHome = ({ showModalBanner, setShowModalBanner, body }) => {\r\n return (\r\n \r\n
setShowModalBanner(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content banner-home\"\r\n ariaHideApp={false}\r\n >\r\n \r\n\r\n setShowModalBanner(false)}>\r\n fechar \r\n \r\n \r\n \r\n setShowModal(val)} \r\n />\r\n\r\n {allBannersSlider.length > 0 &&\r\n \r\n {allBannersSlider.map((banner, bannerIndex) => {\r\n return (\r\n showModalBanner(banner)} className=\"button-banner\">\r\n \r\n )\r\n })}\r\n \r\n }\r\n \r\n );\r\n}\r\n\r\nexport default Banners;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 1280px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .banner-skt {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .banner-skeleton {\r\n width: 600px;\r\n height: 220px;\r\n border-radius: 9px;\r\n }\r\n\r\n .switch-skeleton {\r\n width: 1080px;\r\n height: 280px;\r\n margin: 20px 0 0;\r\n }\r\n\r\n .title-skeleton {\r\n width: 320px;\r\n height: 30px;\r\n margin: 30px 0 10px;\r\n border-radius: 20px;\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .banner-skeleton {\r\n width: 400px;\r\n height: 200px;\r\n }\r\n\r\n .switch-skeleton {\r\n height: 200px;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .title-skeleton {\r\n width: 280px;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .banner-skeleton {\r\n width: 300px;\r\n height: 150px;\r\n }\r\n\r\n .title-skeleton {\r\n width: 200px;\r\n }\r\n\r\n .switch-skeleton {\r\n height: 150px;\r\n }\r\n }\r\n\r\n @media(max-width: 360px) {\r\n .banner-skeleton {\r\n width: 300px;\r\n height: 150px;\r\n }\r\n\r\n .title-skeleton {\r\n width: 200px;\r\n }\r\n\r\n .switch-skeleton {\r\n width: 300px;\r\n }\r\n }\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n .today-skeleton {\r\n width: 420px;\r\n height: 130px;\r\n border-radius: 20px;\r\n margin: 0 20px;\r\n }\r\n\r\n .group-skeleton {\r\n width: 120px;\r\n height: 120px;\r\n border-radius: 20px;\r\n margin: 0 20px;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 300px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 280px;\r\n height: 120px;\r\n margin: 0 10px;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .today-skeleton {\r\n width: 400px;\r\n }\r\n\r\n .today-skeleton.second {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .today-skeleton {\r\n width: 300px;\r\n }\r\n\r\n .group-skeleton {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .group-skeleton {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 325px) {\r\n .group-skeleton {\r\n margin: 0 5px;\r\n }\r\n }\r\n`;\r\n\r\nexport const LineSeparator = styled.div`\r\n width: 100%;\r\n max-width: 1150px !important;\r\n border: 0.1px solid #F2F2F2;\r\n margin: 20px 5% 40px;\r\n\r\n @media(max-width: 1200px) {\r\n max-width: 1000px !important;\r\n }\r\n\r\n @media(max-width: 1060px) {\r\n max-width: 900px !important;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n display: none;\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons, LineSeparator } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonLoaderHome = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonLoaderHome;","import React, { useState } from 'react';\r\nimport Modal from 'react-modal';\r\nimport { putAcceptMessage } from '../../../api/messages';\r\nimport LoaderSpinner from '../../../components/LoaderSpinner/index';\r\nimport './styles.css';\r\n\r\nconst ModalNextMessages = ({ showModalNext, setShowModalNext, message }) => {\r\n\r\n const [checked, setChecked] = useState(false);\r\n const [loading, setLoading] = useState(false);\r\n\r\n const verifyAcceptance = () => {\r\n if (message && !message.require_acceptance) {\r\n return true\r\n } else {\r\n return checked\r\n }\r\n }\r\n\r\n const doAcceptMessage = async () => {\r\n if (message && message.require_acceptance) {\r\n setLoading(true)\r\n await putAcceptMessage(message.id)\r\n setLoading(false)\r\n }\r\n setShowModalNext(false)\r\n }\r\n\r\n return (\r\n \r\n
\r\n
{ checked && setShowModalNext(false) }}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content next-messages\"\r\n ariaHideApp={false}\r\n >\r\n \r\n
\r\n {message?.require_acceptance &&\r\n
\r\n \r\n { setChecked(!checked) }}\r\n />\r\n { setChecked(!checked) }}> \r\n Estou de acordo\r\n \r\n
\r\n }\r\n
{ verifyAcceptance() && doAcceptMessage() }}>\r\n fechar \r\n \r\n \r\n \r\n
setShowModalNextOnline(false)}\r\n overlayClassName=\"modal-overlay next-online\"\r\n className=\"modal-content next-online\"\r\n ariaHideApp={false}\r\n >\r\n \r\n Serviço online: \r\n {order.service.name} \r\n
\r\n\r\n \r\n O seu serviço online {order.service.name} irá começar em instantes, deseja acessá-lo agora? \r\n
\r\n\r\n \r\n \r\n ir para serviço \r\n \r\n setShowModalNextOnline(false)}>\r\n cancelar \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n avaliação de serviço \r\n
\r\n\r\n \r\n
\r\n SERVIÇO CONCLUÍDO! \r\n Agora gostaríamos de ouvir sua opinião \r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n R$ \r\n {formatCurrencyBRL(order.total_value).substring(2)} \r\n
\r\n\r\n
\r\n
\r\n
{order.service.name} \r\n\r\n
\r\n {Moment(order.scheduled_date).format('DD/MM/YYYY')} \r\n
\r\n\r\n
\r\n {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format('HH:mm')} \r\n
\r\n\r\n
\r\n {order.address_description} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n Profissional: \r\n {order.professional.name} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n
AVALIE O SERVIÇO \r\n
\r\n
}\r\n fullSymbol={
}\r\n start={0}\r\n stop={5}\r\n fractions={2}\r\n onChange={val => setStars(val)}\r\n placeholderRating={stars}\r\n placeholderSymbol={
}\r\n />\r\n
\r\n
\r\n\r\n
\r\n setText(e.target.value)}\r\n value={text}\r\n placeholder=\"Deixe algum comentário sobre como foi seu atendimento (opcional)\"\r\n />\r\n\r\n { callback(ratingOrder); setShowModalEvaluating(false) }}\r\n disabled={!stars}\r\n className={stars ? \"button-active\" : \"button-disabled\"}\r\n >\r\n enviar avaliação \r\n \r\n
\r\n
\r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay remove\"\r\n className=\"modal-content remove\"\r\n ariaHideApp={false}\r\n >\r\n \r\n confirmar \r\n DELETAR \r\n
\r\n\r\n \r\n Confirmar exclusão do cartão? \r\n
\r\n\r\n \r\n doCloseModal(true)}>\r\n sim, deletar \r\n \r\n doCloseModal(false)}>\r\n não \r\n \r\n
\r\n \r\n \r\n setCancelModalVisible(true)}>\r\n \r\n\r\n setCancelModalVisible(val)}\r\n showModalRemove={cancelModalVisible}\r\n clicked={(option) => {\r\n if (option && type === 'creditCard') {\r\n deleteCreditCards();\r\n } else if (option && type === 'debitCard') {\r\n deleteDebitCards();\r\n }\r\n }}\r\n />\r\n \r\n )\r\n}\r\n\r\nexport default DeleteCardButton;","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\nimport InputMask from 'react-input-mask';\r\nimport { FiCreditCard } from 'react-icons/fi';\r\n\r\nconst ModalAddNewCard = ({ showModalNewCard, setShowModalNewCard, setNumber, setHolderName, setExpirationMonthYear, setSecurityCode, clicked }) => {\r\n const doCloseModal = (option) => {\r\n clicked(option);\r\n setShowModalNewCard(false);\r\n }\r\n\r\n return (\r\n \r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay add-new-card\"\r\n className=\"modal-content add-new-card\"\r\n ariaHideApp={false}\r\n >\r\n doCloseModal(false)}>\r\n x \r\n \r\n\r\n \r\n adicionar novo \r\n cartão de crédito \r\n
\r\n\r\n \r\n
\r\n Número do Cartão \r\n setNumber(e.target.value)}\r\n />\r\n
\r\n\r\n
\r\n Nome (como impresso no cartão) \r\n setHolderName(e.target.value)}\r\n />\r\n
\r\n\r\n
\r\n
\r\n Data de Vencimento \r\n setExpirationMonthYear(e.target.value)}\r\n />\r\n
\r\n\r\n
\r\n CVV \r\n setSecurityCode(e.target.value)}\r\n />\r\n
\r\n
\r\n
\r\n Faremos uma cobrança para validar o cartão no valor de R$1,23, que será estornada em seguida. Fique tranquilo que esse valor não será cobrado.\r\n
\r\n
doCloseModal(true)}>\r\n adicionar cartão \r\n \r\n \r\n \r\n setModalVisible(true)}>\r\n novo cartão \r\n \r\n\r\n setModalVisible(val)}\r\n setSecurityCode={setSecurityCode}\r\n setNumber={setNumber}\r\n setHolderName={setHolderName}\r\n setExpirationMonthYear={setExpirationMonthYear}\r\n clicked={option => option && createCreditCards()}\r\n />\r\n\r\n \r\n )\r\n}\r\n\r\nexport default NewCardButton;","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalCouponDiscount = ({ showModalDiscount, setShowModalDiscount, allDiscountCoupons, setChecked, checked, discountCouponCode, setDiscountCouponCode, clicked }) => {\r\n const doCloseModal = (option) => {\r\n clicked(option);\r\n setShowModalDiscount(false);\r\n }\r\n\r\n return (\r\n \r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay discount-coupon\"\r\n className=\"modal-content discount-coupon\"\r\n ariaHideApp={false}\r\n >\r\n doCloseModal(false)}>\r\n x \r\n \r\n\r\n \r\n insira seu \r\n cupom de Desconto \r\n
\r\n\r\n \r\n
Você pode selecionar um dos cupons ou digitar no compo abaixo: \r\n\r\n
\r\n\r\n {allDiscountCoupons.map((discountCoupon, discountCouponIndex) => {\r\n return (\r\n
\r\n
\r\n {\r\n setDiscountCouponCode('')\r\n setChecked(discountCoupon)\r\n }}\r\n />\r\n\r\n {\r\n setChecked(discountCoupon)\r\n setDiscountCouponCode('')\r\n }}>\r\n {discountCoupon.code}\r\n \r\n
\r\n\r\n
{discountCoupon.description} \r\n
\r\n )\r\n })}\r\n\r\n
\r\n {\r\n setDiscountCouponCode(e.target.value)\r\n setChecked('')\r\n }}\r\n />\r\n
\r\n
doCloseModal(true)}>\r\n adicionar cupom \r\n \r\n \r\n \r\n {\r\n setDiscountCouponCode('');\r\n setChecked({});\r\n setModalVisible(true);\r\n }}\r\n >\r\n adicionar cupom \r\n \r\n\r\n setModalVisible(val)}\r\n allDiscountCoupons={allDiscountCoupons}\r\n showModalDiscount={modalVisible}\r\n setChecked={val => setChecked(val)}\r\n checked={checked} \r\n setDiscountCouponCode={setDiscountCouponCode}\r\n discountCouponCode={discountCouponCode}\r\n clicked={value => value && addDiscountCoupon()}\r\n />\r\n \r\n )\r\n}\r\n\r\nexport default AddDiscountCouponButton;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n max-width: 600px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n flex-direction: column;\r\n\r\n .payment-card-view {\r\n width: 100%;\r\n margin: 20px 0;\r\n }\r\n\r\n .payment-method-view {\r\n margin: 10px 0;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .payment-method-view input {\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n\r\n border-radius: 50%;\r\n width: 20px;\r\n height: 20px;\r\n\r\n border: 1px solid #FA9F2A;\r\n transition: .2s all linear;\r\n margin-right: 5px;\r\n\r\n position: relative;\r\n cursor: pointer;\r\n }\r\n\r\n .payment-method-view input:checked {\r\n border: 6px solid #FA9F2A;\r\n }\r\n\r\n .payment-method-view label {\r\n color: #14213D;\r\n font-size: 1.1rem;\r\n cursor: pointer;\r\n margin-right: 20px;\r\n }\r\n\r\n .check-wallet {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n margin: 10px 0;\r\n }\r\n\r\n .check-wallet label {\r\n cursor: pointer;\r\n color: #14213D;\r\n font-size: 1.1rem;\r\n margin-left: 10px;\r\n }\r\n\r\n .check-wallet input {\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n\r\n width: 20px;\r\n height: 20px;\r\n border: 1px solid #FA9F2A;\r\n border-radius: 2px;\r\n\r\n transition: .2s all linear;\r\n cursor: pointer;\r\n }\r\n\r\n .check-wallet input:checked {\r\n background-color: #FA9F2A;\r\n }\r\n\r\n .checkmark:after {\r\n content: \"\";\r\n position: absolute;\r\n display: none;\r\n }\r\n\r\n .check-wallet input:checked ~ .checkmark:after {\r\n display: block;\r\n }\r\n\r\n .checkmark:after {\r\n left: 6px;\r\n top: 3px;\r\n width: 5px;\r\n height: 10px;\r\n border: solid white;\r\n border-width: 0 3px 3px 0;\r\n -webkit-transform: rotate(45deg);\r\n -ms-transform: rotate(45deg);\r\n transform: rotate(45deg);\r\n cursor: pointer;\r\n }\r\n\r\n .text-total {\r\n text-align: center;\r\n color: #14213D;\r\n font-size: 1rem;\r\n }\r\n\r\n .text-total span {\r\n font-weight: 700;\r\n }\r\n\r\n .new-card-container {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 5px; \r\n margin-bottom: 5px;\r\n }\r\n\r\n .container-title-payment-view {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .title-payment-view {\r\n text-align: center; \r\n color: #14213D;\r\n font-size: 1.2rem; \r\n font-weight: 700;\r\n }\r\n\r\n .payment-cupon-view {\r\n display: flex;\r\n margin: 10px 0;\r\n align-self: center;\r\n align-items: center;\r\n justify-content: space-around;\r\n width: 100%;\r\n }\r\n\r\n .payment-cupon-text {\r\n font-size: 1.1rem;\r\n color: #14213D;\r\n }\r\n\r\n .container-info-payment-view {\r\n margin: 15px 0 5px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .discount-coupon-view {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .text-discount {\r\n text-align: center; \r\n color: #14213D; \r\n font-size: 0.75rem; \r\n }\r\n\r\n .text-discount span {\r\n font-weight: 700;\r\n }\r\n\r\n .discount-coupon-code {\r\n font-size: 0.75rem;\r\n background-color: #F0F0F0;\r\n color: #E6860B;\r\n padding: 5px 30px 5px 10px;\r\n border-radius: 11px;\r\n margin-left: 5px;\r\n font-weight: 700;\r\n }\r\n\r\n .remove-discount-coupon-button {\r\n width: 20px;\r\n height: 20px;\r\n border: 1px solid #B7B7B7;\r\n border-radius: 18px;\r\n margin-left: -20px;\r\n background-color: #FFFFFF;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .remove-discount-coupon-button-text {\r\n text-align: center;\r\n color: #B7B7B7;\r\n }\r\n\r\n .text-warning-package {\r\n color: #14213D;\r\n font-weight: bold;\r\n font-size: 1rem;\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .delete-card svg {\r\n width: 17px;\r\n }\r\n\r\n .payment-signature-input {\r\n margin: 10px 0 20px 10px; \r\n width: 400px;\r\n display: flex;\r\n text-align: center;\r\n height: 40px;\r\n border-radius: 20px;\r\n border: 1px solid #CFCFCF;\r\n background-color: #fff;\r\n font-size: 1.1rem;\r\n color: #14213D;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n max-width: 400px;\r\n\r\n .check-wallet label {\r\n font-size: 1rem;\r\n }\r\n\r\n .payment-method-view label {\r\n font-size: 1rem;\r\n }\r\n\r\n .payment-cupon-text {\r\n font-size: 1rem;\r\n }\r\n\r\n .title-payment-view {\r\n font-size: 1.1rem; \r\n }\r\n\r\n .text-total {\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 450px) {\r\n max-width: 300px;\r\n\r\n .check-wallet input {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .checkmark:after {\r\n left: 4px;\r\n top: 0;\r\n }\r\n\r\n .payment-method-view input {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .check-wallet label {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .payment-cupon-text {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .title-payment-view {\r\n font-size: 1rem; \r\n }\r\n\r\n .text-total {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .button-new-card {\r\n background: none;\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n font-size: 1.1rem;\r\n transition: .3s color;\r\n }\r\n\r\n .button-new-card:hover {\r\n color: #E6860B;\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { makeCreditCard, makeDebitCard } from '../../../../../../api/payments';\r\nimport { toast } from 'react-toastify';\r\nimport ModalAddNewCard from '../../../../../../components/Modals/ModalAddNewCard';\r\nimport { Container } from './styles';\r\n\r\nconst CreateNewCard = ({ addNewCreditCard, setAddNewCreditCard, doExecuteSearchs, setLoading }) => {\r\n const [holderName, setHolderName] = useState(\"\");\r\n const [number, setNumber] = useState(\"\");\r\n const [expirationMonthYear, setExpirationMonthYear] = useState(\"\");\r\n const [securityCode, setSecurityCode] = useState(\"\");\r\n\r\n const createCreditCards = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n let expiration_month = expirationMonthYear.substring(0, 2);\r\n let expiration_year = expirationMonthYear.substring(3, 5);\r\n\r\n await makeCreditCard(holderName, number, expiration_month, expiration_year, securityCode);\r\n toast.success(\"Cartão adicionado com sucesso\", { autoClose: 3000 })\r\n\r\n doExecuteSearchs();\r\n\r\n setLoading(false);\r\n setAddNewCreditCard(false);\r\n\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error('Erro ao adicionar cartão: Dados inválidos')\r\n }\r\n }\r\n\r\n const createDebitCards = async (card_type, brand) => {\r\n try {\r\n setLoading(true);\r\n\r\n await makeDebitCard(holderName, number, expirationMonthYear, securityCode, card_type, brand);\r\n toast.success('Cartão adicionado com sucesso', { autoClose: 5000 });\r\n\r\n doExecuteSearchs();\r\n\r\n setLoading(false);\r\n setAddNewCreditCard(false);\r\n\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(\"Erro ao adicionar cartão: Dados inválidos\");\r\n }\r\n }\r\n\r\n return (\r\n \r\n setAddNewCreditCard(val)}\r\n setSecurityCode={setSecurityCode}\r\n setNumber={setNumber}\r\n setHolderName={setHolderName}\r\n setExpirationMonthYear={setExpirationMonthYear}\r\n clicked={option => option && createCreditCards()}\r\n />\r\n\r\n \r\n )\r\n}\r\n\r\nexport default CreateNewCard;","import { getSectionsCatchErrors } from '../getSectionsCatchErrors';\r\nimport { fetchWithTimeout, header } from './request';\r\n\r\nexport const validatePostResponse = async (postUrl, errorMessage, body) => {\r\n const { post_bearer_common } = header(body);\r\n let isValidation = false;\r\n try {\r\n const response = await fetchWithTimeout(`${postUrl}`, post_bearer_common);\r\n\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n isValidation = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else if (response.status !== 200) {\r\n const data = response.data;\r\n throw new Error(`${data.message} ${response.status}`);\r\n }\r\n } catch (error) {\r\n if (isValidation) throw error;\r\n getSectionsCatchErrors(error, errorMessage);\r\n }\r\n};","import { API_BASE, API_VERSION, PAYMENTS, SUBSCRIPTIONS, SUBSCRIPTION_PLANS, SUBSCRIPTION_PLANS_METHODS, SUBSCRIPTION_PLANS_PURCHASE } from \"../../../helper/api_urls\";\nimport { validateDeleteResponse } from \"../../../helper/validateDeleteResponse\";\nimport { validateGetResponse } from \"../../../helper/validateGetResponse\";\nimport { validatePostResponse } from \"../../../helper/validateResponse\";\n\nconst getSignaturesPaymentsMethods = async (callback, signature_id) => {\n try {\n const getUrl = `${API_BASE}${API_VERSION}${PAYMENTS}${SUBSCRIPTION_PLANS_METHODS}?plan_id=${signature_id}`;\n\n return callback(await validateGetResponse(\n getUrl,\n \"Erro ao verificar métodos de pagamento por assinatura\"\n ))\n } catch (error) {\n throw error;\n }\n}\n\nconst getSignaturesByCategory = async (callback, category_id) => {\n try {\n const getUrl = `${API_BASE}${API_VERSION}${SUBSCRIPTION_PLANS_PURCHASE}?category_id=${category_id}`;\n\n return callback(await validateGetResponse(\n getUrl,\n \"Erro ao verificar planos de assinatura por categoria\"\n ))\n } catch (error) {\n throw error;\n }\n}\n\nconst getAllSubscriptionsPlans = async () => {\n try {\n const getUrl = `${API_BASE}${API_VERSION}${SUBSCRIPTION_PLANS}${SUBSCRIPTIONS}`;\n return await validateGetResponse(\n getUrl,\n \"Erro ao requisitar todos os planos de assinatura contratados.\",\n )\n } catch (error) {\n throw error;\n }\n}\n\nconst postSignatureContract = async (signature_id, method, card_id) => {\n try {\n const postUrl = `${API_BASE}${API_VERSION}${SUBSCRIPTION_PLANS}/${signature_id}${SUBSCRIPTIONS}`;\n\n const body = {\n payment_method: method,\n card_id: card_id\n }\n\n return await validatePostResponse(\n postUrl,\n \"Erro ao confirmar contrato de plano de assinatura\",\n body\n )\n } catch (error) {\n throw error;\n }\n}\n\nconst cancelSignaturePlan = async (signature_id) => {\n try {\n const deleteUrl = `${API_BASE}${API_VERSION}${SUBSCRIPTION_PLANS}${SUBSCRIPTIONS}/${signature_id}`;\n\n return await validateDeleteResponse(\n deleteUrl,\n \"Erro ao cancelar plano de assinatura\",\n null\n )\n } catch (error) {\n throw error;\n }\n}\n\nexport {\n getSignaturesPaymentsMethods,\n getAllSubscriptionsPlans,\n getSignaturesByCategory,\n postSignatureContract,\n cancelSignaturePlan,\n}\n\n","import React, { useState, useEffect } from 'react';\r\nimport {\r\n getOrderPaymentMethods,\r\n getWalletBalance,\r\n getOnDemandOrderPaymentMethods,\r\n getCustomerCreditCards,\r\n getPartnersPaymentMethods,\r\n getCustomerDebitCardsMultiBenefits\r\n} from '../../../../api/payments';\r\nimport { formatCurrencyBRL } from '../../../../utils/utils';\r\nimport DeleteCardButton from './components/DeleteCardButton';\r\nimport NewCardButton from './components/NewCardButton';\r\nimport AddDiscountCouponButton from './components/AddDiscountCouponButton';\r\nimport { getPackagePaymentsMethods } from '../../../../api/service_packages';\r\nimport { toast } from 'react-toastify';\r\nimport { Container } from './styles';\r\nimport CreateNewCard from './components/CreateNewCard';\r\nimport { getSignaturesPaymentsMethods } from '../../../../api/requests/orders/signature/signaturePlanApi';\r\nimport { validateDiscountCoupon } from '../../../../api/discount_coupons';\r\n\r\nconst PaymentView = (props) => {\r\n const offer = props.offer;\r\n const partner = props.partner;\r\n const pack = props.pack;\r\n const signaturePlan = props.signaturePlan;\r\n const hasDiscount = props.hasDiscount;\r\n const orderType = props.orderType;\r\n const setCheckedPaymentMethod = props.setCheckedPaymentMethod;\r\n const setPaymentSignature = props.setPaymentSignature;\r\n const checkedPaymentMethod = props.checkedPaymentMethod;\r\n const setSelectedDiscountCoupon = props.setSelectedDiscountCoupon;\r\n const selectedDiscountCoupon = props.selectedDiscountCoupon;\r\n const setWalletSelected = props?.setWalletSelected;\r\n const setLoading = props.setLoading;\r\n const orderDate = props.selectedDate;\r\n\r\n const [allPaymentMethods, setAllPaymentMethods] = useState([]);\r\n const [allCreditCards, setAllCreditCards] = useState([]);\r\n const [allDebitCardsMultiBenefits, setAllDebitCardsMultiBenefits] = useState([]);\r\n const [balance, setBalance] = useState('');\r\n const [isSelected, setIsSelected] = useState(false);\r\n const [addNewCreditCard, setAddNewCreditCard] = useState(false);\r\n\r\n let price;\r\n\r\n if (offer?.price) {\r\n price = offer.price;\r\n } else if (offer?.total_value) {\r\n price = offer.total_value;\r\n } else if (pack?.price) {\r\n price = pack.price;\r\n } else if (signaturePlan?.price) {\r\n price = signaturePlan.price\r\n }\r\n\r\n const executeSearchs = async () => {\r\n try {\r\n if (offer?.on_demand_order) {\r\n await getOnDemandOrderPaymentMethods(setAllPaymentMethods, orderType, offer.service_id);\r\n } else if (partner) {\r\n await getPartnersPaymentMethods(setAllPaymentMethods);\r\n } else if (pack) {\r\n await getPackagePaymentsMethods(setAllPaymentMethods);\r\n } else if (signaturePlan) {\r\n await getSignaturesPaymentsMethods(setAllPaymentMethods, signaturePlan.id)\r\n } else {\r\n await getOrderPaymentMethods(setAllPaymentMethods, orderType, offer.service_id);\r\n }\r\n await getCustomerCreditCards(setAllCreditCards);\r\n await getCustomerDebitCardsMultiBenefits(setAllDebitCardsMultiBenefits);\r\n await getWalletBalance(setBalance);\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n setCheckedPaymentMethod({ method: null, card: null });\r\n\r\n executeSearchs();\r\n }\r\n\r\n return () => { isMounted = false; };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (setWalletSelected) {\r\n setWalletSelected(isSelected);\r\n }\r\n }, [isSelected]);\r\n\r\n useEffect(() => {\r\n\r\n async function validateCoupon() {\r\n try {\r\n const response = await validateDiscountCoupon(selectedDiscountCoupon.id, offer.service_id, checkedPaymentMethod.method, offer.orderType)\r\n if (!response.valid) {\r\n toast.error(response.message)\r\n setSelectedDiscountCoupon(null)\r\n }\r\n } catch (error) {\r\n toast.error(error.message)\r\n }\r\n }\r\n if (checkedPaymentMethod.method && selectedDiscountCoupon) {\r\n validateCoupon();\r\n }\r\n }, [selectedDiscountCoupon, checkedPaymentMethod, offer, setSelectedDiscountCoupon])\r\n\r\n let paymentMethods = Object.keys(allPaymentMethods).map(function (method, methodIndex) {\r\n let methodView =
;\r\n\r\n switch (method) {\r\n case 'cash':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Dinheiro \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'pix':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Pix \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'wallet':\r\n if (allPaymentMethods[method] && (balance.balance > 0 && balance.balance >= price)) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Carteira Digital {formatCurrencyBRL(balance.balance)} \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'debit':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Débito \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'credit':\r\n if (allPaymentMethods[method] && allCreditCards.length > 0) {\r\n methodView =\r\n \r\n {allCreditCards.map((creditCard, creditCardIndex) =>\r\n
\r\n
setCheckedPaymentMethod({ method: method, card: creditCard.id })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: creditCard.id })}>Cartão de Crédito Final {creditCard.masked_number.slice(-4)} \r\n \r\n
\r\n \r\n )}\r\n
\r\n setAddNewCreditCard(true)}\r\n />\r\n setAddNewCreditCard(true)}>Cartão de Crédito \r\n\r\n
;\r\n }\r\n break;\r\n case 'mercadopago':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Mercado Pago \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'payroll':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Débito em Folha \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'alelo_multibeneficios':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n {allDebitCardsMultiBenefits.map((debitCardMulti, debitCardMultiIndex) =>\r\n
\r\n
setCheckedPaymentMethod({ method: method, card: debitCardMulti.id })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: debitCardMulti.id })}>Cartão {debitCardMulti.brand} de Final {debitCardMulti.masked_number.slice(-4)} \r\n \r\n
\r\n \r\n )}\r\n
;\r\n }\r\n break;\r\n case 'bank_slip':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: method, card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: method, card: null })}>Boleto bancário \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'package_balance':\r\n if (allPaymentMethods[method] && allPaymentMethods[method].available > 0) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: 'package', card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: 'package', card: null })}>Pacote ({allPaymentMethods[method].available}/{allPaymentMethods[method].purchased}) \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n case 'subscription':\r\n if (allPaymentMethods[method]) {\r\n methodView =\r\n \r\n setCheckedPaymentMethod({ method: 'subscription', card: null })}\r\n />\r\n setCheckedPaymentMethod({ method: 'subscription', card: null })}>Plano de assinatura \r\n
\r\n ;\r\n } else {\r\n methodView =
;\r\n }\r\n break;\r\n default:\r\n methodView =
;\r\n }\r\n\r\n return (\r\n \r\n {methodView}\r\n
\r\n )\r\n });\r\n\r\n let discount = null;\r\n if (null != selectedDiscountCoupon) {\r\n if (selectedDiscountCoupon.discount_percentage) {\r\n discount = (price / 100) * selectedDiscountCoupon.discount_percentage;\r\n } else {\r\n discount = selectedDiscountCoupon.discount_value;\r\n }\r\n\r\n if (discount > price) {\r\n discount = price;\r\n }\r\n\r\n price -= discount;\r\n }\r\n\r\n return (\r\n \r\n {(!partner && hasDiscount !== false) &&\r\n \r\n
\r\n
PAGAMENTO \r\n
\r\n
Cupom de desconto? \r\n
\r\n
\r\n
\r\n
\r\n }\r\n\r\n \r\n {paymentMethods}\r\n
\r\n\r\n {(setWalletSelected && checkedPaymentMethod.method === 'pix' && (price > balance.balance && balance.balance > 0) ||\r\n setWalletSelected && checkedPaymentMethod.method === 'credit' && (price > balance.balance && balance.balance > 0)) &&\r\n \r\n setIsSelected(!isSelected)}\r\n />\r\n setIsSelected(!isSelected)}> \r\n setIsSelected(!isSelected)}>Utilizar saldo carteira digital: {formatCurrencyBRL(balance.balance)} \r\n
\r\n }\r\n\r\n \r\n {null != discount &&\r\n
\r\n {!offer?.estimate_required\r\n && Desconto aplicado: {formatCurrencyBRL(discount)} \r\n }\r\n\r\n #{selectedDiscountCoupon.code} \r\n setSelectedDiscountCoupon(null)}\r\n >\r\n x \r\n \r\n
\r\n }\r\n\r\n {pack &&\r\n
Este pacote é válido por {pack.validity_days} dias após a aprovação do pagamento \r\n }\r\n\r\n {(checkedPaymentMethod && checkedPaymentMethod.method === 'payroll') &&\r\n
setPaymentSignature(e.target.value)}\r\n />\r\n }\r\n\r\n {!partner &&\r\n offer?.estimate_required\r\n ? À orçar \r\n : Total: {formatCurrencyBRL(price)} \r\n }\r\n \r\n )\r\n\r\n}\r\n\r\nexport default PaymentView;","import React, { useState } from 'react';\r\nimport { FiCalendar, FiClock, FiMap } from 'react-icons/fi';\r\nimport Modal from 'react-modal';\r\nimport { toast } from 'react-toastify';\r\nimport PaymentView from '../../../views_2/ServiceOrder/components/PaymentView';\r\nimport LoaderSpinner from '../../LoaderSpinner';\r\nimport Moment from 'moment-timezone';\r\nimport './styles.css';\r\nimport { formatCurrencyBRL } from '../../../utils/utils';\r\nimport { putPaymentOrder } from '../../../api/service_orders';\r\n\r\nconst ModalReSendPayment = ({ showModalResend, setShowModalResend, order }) => {\r\n const [methodPayment, setMethodPayment] = useState({});\r\n const [messageError, setMessageError] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n\r\n const doPayment = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n const resp = await putPaymentOrder(order.id, methodPayment.method, methodPayment.card);\r\n\r\n if (resp === 200) {\r\n toast.success(\"Pagamento feito com sucesso!\");\r\n setMessageError('');\r\n setShowModalResend(false);\r\n } else {\r\n setMessageError(resp.message);\r\n }\r\n\r\n setLoading(false);\r\n } catch (error) {\r\n toast.error(error.message);\r\n setLoading(false);\r\n }\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n pagamento recusado! \r\n O pagamento do serviço \"{order.service.name} \" foi recusado! \r\n
\r\n\r\n \r\n
\r\n
\r\n\r\n
\r\n R$ {formatCurrencyBRL(order.total_value).substring(2)} \r\n
\r\n\r\n
\r\n
\r\n
{order.service.name}aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa \r\n\r\n
\r\n {Moment(order.scheduled_date).format('DD/MM/YYYY')} \r\n
\r\n\r\n
\r\n {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format('HH:mm')} \r\n
\r\n\r\n
\r\n {order.address_description} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n Profissional: \r\n {order.professional.name} \r\n
\r\n
\r\n
\r\n
\r\n
\r\n\r\n
\r\n SELECIONE A FORMA DE PAGAMENTO (Apenas cartão) \r\n
\r\n\r\n
\r\n
PAGAMENTO \r\n\r\n
\r\n\r\n {messageError !== '' &&\r\n
\r\n {messageError} \r\n
\r\n }\r\n
\r\n\r\n
\r\n realizar pagamento \r\n \r\n \r\n
\r\n \r\n email inválido: \r\n Altere seu email \r\n
\r\n\r\n \r\n Seu email {email} parece ser inválido. Corrija seu cadastro. \r\n
\r\n\r\n doCloseModal()}>\r\n ir para configurações \r\n \r\n \r\n {t(\"schedulePlaceTitle\")} \r\n \r\n \r\n history.push('/schedulePosition')}>\r\n \r\n {t(\"scheduleButtonTitle\")} \r\n \r\n \r\n \r\n\r\n \r\n history.push('/checkin')}>\r\n \r\n {hasAutomaticCheckin ? t(\"reservationsButtonTitle\") : t(\"checkInButtonTitle\")} \r\n \r\n \r\n \r\n\r\n {checked.length > 0 && (\r\n \r\n history.push('/checkout')}>\r\n \r\n check-out \r\n \r\n \r\n \r\n )}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SchedulePlace;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Title = styled.h3`\r\n color: #14213d;\r\n font-size: 1.4rem;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n text-align: center;\r\n margin-top: 4rem;\r\n`;\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n overflow-x: auto;\r\n justify-content: flex-start;\r\n text-align: center;\r\n\r\n @media (max-width: 500px) {\r\n width: 90vw;\r\n }\r\n`;\r\n\r\nexport const ViewBox = styled.div`\r\n margin: 0 2rem;\r\n align-items: center;\r\n`;\r\n\r\nexport const ButtonImg = styled.img`\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 1.01rem;\r\n background-color: #fff;\r\n`;\r\n\r\nexport const ButtonView = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const ButtonText = styled.h3`\r\n color: #14213d;\r\n font-size: 14px;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n margin: 5px 0;\r\n flex: 1;\r\n flex-wrap: wrap;\r\n width: 0.8;\r\n text-align: center;\r\n`;\r\n\r\nexport const LineSeparator = styled.div`\r\n width: 100%;\r\n max-width: 900px !important;\r\n border: 0.1px solid #f2f2f2;\r\n margin: 50px 0;\r\n`;\r\n\r\nexport const ContainerPage = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const ButtonOpacity = styled.button`\r\n transition: ease-in 0.2s;\r\n &:hover {\r\n opacity: 0.6;\r\n }\r\n \r\n opacity: ${({ disabled }) => (disabled ? 0.7 : 1)};\r\n background: none !important;\r\n `;\r\n","import { fetchWithTimeout, header } from './helper/request';\r\nimport {\r\n API_TIME_CLOCK,\r\n CHECKIN,\r\n CHECKOUT,\r\n CURRENT,\r\n HISTORY,\r\n TIMES,\r\n} from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\nimport { validatePostResponse } from './helper/validateResponse';\r\n\r\nconst doTimeClockCheckin = async () => {\r\n const postUrl = `${API_TIME_CLOCK}${TIMES}${CHECKIN}`;\r\n const body = {\r\n latitude: null,\r\n longitude: null,\r\n };\r\n await validatePostResponse(\r\n postUrl,\r\n 'Erro ao fazer a entrada no controle de ponto',\r\n body,\r\n );\r\n};\r\n\r\nconst doTimeClockCheckout = async () => {\r\n const postUrl = `${API_TIME_CLOCK}${TIMES}${CHECKOUT}`;\r\n const body = {\r\n latitude: null,\r\n longitude: null,\r\n };\r\n await validatePostResponse(\r\n postUrl,\r\n 'Erro ao fazer a saída no controle de ponto',\r\n body,\r\n );\r\n};\r\n\r\nconst deleteTimeClockCurrent = async () => {\r\n const validationError = false;\r\n\r\n try {\r\n const { delete_bearer_common } = header();\r\n\r\n const response = await fetchWithTimeout(\r\n `${API_TIME_CLOCK}${TIMES}`,\r\n delete_bearer_common,\r\n );\r\n\r\n if (!response.ok) {\r\n const responseJson = response.data;\r\n throw new Error(responseJson.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(\r\n error,\r\n 'Erro ao cancelar uma entrada em andamento',\r\n );\r\n }\r\n }\r\n};\r\n\r\nconst getTimeClockCheckinCurrent = async () => {\r\n let validationError = false;\r\n\r\n try {\r\n const { get_bearer_common } = header();\r\n\r\n const response = await fetchWithTimeout(\r\n `${API_TIME_CLOCK}${TIMES}${CURRENT}`,\r\n get_bearer_common,\r\n );\r\n\r\n if (response.status === 200) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(\r\n error,\r\n 'Erro ao verificar as entradas em andamento',\r\n );\r\n }\r\n }\r\n};\r\n\r\nconst getTimeClockHistory = async daysSelected => {\r\n let validationError = false;\r\n\r\n try {\r\n const { get_bearer_common } = header();\r\n\r\n const response = await fetchWithTimeout(\r\n `${API_TIME_CLOCK}${TIMES}${HISTORY}?days=${daysSelected}`,\r\n get_bearer_common,\r\n );\r\n\r\n if (response.status === 200) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(\r\n error,\r\n 'Erro ao verificar o histórico do controle de ponto',\r\n );\r\n }\r\n }\r\n};\r\n\r\nexport {\r\n doTimeClockCheckin,\r\n doTimeClockCheckout,\r\n deleteTimeClockCurrent,\r\n getTimeClockCheckinCurrent,\r\n getTimeClockHistory,\r\n};","import styled from \"styled-components\";\r\n\r\nexport const ModalContainer = styled.div``;\r\n\r\nexport const HeaderContainer = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: #f7f7f7;\r\n`;\r\n\r\nexport const HeaderModal = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 20px 20px 0 0;\r\n padding: 10px 30px;\r\n text-align: left;\r\n font-size: 1.5rem;\r\n color: #000000;\r\n`;\r\n\r\nexport const HeaderTitle = styled.span`\r\n font-size: 0.8rem;\r\n`;\r\n\r\nexport const HeaderSubtitle = styled.span`\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n text-transform: uppercase;\r\n`;\r\n\r\nexport const BodyModal = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const ModalContent = styled.span`\r\n padding: 2rem;\r\n font-size: 1rem;\r\n color: #000000;\r\n`;\r\n\r\nexport const ContainerFooterModal = styled.div`\r\n width: 100%;\r\n`;\r\n\r\nexport const CloseModal = styled.button`\r\n width: 50%;\r\n padding: 1rem;\r\n background-color: #fa9f2a;\r\n font-size: 1rem;\r\n`;\r\n\r\nexport const SendModal = styled.button`\r\n width: 50%;\r\n padding: 1rem;\r\n font-size: 1rem;\r\n background-color: #ffffff;\r\n color: #fa9f2a;\r\n`;\r\n","import React, { useState } from \"react\";\r\nimport Modal from \"react-modal\";\r\nimport { toast } from \"react-toastify\";\r\n\r\nimport {\r\n doTimeClockCheckin,\r\n doTimeClockCheckout,\r\n getTimeClockCheckinCurrent,\r\n} from \"../../../../../api/time_clock\";\r\n\r\nimport LoaderSpinner from \"../../../../../components/LoaderSpinner\";\r\n\r\nimport {\r\n ModalContainer,\r\n HeaderContainer,\r\n HeaderModal,\r\n HeaderTitle,\r\n HeaderSubtitle,\r\n BodyModal,\r\n ContainerFooterModal,\r\n CloseModal,\r\n SendModal,\r\n ModalContent,\r\n} from \"./styles\";\r\nimport \"./style.css\";\r\nimport { t } from \"i18next\";\r\n\r\nconst ModalTimeClockConfirm = ({\r\n showModal,\r\n setShowModal,\r\n modalType,\r\n handleCancelTimeClock,\r\n}) => {\r\n const [loading, setLoading] = useState(false);\r\n\r\n async function handleConfirmCheckin() {\r\n try {\r\n setLoading(true);\r\n await doTimeClockCheckin();\r\n toast.success(\"Entrada realizada com sucesso\", { duration: 5000 });\r\n } catch (err) {\r\n toast.error(err.message);\r\n } finally {\r\n setLoading(false);\r\n }\r\n }\r\n\r\n async function handleConfirmCheckout() {\r\n try {\r\n setLoading(true);\r\n const totalTimeCheckout = await getTimeClockCheckinCurrent();\r\n await doTimeClockCheckout();\r\n toast.success(\r\n `Saída realizada com sucesso com o tempo total de ${totalTimeCheckout.total_time}`,\r\n {\r\n duration: 5000,\r\n }\r\n );\r\n } catch (err) {\r\n toast.error(err.message);\r\n } finally {\r\n setLoading(false);\r\n }\r\n }\r\n\r\n async function handleConfirmAction() {\r\n setLoading(true);\r\n\r\n modalType === t(\"entryWord\")\r\n ? await handleConfirmCheckin()\r\n : modalType === t(\"exitWord\")\r\n ? await handleConfirmCheckout()\r\n : await handleCancelTimeClock();\r\n\r\n setLoading(false);\r\n setShowModal(!showModal);\r\n }\r\n\r\n return (\r\n <>\r\n \r\n setShowModal(!showModal)}\r\n className=\"vaccination\"\r\n overlayClassName=\"modal-overlay\"\r\n ariaHideApp={false}\r\n >\r\n \r\n \r\n {t(\"confirmWord\")} \r\n {modalType} \r\n \r\n \r\n\r\n \r\n {t(\"makeScheduleConfirm\")} {modalType}? \r\n \r\n\r\n \r\n {\r\n handleConfirmAction();\r\n }}\r\n >\r\n {t(\"yesWord\")}, {modalType === t(\"cancellation\") ? t(\"cancelWord\") : t(\"confirmWord\")}\r\n \r\n setShowModal(!showModal)}>\r\n {t(\"noWord\")}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ModalTimeClockConfirm;\r\n","export function getTimeDiff(setActualTime, currentTime) {\r\n const dateFinal = new Date(currentTime).getTime();\r\n const now = new Date().getTime();\r\n let gap = now - dateFinal;\r\n let ss = 1000;\r\n let mm = ss * 60;\r\n let hh = mm * 60;\r\n let h = Math.floor(gap / hh);\r\n let m = Math.floor((gap % hh) / mm);\r\n let s = Math.floor((gap % mm) / ss);\r\n if (s < 10) {\r\n s = `0${s}`;\r\n }\r\n if (m < 10) {\r\n m = `0${m}`;\r\n }\r\n if (h < 10) {\r\n h = `0${h}`;\r\n }\r\n setActualTime(`${h}:${m}:${s}`);\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport {t} from 'i18next'\r\n\r\nimport {\r\n ContainerPage,\r\n Container,\r\n ViewBox,\r\n ButtonImg,\r\n ButtonView,\r\n ButtonText,\r\n Title,\r\n} from \"./styles\";\r\n\r\nimport { ButtonOpacity } from \"./components/ButtonOpacity\";\r\nimport ModalTimeClockConfirm from \"./ModalTimeClockConfirm\";\r\n\r\nimport { getTimeClockCheckinCurrent } from \"../../../../api/time_clock\";\r\nimport { getTimeDiff } from \"./utils/getTimeDiff\";\r\n\r\nconst TimeClock = () => {\r\n const history = useHistory();\r\n\r\n const [hasCurrentCheckin, setHasCurrentCheckin] = useState(null);\r\n const [modalType, setModalType] = useState(\"\");\r\n const [showModal, setShowModal] = useState(false);\r\n const [actualTime, setActualTime] = useState(\"00:00:00\");\r\n\r\n function handleOpenCheckModal(type) {\r\n setModalType(type);\r\n setShowModal(!showModal);\r\n }\r\n\r\n const doGetChecked = async (isMounted) => {\r\n await getTimeClockCheckinCurrent()\r\n .then((currentCheckin) => {\r\n if (isMounted) {\r\n setHasCurrentCheckin(currentCheckin);\r\n }\r\n })\r\n .catch(() => setHasCurrentCheckin(\"\"));\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n doGetChecked(isMounted);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, [showModal]);\r\n\r\n useEffect(() => {\r\n let interval;\r\n if (hasCurrentCheckin) {\r\n interval = setInterval(() => {\r\n getTimeDiff(setActualTime, hasCurrentCheckin.started_at);\r\n }, 1000);\r\n }\r\n\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, [hasCurrentCheckin]);\r\n\r\n return (\r\n \r\n {t(\"eletronicPoint\")} \r\n \r\n \r\n history.push(\"/timeClockHistory\")}>\r\n \r\n {t(\"historyWord\")} \r\n \r\n \r\n \r\n\r\n \r\n {\r\n handleOpenCheckModal(t(\"entryWord\"));\r\n }}\r\n >\r\n \r\n {t(\"entryWord\")} \r\n \r\n \r\n \r\n\r\n \r\n {\r\n handleOpenCheckModal(t(\"exitWord\"));\r\n }}\r\n >\r\n \r\n {t(\"exitWord\")} \r\n \r\n {hasCurrentCheckin && actualTime}\r\n \r\n \r\n \r\n \r\n \r\n\r\n {modalType && (\r\n \r\n );\r\n};\r\n\r\nexport default TimeClock;\r\n","import {\r\n API_BASE,\r\n API_VERSION,\r\n CONFIRMATION,\r\n CUSTOMER_ORDERS,\r\n PAYMENT,\r\n \r\n} from \"../../helper/api_urls\";\r\nimport { validateGetResponse } from \"../../helper/validateGetResponse\";\r\nimport { validatePutResponse } from \"../../helper/validatePutResponse\";\r\n\r\nconst getPaymentsConfirmed = async () => {\r\n try {\r\n const getUrl = `${API_BASE}${API_VERSION}${CUSTOMER_ORDERS}${PAYMENT}${CONFIRMATION}?page=0&limit=10`;\r\n\r\n return await validateGetResponse(\r\n getUrl,\r\n \"Erro ao verificar pagamentos confirmados\"\r\n );\r\n } catch (error) {\r\n throw error;\r\n }\r\n};\r\n\r\nconst putPaymentsConfirmationUpdate = async (order_id) => {\r\n try {\r\n const putUrl = `${API_BASE}${API_VERSION}${CUSTOMER_ORDERS}/${order_id}${PAYMENT}${CONFIRMATION}`;\r\n\r\n return await validatePutResponse(\r\n putUrl,\r\n \"Erro ao atualizar pagamento confirmado\"\r\n );\r\n } catch (error) {\r\n throw error;\r\n }\r\n};\r\n\r\nexport { getPaymentsConfirmed, putPaymentsConfirmationUpdate };\r\n","import { API_BASE, API_VERSION, QUESTIONNAIRES_ANSWERS, QUESTIONNAIRES_NEXT } from \"./helper/api_urls\";\nimport { validateGetResponse } from './helper/validateGetResponse';\nimport { validatePostResponse } from \"./helper/validateResponse\";\n\nconst getNextQuestionnaires = async () => {\n try {\n const getUrl = `${API_BASE}${API_VERSION}${QUESTIONNAIRES_NEXT}`;\n return await validateGetResponse(\n getUrl,\n \"Erro ao consultar questionários\",\n );\n } catch (error) {\n if(error.name !== 'NotFoundError') {\n throw error;\n }\n }\n}\n\nconst postQuestionnaireAnswers = async (body) => {\n try {\n const postUrl = `${API_BASE}${API_VERSION}${QUESTIONNAIRES_ANSWERS}`;\n return await validatePostResponse(\n postUrl,\n \"Erro ao enviar respostas do questionários\",\n body\n );\n } catch (error) {\n throw error;\n }\n}\n\nexport {\n getNextQuestionnaires,\n postQuestionnaireAnswers\n}","import React, { useEffect, useState } from 'react';\nimport Modal from 'react-modal';\nimport { toast } from 'react-toastify';\nimport { postQuestionnaireAnswers } from '../../../api/questionnaires';\nimport LoaderSpinner from '../../../components/LoaderSpinner/index';\nimport './styles.css';\n\nconst ModalQuestionnaires = ({ showModal, setShowModal, questionnaire }) => {\n\n const [loading, setLoading] = useState(false);\n const [questionnaireStarted, setQuestionnaireStarted] = useState(false);\n const [questionIndex, setQuestionIndex] = useState(0);\n const [currentQuestion, setCurrentQuestion] = useState([]);\n const [currentAnswer, setCurrentAnswer] = useState('');\n const [answers, setAnswers] = useState([])\n\n useEffect(() => {\n if (questionnaire?.questions) {\n setCurrentQuestion(questionnaire?.questions[questionIndex])\n }\n }, [questionIndex, questionnaire.questions])\n\n const goToNextQuestion = async () => {\n saveCurrentAnswer()\n if (questionIndex < questionnaire.questions.length - 1) {\n setQuestionIndex(questionIndex + 1)\n } else {\n finishQuestionnaire();\n }\n }\n\n const finishQuestionnaire = async () => {\n try {\n setLoading(true)\n await doSendQuestionnaireAnswers(questionnaire.id, answers)\n toast.success('Respostas enviadas com sucesso')\n } catch (error) {\n toast.error(error.message)\n }\n setLoading(false)\n setShowModal(false)\n }\n\n const doSendQuestionnaireAnswers = async (questionnaireId, answers) => {\n const data = {\n questionnaire_id: questionnaireId,\n answers: answers\n }\n\n await postQuestionnaireAnswers(data)\n }\n\n const skipQuestionnaireAnswers = async () => {\n questionnaire.questions.forEach(question => {\n let answer = {\n question_id: question.id,\n answer: 'SKIPPED ANSWER'\n }\n answers.push(answer)\n })\n\n finishQuestionnaire();\n }\n\n const saveCurrentAnswer = () => {\n let answer = {\n question_id: currentQuestion.id,\n answer: currentAnswer\n }\n answers.push(answer)\n setAnswers(answers)\n setCurrentAnswer('')\n }\n\n const questionnaireStartView = () => {\n return (\n <>\n \n {questionnaire.title} \n {questionnaire.description} \n
\n\n setQuestionnaireStarted(true)}>\n iniciar \n \n skipQuestionnaireAnswers()}>\n pular \n \n \n )\n }\n\n const questionnaireChoicesView = () => {\n return Object.entries(currentQuestion.options).map(([key, value]) => {\n return (\n \n
\n { setCurrentAnswer(key) }}\n />\n
\n
\n setCurrentAnswer(key)}>{value} \n
\n
\n { setCurrentAnswer(text.target.value) }}\n />\n
\n )\n }\n\n return (\n \n
\n \n {!questionnaireStarted && questionnaireStartView()}\n\n {questionnaireStarted &&\n
\n
\n
{questionIndex + 1} - {currentQuestion.title} \n {(currentQuestion.type === 'choice' || currentQuestion.type === 'boolean') &&\n
\n {questionnaireChoicesView()}\n
\n }\n {(currentQuestion.type === 'text' || questionnaire.type === '') && questionnaireTextView()}\n
\n\n
{ currentAnswer !== '' && goToNextQuestion() }}>\n enviar \n \n
\n }\n
\r\n \r\n setRated(val)}\r\n />\r\n }\r\n\r\n {invalidEmail &&\r\n setShowModalResending(val)}\r\n />\r\n }\r\n \r\n \r\n \r\n {(allCards && allCards.length > 0) &&\r\n <>\r\n {allCards[0]}\r\n {allCards[1]}\r\n {allCards[2]}\r\n\r\n {hasTimeClockEnabled && !recognitionRequired &&\r\n <>\r\n
\r\n
\r\n \r\n }\r\n\r\n {hasPositionEnabled === true &&\r\n <> \r\n {(!hasTimeClockEnabled || (hasTimeClockEnabled && recognitionRequired)) &&
}\r\n
\r\n
\r\n \r\n }\r\n
setLocationType(value)} />\r\n \r\n {allCards[3]}\r\n {allCards[4]}\r\n {allCards[5]}\r\n {allCards[6]}\r\n {allCards[7]}\r\n \r\n\r\n setModalMessageVisible(val)}\r\n />\r\n\r\n \r\n );\r\n};\r\n\r\nexport default Home;","import styled from \"styled-components\";\r\n\r\nexport const Title = styled.h1`\r\n color: #14213d;\r\n text-align: center;\r\n background: #fff;\r\n border-radius: 22px;\r\n overflow: hidden;\r\n opacity: 1;\r\n padding: 14px;\r\n width: 400px;\r\n font-size: 1.4rem;\r\n text-transform: uppercase;\r\n border: 1px solid #F7F7F7;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n\r\n @media (max-width: 920px) {\r\n width: 20rem;\r\n font-size: 1.2rem;\r\n }\r\n\r\n @media (max-width: 560px) {\r\n font-size: 1rem;\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n align-items: center;\r\n align-self: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n position: relative;\r\n max-height: 200px;\r\n background-color: #C4C4C4;\r\n margin-bottom: 60px;\r\n\r\n .title {\r\n position: absolute;\r\n bottom: -25px;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .image-service-list {\r\n max-width: 1080px;\r\n max-height: 200px;\r\n width: auto;\r\n height: auto;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid #F7F7F7;\r\n }\r\n\r\n .image-service-list .service-banner {\r\n width: 1080px;\r\n }\r\n\r\n .online-view {\r\n position: absolute;\r\n top: 20px;\r\n left: 30px;\r\n background-color: #14213D;\r\n border-radius: 20px;\r\n width: 100px;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .online-view .online-text {\r\n margin-left: 5px;\r\n }\r\n\r\n @media(max-width: 1080px) {\r\n .image-service-list .service-banner {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .image-service-list {\r\n height: 150px;\r\n }\r\n\r\n .online-view {\r\n top: 10px;\r\n left: 10px;\r\n width: 80px;\r\n height: 25px;\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .image-service-list {\r\n height: 120px;\r\n }\r\n }\r\n`;\r\n","import React from \"react\";\r\nimport { FiGlobe } from \"react-icons/fi\";\r\nimport { Container, Title } from \"./styles\";\r\n\r\nconst ServiceBanner = ({ bannerUrl, title, serviceType }) => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n
{title} \r\n \r\n\r\n {\"online\" === serviceType &&\r\n \r\n online \r\n
\r\n }\r\n \r\n );\r\n};\r\n\r\nexport default ServiceBanner;\r\n","import styled from 'styled-components';\r\n\r\nexport const ButtonDate = styled.button`\r\n background: none;\r\n margin-right: 12px;\r\n\r\n .button-view {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 16px;\r\n background-color: #FFFFFF;\r\n }\r\n\r\n .button-view.button-selected-view {\r\n border: 1px solid #FA9F2A;\r\n }\r\n\r\n .container-date {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .day-of-week-view {\r\n background-color: #FA9F2A;\r\n border-radius: 16px 16px 0 0;\r\n height: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #FFFFFF;\r\n font-size: 0.9rem;\r\n text-align: center;\r\n text-transform: lowercase;\r\n }\r\n\r\n .day-view {\r\n background: none;\r\n margin-top: 3px;\r\n color: #FA9F2A;\r\n font-size: 1.8rem;\r\n text-align: center;\r\n }\r\n\r\n .day-text.day-selected-text {\r\n color: #14213D;\r\n }\r\n\r\n .month-view {\r\n border-radius: 0 0 16px 16px;\r\n background: none;\r\n color: #FA9F2A;\r\n margin-top: -3px;\r\n font-size: 1rem;\r\n text-align: center;\r\n text-transform: lowercase;\r\n }\r\n\r\n .month-text.month-selected-text {\r\n color: #14213D;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n .button-view {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n .day-view {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .month-view {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .day-of-week-view {\r\n font-size: 0.85rem;\r\n }\r\n }\r\n\r\n @media(max-width: 550px) {\r\n .button-view {\r\n width: 65px;\r\n height: 65px;\r\n }\r\n\r\n .day-view {\r\n font-size: 1.4rem;\r\n }\r\n\r\n .month-view {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .day-of-week-view {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n @media(max-width: 450px) {\r\n .button-view {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n\r\n .day-view {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .month-view {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .day-of-week-view {\r\n font-size: 0.75rem;\r\n }\r\n }\r\n\r\n @media(max-width: 395px) {\r\n .button-view {\r\n width: 55px;\r\n height: 55px;\r\n }\r\n\r\n .day-view {\r\n font-size: 1rem;\r\n }\r\n\r\n .month-view {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .day-of-week-view {\r\n font-size: 0.7rem;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { getDayName, getMonthName } from '../../../../utils/utils';\r\nimport Moment from 'moment-timezone';\r\nimport { ButtonDate } from './styles';\r\nimport 'moment/locale/pt-br';\r\n\r\nexport const DateButton = (props) => {\r\n const date = props.date;\r\n const selected = props.selected;\r\n const doSelectDate = props.doSelectDate;\r\n\r\n let dayOfWeek = getDayName(date)?.split('-')[0];\r\n let monthName = getMonthName(date);\r\n\r\n return (\r\n \r\n \r\n
\r\n {dayOfWeek} \r\n
\r\n\r\n
\r\n
\r\n \r\n {Moment(date).format('DD')}\r\n \r\n
\r\n\r\n
\r\n \r\n /{monthName}\r\n \r\n
\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default DateButton;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 10px;\r\n width: 100%;\r\n margin-bottom: 30px;\r\n\r\n .finish-order-button {\r\n background-color: #FA9F2A;\r\n width: 400px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 20px;\r\n padding: 15px 0;\r\n color: #fff;\r\n font-size: 1.1rem;\r\n }\r\n\r\n @media(max-width: 450px) {\r\n .finish-order-button {\r\n width: 300px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { createOnDemandOrder } from '../../../../../../api/service_orders';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Container } from './styles';\r\n\r\nconst FinishOrderButton = (props) => {\r\n const offer = props.offer;\r\n const orderType = props.orderType;\r\n const scheduledFrom = props.scheduledFrom;\r\n const scheduledUntil = props.scheduledUntil;\r\n const paymentMethod = props.paymentMethod;\r\n const serviceId = props.serviceId;\r\n const cardId = props.cardId;\r\n const discountCouponId = props.discountCouponId;\r\n const address = props.address;\r\n const setLoading = props.setLoading;\r\n const free = props.free;\r\n const walletSelected = props.walletSelected;\r\n const navigation = useHistory();\r\n\r\n const create = async () => {\r\n try {\r\n if (!paymentMethod && !free) {\r\n toast.error('Favor selecionar a forma de pagamento');\r\n return;\r\n }\r\n\r\n if (scheduledFrom >= scheduledUntil) {\r\n toast.error('Favor selecionar os horarios corretamente');\r\n return;\r\n }\r\n\r\n if (!scheduledFrom || !scheduledUntil) {\r\n toast.error('Os horários devem estar preenchidos');\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n\r\n const order = await createOnDemandOrder(serviceId, scheduledFrom, scheduledUntil, (address ? address.id : null), (free ? 'cash' : paymentMethod), (cardId ? cardId : null), discountCouponId, offer.order_type, walletSelected);\r\n\r\n setLoading(false);\r\n navigation.push(\"/completeOnDemandOrder\", { orderType: orderType, scheduledFrom: scheduledFrom, scheduledUntil: scheduledUntil, offer: offer, address: address, paymentMethod: paymentMethod, pixCode: order.pix_qr_code, paymentExpirationMinutes: order.payment_expiration_minutes, order });\r\n\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message)\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n concluir pedido \r\n \r\n \r\n )\r\n}\r\n\r\nexport default FinishOrderButton;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .choose-period,\r\n .choose-one-date {\r\n text-align: center; \r\n color: #707070; \r\n font-size: 1.1rem;\r\n }\r\n\r\n .container-dates-view {\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .content-view {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .body-ondemand {\r\n display: none;\r\n flex-direction: column;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n padding-bottom: 140px;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .body-ondemand {\r\n padding-bottom: 60px;\r\n }\r\n\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n`;\r\n\r\nexport const DatesViewContainer = styled.div`\r\n margin-top: 5px;\r\n background: #f1f1f1;\r\n width: 700px;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n margin: 15px 20px 30px;\r\n border-radius: 20px 20px 5px 5px;\r\n overflow: auto;\r\n\r\n ::-webkit-scrollbar-track {\r\n background-color: #f1f1f1;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n ::-webkit-scrollbar {\r\n height: 10px;\r\n background: #f8f8f8;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #dad7d7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n ::-webkit-scrollbar-corner {\r\n border-radius: 20px;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n width: 500px;\r\n }\r\n\r\n @media(max-width: 550px) {\r\n width: 400px;\r\n }\r\n\r\n @media(max-width: 450px) {\r\n width: 350px;\r\n }\r\n\r\n @media(max-width: 395px) {\r\n width: 300px;\r\n }\r\n\r\n @media(max-width: 325px) {\r\n width: 280px;\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n\r\n .container-select-time {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-direction: column;\r\n }\r\n\r\n .slots-range-data-view {\r\n margin-top: 20px;\r\n display: flex;\r\n align-items: center;\r\n align-self: center;\r\n justify-content: center;\r\n }\r\n\r\n .slots-range-data-text {\r\n color: #14213D;\r\n font-size: 1.1rem;\r\n text-align: center;\r\n margin-bottom: 10px;\r\n margin-left: 120px;\r\n margin-right: 120px;\r\n }\r\n\r\n .select-container {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .select-time {\r\n width: 300px;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n margin: 0 10px;\r\n }\r\n\r\n .select-time select::-ms-expand {\r\n display: none;\r\n }\r\n\r\n .select-time select {\r\n width: 100%;\r\n height: 50px;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n color: #14213D;\r\n background-color: #F5F5F5;\r\n border: none;\r\n border-radius: 10px;\r\n border: 2px solid #F1F1F1;\r\n padding: 10px;\r\n padding-right: 40px;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .select-time select option {\r\n font-size: 1rem;\r\n color: #14213D;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar-track {\r\n background-color: #f7f7f7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar {\r\n width: 7px;\r\n background: #f7f7f7;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar-thumb {\r\n background: #dad7d7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar-corner {\r\n border-radius: 20px;\r\n }\r\n\r\n .select-time select:hover {\r\n background-color: white;\r\n }\r\n\r\n .select-time .select-icon {\r\n position: absolute;\r\n top: 15px;\r\n right: 10px;\r\n pointer-events: none;\r\n padding-left: 5px;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n .select-time {\r\n width: 200px;\r\n }\r\n\r\n .slots-range-data-text {\r\n margin-left: 80px;\r\n margin-right: 80px;\r\n }\r\n }\r\n\r\n @media(max-width: 450px) {\r\n .select-time {\r\n width: 160px;\r\n }\r\n\r\n .slots-range-data-text {\r\n margin-left: 60px;\r\n margin-right: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 410px) {\r\n .select-time {\r\n width: 130px;\r\n }\r\n\r\n .slots-range-data-text {\r\n margin-left: 45px;\r\n margin-right: 45px;\r\n }\r\n }\r\n\r\n\r\n @media (max-width: 660px){\r\n .select-container{\r\n gap: 1.5rem;\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n`;","import React from 'react';\r\nimport Moment from 'moment-timezone';\r\nimport { Container } from './styles';\r\nimport { FiChevronDown } from 'react-icons/fi';\r\n\r\nconst SlotRange = (props) => {\r\n const selectedDate = props.selectedDate;\r\n const selectedFrom = props.selectedFrom;\r\n const setSelectedFrom = props.setSelectedFrom;\r\n const selectedTo = props.selectedTo;\r\n const setSelectedTo = props.setSelectedTo;\r\n const orderType = props.orderType;\r\n let timeFrom = [];\r\n let timeTo = [];\r\n\r\n let tomorrow = new Date();\r\n tomorrow.setDate(tomorrow.getDate() + 1);\r\n let minHour = Moment(tomorrow).format('YYYY-MM-DD') === selectedDate ? (tomorrow.getHours() + 0.5) : 11;\r\n let maxHour = 21;\r\n\r\n if ('residential' === orderType && new Date(Date.parse(selectedDate)).getDay() === 6) {\r\n maxHour = 20;\r\n }\r\n\r\n function parseDate(selectedDate, time) {\r\n if (selectedDate && time) {\r\n let date = new Date(Date.parse(selectedDate) + (time * 60 * 60 * 1000));\r\n\r\n return date.toISOString();\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n for (let i = minHour; i <= maxHour; i += 0.5) {\r\n timeFrom.push(i);\r\n timeTo.push(i);\r\n }\r\n\r\n return (\r\n \r\n \r\n\r\n
\r\n {selectedFrom &&\r\n \r\n Das {Moment(parseDate(selectedDate, selectedFrom)).tz(\"America/Sao_Paulo\").format('HH:mm')}\r\n \r\n }\r\n\r\n {selectedTo &&\r\n \r\n Às {Moment(parseDate(selectedDate, selectedTo)).tz(\"America/Sao_Paulo\").format('HH:mm')}\r\n \r\n }\r\n
\r\n\r\n
\r\n
\r\n
setSelectedFrom(timeFrom.target.value)}>\r\n Selecione um horário \r\n {timeFrom.map(val => {\r\n return (\r\n {Moment(parseDate(selectedDate, val)).tz(\"America/Sao_Paulo\").format('HH:mm')} \r\n )\r\n })}\r\n \r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n
setSelectedTo(timeTo.target.value)}>\r\n Selecione um horário \r\n {timeTo.map(val => {\r\n return (\r\n {Moment(parseDate(selectedDate, val)).tz(\"America/Sao_Paulo\").format('HH:mm')} \r\n )\r\n })}\r\n \r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default SlotRange;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .banner-skt {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .banner-skeleton {\r\n width: 1080px;\r\n height: 200px;\r\n }\r\n\r\n @media(max-width: 1070px) {\r\n .banner-skeleton {\r\n width: 1070px;\r\n }\r\n }\r\n\r\n @media(max-width: 1050px) {\r\n .title-skeleton {\r\n width: 1040px;\r\n }\r\n }\r\n\r\n @media(max-width: 1030px) {\r\n .banner-skeleton {\r\n width: 1030px;\r\n }\r\n }\r\n\r\n @media(max-width: 1000px) {\r\n .banner-skeleton {\r\n width: 980px;\r\n }\r\n }\r\n\r\n @media(max-width: 970px) {\r\n .banner-skeleton {\r\n width: 950px;\r\n }\r\n }\r\n\r\n @media(max-width: 940px) {\r\n .banner-skeleton {\r\n width: 920px;\r\n }\r\n }\r\n\r\n @media(max-width: 890px) {\r\n .banner-skeleton {\r\n width: 890px;\r\n }\r\n }\r\n\r\n @media(max-width: 850px) {\r\n .banner-skeleton {\r\n width: 850px;\r\n }\r\n }\r\n\r\n @media(max-width: 820px) {\r\n .banner-skeleton {\r\n width: 810px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .banner-skeleton {\r\n width: 770px;\r\n }\r\n }\r\n\r\n @media(max-width: 720px) {\r\n .banner-skeleton {\r\n width: 710px;\r\n }\r\n }\r\n\r\n @media(max-width: 660px) {\r\n .banner-skeleton {\r\n width: 650px;\r\n }\r\n }\r\n\r\n @media(max-width: 600px) {\r\n .banner-skeleton {\r\n width: 590px;\r\n }\r\n }\r\n\r\n @media(max-width: 550px) {\r\n .banner-skeleton {\r\n width: 540px;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .banner-skeleton {\r\n width: 480px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .banner-skeleton {\r\n width: 420px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .banner-skeleton {\r\n width: 370px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .banner-skeleton {\r\n width: 310px;\r\n }\r\n }\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n .today-skeleton {\r\n width: 600px;\r\n height: 160px;\r\n border-radius: 20px;\r\n margin: 20px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 500px;\r\n height: 140px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 400px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 400px) {\r\n .today-skeleton {\r\n width: 350px;\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .today-skeleton {\r\n width: 300px;\r\n height: 100px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonOnDemandOrder = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonOnDemandOrder;","import React, { useEffect, useState } from \"react\";\r\nimport ServiceBanner from \"../../components/ServiceBanner\";\r\nimport DateButton from \"../../components/DateButton\";\r\nimport Moment from \"moment-timezone\";\r\nimport PaymentView from \"../../components/PaymentView\";\r\nimport FinishOrderButton from \"./components/FinishOrderButton\";\r\nimport { getCategory } from \"../../../../api/service_offer\";\r\nimport Header from \"../../../../components/Header\";\r\nimport TabButton from \"../../../../components/TabButton\";\r\nimport { Container, DatesViewContainer } from './styles';\r\nimport SlotRange from './components/SlotRange';\r\nimport LoaderSpinner from \"../../../../components/LoaderSpinner\";\r\nimport SkeletonOnDemandOrder from \"./SkeletonOnDemandOrder\";\r\nimport { toast } from \"react-toastify\";\r\nimport Footer from \"../../../../components/Footer\";\r\nimport { debounce } from 'throttle-debounce';\r\n\r\nconst OnDemandOrderData = ({ location }) => {\r\n let offer = location.state?.offer;\r\n let address = location.state?.address;\r\n let orderType = location.state?.orderType;\r\n const [loading, setLoading] = useState(false);\r\n const [selectedDate, setSelectedDate] = useState();\r\n const [selectedFrom, setSelectedFrom] = useState();\r\n const [selectedTo, setSelectedTo] = useState();\r\n const [checkedPaymentMethod, setCheckedPaymentMethod] = useState({});\r\n const [selectedDiscountCoupon, setSelectedDiscountCoupon] = useState();\r\n const [allDates, setAllDates] = useState([]);\r\n const [category, setCategory] = useState();\r\n const [walletSelected, setWalletSelected] = useState(false);\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n\r\n if(!offer && location.search !== '') {\r\n let search = location.search.substring(1);\r\n offer = JSON.parse('{\"' + decodeURI(search).replace(/\"/g, '\\\\\"').replace(/&/g, '\",\"').replace(/=/g,'\":\"') + '\"}');\r\n\r\n sessionStorage.removeItem('deepLink');\r\n sessionStorage.setItem('alreadyDidDeep', true);\r\n \r\n orderType = offer.order_type;\r\n }\r\n\r\n let free = offer?.free;\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if(document.getElementById('bodyOnDemand')) {\r\n document.getElementById('bodyOnDemand').style.display = 'flex';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 1000);\r\n }\r\n\r\n const parseDate = (selectedDate, time) => {\r\n if (selectedDate && time) {\r\n let date = new Date(Date.parse(selectedDate) + time * 60 * 60 * 1000);\r\n\r\n return date.toISOString();\r\n } else {\r\n return null;\r\n }\r\n }\r\n\r\n const doGetCategory = async () => {\r\n try {\r\n await getCategory(setCategory, offer.category_id).then(() => cancelLoading());\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n const selectDate = async (date) => {\r\n setSelectedDate(date);\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n if(document.getElementById('bodyOnDemand')) {\r\n document.getElementById('bodyOnDemand').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => debounce(5000, doGetCategory()), 1500);\r\n\r\n let dates = [];\r\n\r\n let actualHour = new Date().getHours();\r\n\r\n for (let i = 1; i <= 30; i++) {\r\n let date = new Date();\r\n date.setDate(date.getDate() + i);\r\n\r\n if (0 !== date.getDay() && !(1 === i && ('residential' === orderType && actualHour >= 20))) {\r\n dates.push(Moment(date).format('YYYY-MM-DD'));\r\n }\r\n }\r\n\r\n setAllDates(dates);\r\n }\r\n\r\n return () => { isMounted = false; };\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n\r\n
\r\n\r\n
Escolha uma data \r\n\r\n
\r\n
\r\n {allDates.map((date, dateIndex) => {\r\n return (\r\n \r\n selectDate(date)} />\r\n
\r\n )\r\n })}\r\n \r\n
\r\n\r\n {selectedDate &&\r\n
\r\n
Selecione um período para ser atendido \r\n\r\n
\r\n\r\n {!free &&\r\n
\r\n }\r\n\r\n
\r\n
\r\n }\r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n );\r\n};\r\n\r\nexport default OnDemandOrderData;\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n padding-bottom: 50px;\r\n\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n`;\r\n\r\nexport const Content = styled.div`\r\n position: relative;\r\n padding-bottom: 150px;\r\n display: none;\r\n\r\n .container-buttons-service {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 20px 0;\r\n }\r\n\r\n .notFound {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: #707070;\r\n font-size: 1rem;\r\n margin: 50px 0;\r\n }\r\n\r\n .button-service {\r\n margin: 10px 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n padding-bottom: 40px;\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const ButtonServiceContainer = styled.div`\r\n position: relative;\r\n\r\n @media(max-width: 740px) {\r\n .more-information {\r\n left: 140px;\r\n }\r\n }\r\n\r\n @media(max-width: 639px) {\r\n .more-information {\r\n left: 115px;\r\n font-size: 0.813rem;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .more-information {\r\n left: 108px;\r\n font-size: 0.75rem;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n .more-information {\r\n left: 95px;\r\n font-size: 0.7rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const Container = styled.button`\r\n display: flex;\r\n position: relative;\r\n width: 700px;\r\n height: 160px;\r\n border-radius: 16px;\r\n border: 1px solid #FA9F2A;\r\n background: #FFF;\r\n margin: 0 10px;\r\n transition: .2s background;\r\n\r\n :hover {\r\n background: #F8F8F8;\r\n }\r\n\r\n .img-button {\r\n align-self: center;\r\n margin-left: 10px;\r\n }\r\n\r\n .img-button img {\r\n width: 140px;\r\n height: 140px;\r\n border-radius: 16px;\r\n border: 1px solid #f2f2f2;\r\n background-color: #f2f2f2;\r\n }\r\n\r\n .info-button {\r\n margin: 0 15px;\r\n color: #14213D;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .info-button h3 {\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n margin: 10px 0 5px;\r\n text-align: left;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n max-width: 38ch;\r\n }\r\n\r\n .info-button .subTitle {\r\n text-transform: uppercase;\r\n color: #C4C4C4;\r\n font-size: 0.9rem;\r\n margin: 10px 0 5px;\r\n text-align: left;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n width: 420px;\r\n height: 32px;\r\n }\r\n\r\n .more-info {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: left;\r\n margin: 3px 0;\r\n }\r\n\r\n .more-info > span {\r\n margin-left: 2px;\r\n }\r\n\r\n .icon-button {\r\n position: absolute;\r\n right: 0;\r\n }\r\n\r\n .icon-button .button-orange{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background: #FA9F2A;\r\n width: 90px;\r\n height: 159px;\r\n border-radius: 0 1rem 1rem 0;\r\n font-size: 1rem;\r\n }\r\n\r\n .icon-button .button-free {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n bottom: 0;\r\n right: 0px;\r\n font-size: 1rem;\r\n width: 110px;\r\n height: 45px;\r\n background: #E6860B;\r\n border-radius: 16px 0 16px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n width: 600px;\r\n height: 150px;\r\n\r\n .img-button img {\r\n width: 130px;\r\n height: 130px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 149px;\r\n width: 80px;\r\n }\r\n\r\n .icon-button .button-free {\r\n height: 40px;\r\n width: 100px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 350px;\r\n font-size: 1rem;\r\n margin-bottom: 0;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 360px;\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n @media(max-width: 740px) {\r\n width: 500px;\r\n height: 140px;\r\n\r\n .img-button img {\r\n width: 120px;\r\n height: 120px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 139px;\r\n width: 70px;\r\n font-size: 0.813rem;\r\n }\r\n\r\n .icon-button .button-free {\r\n height: 35px;\r\n width: 90px;\r\n font-size: 0.813rem;\r\n }\r\n\r\n .info-button h3 {\r\n width: 260px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 270px;\r\n font-size: 0.75rem;\r\n }\r\n }\r\n\r\n @media(max-width: 639px) {\r\n width: 435px;\r\n height: 120px;\r\n\r\n .img-button img {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 119px;\r\n width: 60px;\r\n }\r\n\r\n .icon-button .button-free {\r\n height: 30px;\r\n width: 80px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 230px;\r\n font-size: 0.8rem;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 230px;\r\n font-size: 0.7rem;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n width: 380px;\r\n height: 110px;\r\n\r\n .img-button img {\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 10px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 200px;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 200px;\r\n margin: 0;\r\n font-size: 0.65rem;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 109px;\r\n width: 50px;\r\n }\r\n\r\n .icon-button .button-free {\r\n height: 30px;\r\n width: 70px;\r\n }\r\n\r\n .icon-button .button-orange svg {\r\n width: 15px;\r\n }\r\n\r\n .icon-button .button-orange span {\r\n font-size: 0.7rem;\r\n }\r\n }\r\n\r\n @media(max-width: 440px) {\r\n width: 360px;\r\n\r\n .info-button h3 {\r\n width: 180px;\r\n font-size: 0.753rem;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 180px;\r\n height: 20px;\r\n font-size: 0.6rem;\r\n }\r\n }\r\n\r\n @media(max-width: 390px) {\r\n width: 330px;\r\n height: 100px;\r\n\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n\r\n .icon-button .button-orange{\r\n height: 99px;\r\n width: 50px;\r\n }\r\n\r\n .icon-button .button-free {\r\n height: 25px;\r\n width: 70px;\r\n font-size: 0.7rem;\r\n }\r\n\r\n .info-button h3 {\r\n width: 160px;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 150px;\r\n height: 20px;\r\n }\r\n }\r\n\r\n @media(max-width: 350px) {\r\n width: 300px;\r\n height: 100px;\r\n\r\n .img-button img {\r\n width: 80px;\r\n height: 80px;\r\n border-radius: 10px;\r\n }\r\n\r\n .info-button h3 {\r\n width: 130px;\r\n font-size: 0.713rem;\r\n }\r\n\r\n .info-button .subTitle {\r\n width: 130px;\r\n height: 20px;\r\n }\r\n }\r\n`;","import React, { useState } from \"react\";\r\nimport { Container, ButtonServiceContainer } from \"./styles\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { FiShoppingCart } from \"react-icons/fi\";\r\nimport { FaCalendar, FaSignInAlt } from \"react-icons/fa\";\r\nimport { toast } from \"react-toastify\";\r\nimport { getService } from \"../../api/service_offer\";\r\nimport { residentialAvailable } from \"../../api/customer\";\r\nimport { formatCurrencyBRL } from \"../../utils/utils\";\r\nimport ModalMoreInformation from \"../Modals/ModalMoreInformation\";\r\nimport ModalAddress from \"../Modals/ModalAddress\";\r\nimport ModalSite from \"../Modals/ModalSite\";\r\n\r\nconst ButtonLarge = (props) => {\r\n const history = useHistory();\r\n const offer = props.offer;\r\n const card = props.card;\r\n const setLoading = props.setLoading;\r\n const [selectedAddress, setSelectedAddress] = useState(props.address);\r\n const [selectAddress, setSelectAddress] = useState(false);\r\n const [selectAddressMessage, setSelectAddressMessage] = useState();\r\n const [service, setService] = useState();\r\n const [modalVisible, setModalVisible] = useState(false);\r\n const [modalSiteUrl, setModalSiteUrl] = useState(false);\r\n\r\n const navigateOffer = (offer, address) => {\r\n if (offer.service_id && card !== \"packages\") {\r\n if (offer.on_demand_order) {\r\n history.push(\"/onDemandOrderData\", {\r\n offer: offer,\r\n orderType: offer.order_type,\r\n address: address,\r\n });\r\n } else if (offer.express_order) {\r\n if (offer.slot_suggestion) {\r\n history.push(\"/completeExpressOrder\", {\r\n offer: offer\r\n });\r\n } else {\r\n toast.warn(\"Checkin indisponível\");\r\n }\r\n } else {\r\n if (offer.site_url && offer.site_url.length > 0) {\r\n setModalSiteUrl(true);\r\n } else {\r\n history.push(\"/slotList\", {\r\n offer: offer,\r\n orderType: offer.order_type,\r\n address: address,\r\n });\r\n }\r\n }\r\n } else if (card === 'packages') {\r\n history.push(\"/packageCheckout\", {\r\n pack: offer,\r\n });\r\n } else {\r\n history.push(\"/signatureCheckout\", {\r\n signaturePlan: offer,\r\n });\r\n }\r\n };\r\n\r\n const selectOffer = (offer, address) => {\r\n setSelectAddressMessage(\"\");\r\n\r\n if (\r\n \"residential\" === offer.order_type &&\r\n !address &&\r\n card !== \"packages\"\r\n ) {\r\n setSelectAddress(true);\r\n return;\r\n }\r\n\r\n navigateOffer(offer, address);\r\n };\r\n\r\n const afterSelectAddress = async (address) => {\r\n try {\r\n let available = await residentialAvailable(address.zipCode);\r\n\r\n if (available.available) {\r\n setSelectAddress(false);\r\n\r\n navigateOffer(offer, address);\r\n setSelectAddressMessage(\"\");\r\n } else {\r\n setSelectAddressMessage(\r\n \"Serviço indisponível no endereço selecionado\"\r\n );\r\n }\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n };\r\n\r\n const openServiceModal = async () => {\r\n try {\r\n setLoading(true);\r\n if (card !== \"packages\") {\r\n await getService(\r\n setService,\r\n offer.category_id,\r\n offer.service_id\r\n );\r\n } else {\r\n setService(offer);\r\n }\r\n\r\n setLoading(false);\r\n\r\n setModalVisible(true);\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message);\r\n }\r\n };\r\n\r\n return (\r\n \r\n
afterSelectAddress(address)}\r\n warningMessage={selectAddressMessage}\r\n checkResidentialAvailability={true}\r\n />\r\n\r\n setModalVisible(val)}\r\n title={service?.name}\r\n body={service?.description}\r\n />\r\n\r\n setModalSiteUrl(val)}\r\n site={offer.site_url}\r\n />\r\n\r\n \r\n \r\n selectOffer(\r\n offer,\r\n selectedAddress,\r\n setSelectAddress,\r\n setSelectAddressMessage\r\n )\r\n }\r\n >\r\n \r\n
\r\n
\r\n {card !== \"packages\" && card !== 'subscriptions' ? (\r\n
{offer.title} \r\n ) : (\r\n
{offer.name} \r\n )}\r\n
\r\n \r\n {offer.description}\r\n \r\n
\r\n
\r\n {card === \"packages\" || 'subscriptions' ? (\r\n
\r\n comprar \r\n
\r\n ) : offer.schedulable ? (\r\n
\r\n agendar \r\n
\r\n ) : (\r\n
\r\n acessar \r\n
\r\n )}\r\n\r\n {(offer.schedulable || card === \"packages\" || \"subscriptions\") && (\r\n
\r\n \r\n {offer.estimate_required\r\n ? \"orçar\"\r\n : offer.free\r\n ? \"grátis\"\r\n : offer.express_order\r\n ? \"checkin\": formatCurrencyBRL(offer.price)}\r\n \r\n
\r\n )}\r\n
\r\n + informações\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonServiceList;","import React, { useEffect, useState } from \"react\";\r\nimport { getOffersByCategory } from \"../../../api/service_offer\";\r\nimport ServiceBanner from \"../components/ServiceBanner\";\r\nimport { toast } from \"react-toastify\";\r\nimport { Container, Content } from './styles';\r\nimport Header from \"../../../components/Header\";\r\nimport Footer from \"../../../components/Footer\";\r\nimport ButtonLarge from \"../../../components/ButtonLarge\";\r\nimport TabButton from \"../../../components/TabButton\";\r\nimport LoaderSpinner from '../../../components/LoaderSpinner';\r\nimport SkeletonServiceList from \"./SkeletonServiceList\";\r\nimport { debounce } from 'throttle-debounce';\r\nimport { getPackageList } from \"../../../api/service_packages\";\r\nimport { getSignaturesByCategory } from \"../../../api/requests/orders/signature/signaturePlanApi\";\r\n\r\nconst ServiceList = ({ location }) => {\r\n const [loading, setLoading] = useState(false);\r\n const address = location?.state?.address;\r\n let offer = location?.state?.offer;\r\n let orderType = location?.state?.orderType;\r\n const [allServices, setAllServices] = useState([]);\r\n const [allPackages, setAllPackages] = useState([]);\r\n const [allSubscriptions, setAllSubscriptions] = useState([]);\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n\r\n if (!offer && location.search !== '') {\r\n let search = location.search.substring(1);\r\n offer = JSON.parse('{\"' + decodeURI(search).replace(/\"/g, '\\\\\"').replace(/&/g, '\",\"').replace(/=/g, '\":\"') + '\"}');\r\n\r\n sessionStorage.removeItem('deepLink');\r\n sessionStorage.setItem('alreadyDidDeep', true);\r\n\r\n orderType = offer.order_type;\r\n }\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if (document.getElementById('bodyService')) {\r\n document.getElementById('bodyService').style.display = 'block';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 1000);\r\n }\r\n\r\n const searchOffers = async () => {\r\n try {\r\n await getOffersByCategory(setAllServices, offer.order_type, offer.category_id);\r\n await getPackageList(offer.category_id, setAllPackages);\r\n await getSignaturesByCategory(setAllSubscriptions, offer.category_id);\r\n\r\n cancelLoading();\r\n } catch (error) {\r\n toast.error(error.message);\r\n setAllServices([]);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n if (document.getElementById('bodyService')) {\r\n document.getElementById('bodyService').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => debounce(5000, searchOffers()), 1500);\r\n }\r\n\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n \r\n Nenhum serviço disponível no momento\r\n \r\n )}\r\n\r\n \r\n {allServices.map((service, serviceIndex) => {\r\n if (offer.begin_at) {\r\n service.begin_at = offer.begin_at;\r\n }\r\n\r\n if (offer.job_day_id) {\r\n service.job_day_id = offer.job_day_id;\r\n }\r\n\r\n return (\r\n
\r\n
\r\n );\r\n })}\r\n\r\n {allPackages.length > 0 &&\r\n allPackages.map((pack, packIndex) => {\r\n return (\r\n
\r\n
\r\n )\r\n })}\r\n \r\n {allSubscriptions.length > 0 &&\r\n allSubscriptions.map(subscription => {\r\n return (\r\n
\r\n
\r\n )\r\n })}\r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ServiceList;\r\n","import styled from 'styled-components';\r\n\r\nexport const ButtonHour = styled.button`\r\n background: none;\r\n display: flex;\r\n align-items: center;\r\n\r\n .time-scroll-button {\r\n width: 60px;\r\n border-right: 1px solid #EEEEEE;\r\n padding: 5px 0;\r\n }\r\n\r\n .wait-list {\r\n width: 75px; \r\n border-right: 0; \r\n margin-right: 10px;\r\n }\r\n\r\n .container-hour {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center; \r\n align-items: center;\r\n }\r\n\r\n .wait-list-text {\r\n font-size: 1rem; \r\n color: #FA9F2A; \r\n font-weight: 500;\r\n text-align: center;\r\n }\r\n\r\n .time-text {\r\n font-size: 1.2rem;\r\n color: #FA9F2A;\r\n font-weight: 500;\r\n }\r\n\r\n .wait-list-text.wait-list-text-selected,\r\n .minute-text.minute-text-selected,\r\n .time-text.time-text-selected {\r\n font-weight: 700;\r\n color: #14213D;\r\n }\r\n\r\n .minute-text {\r\n font-size: 1rem;\r\n color: #FA9F2A;\r\n margin-top: -5px;\r\n font-weight: 500;\r\n }\r\n\r\n .container-hour-minute {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n .time-scroll-button {\r\n width: 52px;\r\n }\r\n\r\n .wait-list-text {\r\n font-size: 0.9rem; \r\n }\r\n\r\n .time-text {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .minute-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .wait-list-text {\r\n font-size: 0.8rem; \r\n }\r\n\r\n .time-text {\r\n font-size: 1rem;\r\n }\r\n\r\n .minute-text {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport Moment from 'moment-timezone';\r\nimport { ButtonHour } from './styles';\r\n\r\nconst SlotTimeButton = (props) => {\r\n const doSelectTimeSlot = props.doSelectTimeSlot;\r\n const slotTime = props.slotTime;\r\n const selected = props.selected;\r\n\r\n let time = Moment(slotTime.begin_at).tz(\"America/Sao_Paulo\").format('HH');\r\n let minute = Moment(slotTime.begin_at).tz(\"America/Sao_Paulo\").format('mm');\r\n\r\n const waitingList = time === '00' && minute === '00';\r\n\r\n return (\r\n \r\n \r\n
\r\n {waitingList ?\r\n
lista de encaixe \r\n :\r\n
\r\n {time} \r\n {minute} \r\n
\r\n }\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default SlotTimeButton;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 10px;\r\n width: 100%;\r\n margin-bottom: 30px;\r\n\r\n .finish-order-button {\r\n background-color: #FA9F2A;\r\n width: 400px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 20px;\r\n padding: 15px 0;\r\n color: #fff;\r\n font-size: 1.1rem;\r\n }\r\n\r\n @media(max-width: 450px) {\r\n .finish-order-button {\r\n width: 300px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { createOrder } from '../../../../../api/service_orders';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Container } from './styles';\r\n\r\nconst FinishOrderButton = (props) => {\r\n const offer = props.offer;\r\n const orderType = props.orderType;\r\n const hourBegin = props.hourBegin;\r\n const slot = props.slot;\r\n const paymentMethod = props.paymentMethod;\r\n const paymentSignature = props.paymentSignature;\r\n const serviceId = props.serviceId;\r\n const cardId = props.cardId;\r\n const discountCouponId = props.discountCouponId;\r\n const addressId = props.addressId;\r\n const setLoading = props.setLoading;\r\n const walletSelected = props.walletSelected;\r\n const free = props.free;\r\n const note = props.description;\r\n const navigation = useHistory();\r\n\r\n const create = async () => {\r\n try {\r\n if (!paymentMethod && !free) {\r\n toast.warn(\"Favor selecionar a forma de pagamento\");\r\n return;\r\n }\r\n\r\n if (paymentMethod === 'payroll' && !paymentSignature) {\r\n toast.warn(\"Favor adicione uma assinatura\");\r\n return;\r\n }\r\n\r\n setLoading(true);\r\n\r\n const order = await createOrder(hourBegin, slot.job_day_id, (free ? 'cash' : paymentMethod), paymentSignature, serviceId, cardId, discountCouponId, addressId, offer.order_type, walletSelected, note);\r\n\r\n setLoading(false);\r\n\r\n navigation.push(\"/completeOrder\", {\r\n orderType: orderType,\r\n attendanceLocale: order.attendance_locale,\r\n slot: slot,\r\n hourBegin: hourBegin,\r\n offer: offer,\r\n paymentMethod: paymentMethod,\r\n paymentSignature: paymentSignature,\r\n pixCode: order.pix_qr_code,\r\n paymentExpirationMinutes: order.payment_expiration_minutes,\r\n nextSuggestion: order?.next_date_suggestion,\r\n serviceId: serviceId,\r\n cardId: cardId,\r\n addressId: addressId,\r\n walletSelected: false,\r\n note: note,\r\n order\r\n });\r\n\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message)\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n concluir pedido \r\n \r\n \r\n )\r\n}\r\n\r\nexport default FinishOrderButton;","import styled from \"styled-components\";\r\n\r\nexport const Container = styled.div`\r\n .slot-body-content {\r\n display: none;\r\n }\r\n\r\n .choose-date {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .choose-one-date {\r\n text-align: center; \r\n color: #707070; \r\n font-size: 1.1rem;\r\n }\r\n\r\n .not-found-text {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .notFound {\r\n text-align: center; \r\n color: #707070; \r\n font-size: 1rem;\r\n }\r\n\r\n .notFoundVideo {\r\n color: #14213D;\r\n text-align: center;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .container-dates-view {\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .payment-container{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .payment-view-container {\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: -30px;\r\n }\r\n\r\n .not-found-view {\r\n margin-top: 30px;\r\n }\r\n\r\n .button-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n .background-body {\r\n padding-bottom: 150px;\r\n }\r\n\r\n .container-slot-component {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .not-found-view,\r\n .sessions-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .not-found-video,\r\n .text-title-session {\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n text-transform: uppercase;\r\n }\r\n\r\n .button-perfil {\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n background: none;\r\n }\r\n\r\n .container-perfil {\r\n background: #FFF;\r\n position: absolute;\r\n padding: 0 20px;\r\n bottom: 0;\r\n right: 0;\r\n height: 35px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 9px 0 18px 0;\r\n }\r\n \r\n .text-perfil {\r\n color: #E6860B;\r\n font-size: 1.2rem;\r\n font-weight: 300;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n padding-bottom: 50px;\r\n\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 850px) {\r\n .background-body {\r\n padding-bottom: 50px;\r\n }\r\n }\r\n\r\n @media(max-width: 620px) {\r\n .not-found-video,\r\n .text-title-session {\r\n font-size: 1rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const ButtonVideoSection = styled.button`\r\n border: 1px solid #FA9F2A;\r\n border-radius: 18px;\r\n padding: 10px 20px;\r\n background-color: #FFF;\r\n text-align: center;\r\n text-transform: lowercase;\r\n color: #FA9F2A;\r\n font-size: 1rem;\r\n margin: 20px 0;\r\n transition: .2s background;\r\n\r\n :hover {\r\n background-color: rgba(250, 159, 42, 0.1);\r\n }\r\n`;\r\n\r\nexport const DatesViewContainer = styled.div`\r\n margin-top: 5px;\r\n background: #f1f1f1;\r\n width: 700px;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n margin: 15px 20px 30px;\r\n border-radius: 20px 20px 5px 5px;\r\n overflow: auto;\r\n\r\n ::-webkit-scrollbar-track {\r\n background-color: #f1f1f1;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n ::-webkit-scrollbar {\r\n height: 10px;\r\n background: #f8f8f8;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #dad7d7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n ::-webkit-scrollbar-corner {\r\n border-radius: 20px;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n width: 500px;\r\n }\r\n\r\n @media(max-width: 550px) {\r\n width: 400px;\r\n }\r\n\r\n @media(max-width: 450px) {\r\n width: 350px;\r\n }\r\n\r\n @media(max-width: 395px) {\r\n width: 300px;\r\n }\r\n\r\n @media(max-width: 325px) {\r\n width: 280px;\r\n }\r\n`;\r\n\r\nexport const SlotView = styled.div`\r\n width: 700px;\r\n border: 1px solid #F7F7F7;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n align-self: center;\r\n margin-top: 20px;\r\n border-radius: 18px;\r\n padding: 5px 0;\r\n background: #fff;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n\r\n .slot-professional-img {\r\n width: 130px;\r\n height: 130px;\r\n border-radius: 18px;\r\n margin-left: 5px;\r\n }\r\n\r\n .slot-price-view {\r\n position: absolute;\r\n border: 1px solid #14213D;\r\n border-radius: 17px 17px 0 17px;\r\n top: 0;\r\n right: 0;\r\n margin-left: 26px;\r\n background-color: #FFF;\r\n color: #14213D;\r\n padding: 5px 10px;\r\n font-size: 0.9rem;\r\n text-align: center;\r\n }\r\n\r\n .slot-professional-view {\r\n margin-left: 10px;\r\n margin-top: 5px;\r\n }\r\n\r\n .slot-info-professional {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .slot-professional-name {\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n width: 350px;\r\n text-align: left;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n margin-right: 20px;\r\n margin-left: 10px;\r\n }\r\n\r\n .slot-info-hour {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n margin-left: 10px;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n width: 500px;\r\n\r\n .slot-professional-name {\r\n width: 180px;\r\n font-size: 0.95rem;\r\n }\r\n\r\n .professional-rating-view svg {\r\n width: 12px;\r\n }\r\n\r\n .slot-info-hour {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .slot-professional-img {\r\n width: 110px;\r\n height: 110px;\r\n }\r\n }\r\n\r\n @media (max-width: 550px) {\r\n width: 400px;\r\n\r\n .slot-professional-name {\r\n width: 100px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .professional-rating-view svg {\r\n width: 11px;\r\n }\r\n\r\n .slot-info-hour {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .slot-professional-img {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media (max-width: 450px) {\r\n width: 350px;\r\n\r\n .slot-professional-name {\r\n width: 45px;\r\n margin-right: 10px;\r\n }\r\n\r\n .professional-rating-view svg {\r\n width: 11px;\r\n }\r\n\r\n .slot-info-hour {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n width: 300px;\r\n\r\n .slot-professional-name {\r\n width: 45px;\r\n margin-right: 10px;\r\n }\r\n\r\n .slot-professional-img {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .professional-rating-view svg {\r\n width: 11px;\r\n }\r\n\r\n .slot-info-hour {\r\n font-size: 0.8rem;\r\n }\r\n } \r\n`;\r\n\r\nexport const SlotTimeView = styled.div`\r\n width: 550px;\r\n overflow: auto;\r\n display: flex;\r\n background: #f8f8f8;\r\n border-radius: 16px;\r\n padding: 5px;\r\n margin-top: 10px;\r\n\r\n ::-webkit-scrollbar-track {\r\n background-color: #f8f8f8;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n ::-webkit-scrollbar {\r\n height: 10px;\r\n background: #f8f8f8;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n\r\n ::-webkit-scrollbar-thumb {\r\n background: #dad7d7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n ::-webkit-scrollbar-corner {\r\n border-radius: 20px;\r\n }\r\n\r\n @media (max-width: 870px) {\r\n width: 360px;\r\n padding: 3px;\r\n margin-top: 5px;\r\n }\r\n\r\n @media (max-width: 550px) {\r\n width: 280px;\r\n margin-top: 3px;\r\n }\r\n\r\n @media (max-width: 450px) {\r\n width: 230px;\r\n }\r\n\r\n @media (max-width: 375px) {\r\n width: 200px;\r\n }\r\n`;\r\n\r\nexport const TextAreaEnabled = styled.textarea`\r\n height: 10rem;\r\n width: 60%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #f1f1f1;\r\n color: #14213D;\r\n border: 2px solid #FA9F2A;\r\n margin-bottom: 2rem;\r\n border-radius: 0.5rem;\r\n padding: 1rem;\r\n`;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .banner-skt {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .banner-skeleton {\r\n width: 1080px;\r\n height: 200px;\r\n }\r\n\r\n @media(max-width: 1070px) {\r\n .banner-skeleton {\r\n width: 1070px;\r\n }\r\n }\r\n\r\n @media(max-width: 1050px) {\r\n .title-skeleton {\r\n width: 1040px;\r\n }\r\n }\r\n\r\n @media(max-width: 1030px) {\r\n .banner-skeleton {\r\n width: 1030px;\r\n }\r\n }\r\n\r\n @media(max-width: 1000px) {\r\n .banner-skeleton {\r\n width: 980px;\r\n }\r\n }\r\n\r\n @media(max-width: 970px) {\r\n .banner-skeleton {\r\n width: 950px;\r\n }\r\n }\r\n\r\n @media(max-width: 940px) {\r\n .banner-skeleton {\r\n width: 920px;\r\n }\r\n }\r\n\r\n @media(max-width: 890px) {\r\n .banner-skeleton {\r\n width: 890px;\r\n }\r\n }\r\n\r\n @media(max-width: 850px) {\r\n .banner-skeleton {\r\n width: 850px;\r\n }\r\n }\r\n\r\n @media(max-width: 820px) {\r\n .banner-skeleton {\r\n width: 810px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .banner-skeleton {\r\n width: 770px;\r\n }\r\n }\r\n\r\n @media(max-width: 720px) {\r\n .banner-skeleton {\r\n width: 710px;\r\n }\r\n }\r\n\r\n @media(max-width: 660px) {\r\n .banner-skeleton {\r\n width: 650px;\r\n }\r\n }\r\n\r\n @media(max-width: 600px) {\r\n .banner-skeleton {\r\n width: 590px;\r\n }\r\n }\r\n\r\n @media(max-width: 550px) {\r\n .banner-skeleton {\r\n width: 540px;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .banner-skeleton {\r\n width: 480px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .banner-skeleton {\r\n width: 420px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .banner-skeleton {\r\n width: 370px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .banner-skeleton {\r\n width: 310px;\r\n }\r\n }\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n .today-skeleton {\r\n width: 600px;\r\n height: 160px;\r\n border-radius: 20px;\r\n margin: 20px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 500px;\r\n height: 140px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 400px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 400px) {\r\n .today-skeleton {\r\n width: 350px;\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .today-skeleton {\r\n width: 300px;\r\n height: 100px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonSlotList = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonSlotList;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.button`\r\n display: flex;\r\n width: 800px;\r\n background-color: #FFF;\r\n border: 1px solid #F2F2F2;\r\n border-radius: 20px;\r\n box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);\r\n padding: 10px;\r\n position: relative;\r\n transition: .2s background;\r\n\r\n :hover {\r\n background-color: #F7F7F7;\r\n }\r\n\r\n :hover .view-button {\r\n background-color: #E6860B;\r\n }\r\n\r\n .button-view img{\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .button-view {\r\n margin: 0 20px 0 0;\r\n }\r\n\r\n .container-info-about {\r\n display: flex;\r\n flex-direction: column;\r\n color: #14213D;\r\n text-align: left;\r\n }\r\n\r\n .button-title {\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n max-width: 550px;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-transform: uppercase;\r\n }\r\n\r\n .recorded-at-view {\r\n font-size: 1rem;\r\n margin-top: 10px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .recorded-at-view span {\r\n margin-left: 5px;\r\n }\r\n\r\n .view-button {\r\n position: absolute;\r\n background-color: #FA9F2A;\r\n right: -2px;\r\n top: -2px;\r\n bottom: -2px;\r\n border-radius: 0 20px 20px 0;\r\n width: 80px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1rem;\r\n transition: .2s background;\r\n }\r\n\r\n @media(max-width: 850px) {\r\n width: 600px;\r\n\r\n .button-title {\r\n width: 350px;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n width: 500px;\r\n\r\n .button-title {\r\n width: 320px;\r\n }\r\n\r\n .button-view img {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .button-view {\r\n margin: 0 10px 0 0;\r\n }\r\n\r\n .view-button {\r\n width: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n width: 400px;\r\n padding: 5px;\r\n\r\n .button-title {\r\n width: 230px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n width: 350px;\r\n\r\n .button-title {\r\n width: 200px;\r\n }\r\n\r\n .view-button {\r\n width: 45px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n width: 300px;\r\n\r\n .button-title {\r\n width: 150px;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { videoClick } from '../../../../../api/service_offer'\r\nimport Moment from 'moment-timezone';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport { Container } from './styles';\r\nimport { FiCamera } from 'react-icons/fi';\r\n\r\nconst VideoButton = (props) => {\r\n const category = props.category;\r\n const service = props.service;\r\n const offer = props.offer;\r\n const video = props.video;\r\n const navigation = useHistory();\r\n const setLoading = props.setLoading;\r\n\r\n const selectVideo = async () => {\r\n try {\r\n setLoading(true);\r\n \r\n await videoClick(category.id, service.id, video.id);\r\n \r\n setLoading(false);\r\n\r\n navigation.push(\"/videoView\", { category: category, service: service, video: video, offer: offer });\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n if (video.title) {\r\n return (\r\n \r\n \r\n
\r\n
\r\n
\r\n {video.title} \r\n
\r\n\r\n
\r\n gravado {Moment(video.recorded_at).format('DD/MM')} \r\n
\r\n
\r\n Ver \r\n
\r\n \r\n )\r\n } else {\r\n return
;\r\n }\r\n}\r\n\r\nexport default VideoButton;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin: 20px 0 40px;\r\n\r\n .video-container {\r\n margin: 20px 0;\r\n }\r\n\r\n @media(max-width: 840px) {\r\n margin: 20px 0 30px;\r\n\r\n .video-container {\r\n margin: 10px 0;\r\n } \r\n }\r\n`;","import React from 'react';\r\nimport VideoButton from '../VideoButton';\r\nimport { Container } from './styles';\r\n\r\nconst VideosGrid = (props) => {\r\n\r\n const category = props.category;\r\n const service = props.service;\r\n const offer = props.offer;\r\n const setLoading = props.setLoading;\r\n\r\n let videosCount = service.videos.length;\r\n\r\n const columns = 3;\r\n const rows = Math.floor(videosCount / columns);\r\n const lastRowElements = videosCount - rows * columns;\r\n\r\n let tempVideos = [];\r\n tempVideos = tempVideos.concat(service.videos);\r\n\r\n for (let i = 0; i < (columns - lastRowElements); i++) {\r\n tempVideos.push({ id: 'empty-' + i, });\r\n }\r\n\r\n return (\r\n \r\n {tempVideos.map((video, videoIndex) =>\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default VideosGrid;\r\n","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalProfessionalPerfil = ({ showModalProfessional, setShowModalProfessional, message }) => {\r\n const messageAdjusted = message.replace(/</g, '<').replace(/>/g, '>');\r\n \r\n return (\r\n \r\n
setShowModalProfessional(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content professional-perfil\"\r\n ariaHideApp={false}\r\n >\r\n \r\n perfil do \r\n PROFISSIONAL \r\n
\r\n\r\n \r\n\r\n setShowModalProfessional(false)}>\r\n fechar \r\n \r\n \r\n \r\n { slot.professional.profile !== '' && setShowModalPerfil(true); setPerfil(slot.professional.profile) }}\r\n >\r\n \r\n perfil \r\n
\r\n }\r\n \r\n\r\n \r\n {offer.estimate_required ? (\r\n orçar \r\n )\r\n : (\r\n {formatCurrencyBRL(offer.price)} \r\n )}\r\n
\r\n\r\n \r\n
\r\n
{slot.professional.name} \r\n\r\n
\r\n
}\r\n fullSymbol={
}\r\n start={0}\r\n stop={5}\r\n fractions={2}\r\n placeholderRating={slot.professional.rating}\r\n placeholderSymbol={
}\r\n readonly\r\n />\r\n
\r\n
\r\n\r\n
Horários disponíveis {slot.attendance_locale ? (' - ' + slot.attendance_locale) : ''} \r\n\r\n
\r\n {slot.slots.map((slotTime, slotTimeIndex) => {\r\n return (\r\n \r\n selectSlot(slot, offer.category_id, offer.service_id, slotTime.begin_at, null)}\r\n selected={slotTime.begin_at === selectedHourBegin}\r\n />\r\n
\r\n );\r\n })}\r\n \r\n\r\n
\r\n )\r\n }\r\n });\r\n\r\n return (\r\n \r\n \r\n setShowModalPerfil(val)}\r\n showModalProfessional={showModalPerfil}\r\n />\r\n }\r\n\r\n \r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n
\r\n\r\n {allDates.length > 0 &&\r\n
\r\n
Escolha uma data \r\n\r\n
\r\n
\r\n {allDates.map((date, dateIndex) => {\r\n return (\r\n \r\n selectDate(date.date)}\r\n />\r\n
\r\n )\r\n })}\r\n \r\n
\r\n
\r\n }\r\n\r\n {allDates.length === 0 && (!service || !service.videos || service.videos.length === 0) &&\r\n
\r\n Nenhum profissional disponível no momento \r\n
\r\n }\r\n\r\n {selectedDate &&\r\n
\r\n {slotComponents}\r\n
\r\n }\r\n\r\n {selectedHourBegin &&\r\n
\r\n {!free &&\r\n
\r\n }\r\n\r\n {offer?.note_enabled === true &&\r\n
setDescription(e.target.value)}\r\n numberOfLines={5}\r\n />\r\n }\r\n\r\n \r\n }\r\n\r\n {service && service.videos && service.videos.length > 0 &&\r\n
\r\n {allDates.length > 0 &&\r\n
\r\n
\r\n NÃO ENCONTROU O QUE PROCURAVA? \r\n
\r\n\r\n
\r\n \r\n veja nossas sessões gravadas \r\n \r\n
\r\n
\r\n }\r\n\r\n {allDates.length === 0 &&\r\n
\r\n
\r\n veja nossas sessões gravadas \r\n
\r\n
\r\n
\r\n }\r\n
\r\n }\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SlotList;\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-new-address {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 50px;\r\n padding-bottom: 200px;\r\n flex-direction: column;\r\n }\r\n\r\n .subtitle {\r\n color: #707070;\r\n font-size: 1.3rem;\r\n margin-bottom: 40px; \r\n }\r\n\r\n .input-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .container-cep {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .input-inactive {\r\n width: 600px;\r\n padding: 5px 70px;\r\n text-align: center;\r\n background-color: #C7C7C7;\r\n border: 1px solid #CFCFCF;\r\n border-radius: 20px;\r\n height: 60px;\r\n font-size: 1rem;\r\n color: #707070;\r\n margin: 10px 0;\r\n }\r\n\r\n .input-one {\r\n width: 600px;\r\n padding: 5px 70px;\r\n text-align: center;\r\n background-color: #FFF;\r\n border: 1px solid #CFCFCF;\r\n border-radius: 20px;\r\n height: 60px;\r\n font-size: 1rem;\r\n color: #707070;\r\n margin: 10px 0;\r\n }\r\n\r\n .input-one:focus {\r\n border: 1px solid #FA9F2A;\r\n }\r\n\r\n .buttom-disabled {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n right: 15px;\r\n top: 23px;\r\n border: 1px solid #CFCFCF;\r\n border-radius: 100%;\r\n padding: 5px;\r\n background: none;\r\n }\r\n\r\n .border-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n right: 15px;\r\n top: 23px;\r\n border: 1px solid #FA9F2A;\r\n border-radius: 100%;\r\n padding: 5px;\r\n background: none;\r\n }\r\n\r\n .forgot-cep {\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n font-weight: 300;\r\n font-size: 0.9rem;\r\n text-align: center;\r\n }\r\n\r\n .input {\r\n position: relative;\r\n display: flex;\r\n margin: 8px 0;\r\n width: 600px;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .input-second {\r\n width: 600px;\r\n padding: 5px 0;\r\n text-align: center;\r\n background-color: #C7C7C7;\r\n border: 1px solid #CFCFCF;\r\n height: 60px;\r\n border-radius: 20px;\r\n color: #707070;\r\n margin: 10px 0;\r\n font-size: 1rem;\r\n }\r\n\r\n .border-icon-input {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n right: 15px;\r\n top: 26px;\r\n border: 1px solid #FA9F2A;\r\n border-radius: 100%;\r\n padding: 5px;\r\n }\r\n\r\n input::placeholder {\r\n color: #C7C7C7;\r\n opacity: 1;\r\n }\r\n\r\n .input-second::placeholder {\r\n color: #707070;\r\n opacity: 1;\r\n }\r\n\r\n input:-ms-input-placeholder {\r\n color: #C7C7C7;\r\n }\r\n\r\n .input-second:-ms-input-placeholder {\r\n color: #707070;\r\n }\r\n\r\n input::-ms-input-placeholder {\r\n color: #C7C7C7;\r\n }\r\n\r\n .input-second::-ms-input-placeholder {\r\n color: #707070;\r\n }\r\n\r\n .button-new-address {\r\n align-self: center;\r\n border-radius: 19px;\r\n padding: 15px 0;\r\n font-size: 1.1rem;\r\n margin: 20px 0 50px;\r\n width: 500px;\r\n background-color: #FA9F2A;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .input-second,\r\n .input,\r\n .input-inactive,\r\n .input-one {\r\n width: 500px;\r\n }\r\n\r\n .button-new-address {\r\n width: 400px;\r\n }\r\n }\r\n\r\n @media(max-width: 540px) {\r\n .input-second,\r\n .input,\r\n .input-inactive,\r\n .input-one {\r\n width: 400px;\r\n }\r\n\r\n .subtitle {\r\n font-size: 1.1rem;\r\n text-align: center;\r\n }\r\n\r\n .border-icon svg,\r\n .buttom-disabled svg {\r\n width: 15px;\r\n }\r\n\r\n .border-icon,\r\n .buttom-disabled {\r\n padding: 3px 6px;\r\n top: 25px;\r\n }\r\n\r\n .input-second, \r\n .input-one {\r\n font-size: 0.95rem;\r\n }\r\n\r\n .button-new-address {\r\n width: 300px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .input-second,\r\n .input,\r\n .input-inactive,\r\n .input-one {\r\n width: 300px;\r\n }\r\n\r\n .input-second, \r\n .input-one {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .subtitle {\r\n font-size: 1rem;\r\n }\r\n\r\n .input-one {\r\n padding: 5px 50px;\r\n }\r\n\r\n .button-new-address {\r\n width: 250px;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { FaArrowLeft, FaSearch } from 'react-icons/fa';\r\nimport { makeNewAddress } from '../../../../../api/customer';\r\nimport { findZipCode } from '../../../../../api/customer'\r\nimport { useHistory } from 'react-router-dom';\r\nimport { toast } from 'react-toastify';\r\nimport Header from '../../../../../components/Header';\r\nimport { Container } from './styles';\r\nimport LoaderSpinner from '../../../../../components/LoaderSpinner';\r\nimport InputMask from 'react-input-mask';\r\nimport Footer from '../../../../../components/Footer';\r\nimport TabButton from '../../../../../components/TabButton';\r\n\r\nconst NewAddress = ({ location }) => {\r\n const data = location.state ? location.state?.data : {};\r\n const [loading, setLoading] = useState(false);\r\n const [zipCode, setZipCode] = useState(data?.zipCode || '');\r\n const [st, setSt] = useState(data?.state || '');\r\n const [city, setCity] = useState(data?.cityName || '');\r\n const [cityCode, setCityCode] = useState(data?.cityCode || '');\r\n const [district, setDistrict] = useState(data?.district || '');\r\n const [address, setAddress] = useState(data?.address || '');\r\n const [ok, setOk] = useState(false);\r\n const [number, setNumber] = useState('');\r\n const [complement, setComplement] = useState('');\r\n const [nickAddress, setNickAddress] = useState('');\r\n const navigation = useHistory();\r\n\r\n const verifyAddress = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n if (zipCode !== '') {\r\n let data = await findZipCode(zipCode.match(/\\d/g).join(\"\"));\r\n\r\n setSt(data.state);\r\n setCity(data.cityName);\r\n setCityCode(data.cityCode);\r\n setDistrict(data.district);\r\n setAddress(data.address);\r\n setOk(true);\r\n }\r\n\r\n setLoading(false);\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message, { autoClose: 3000 });\r\n }\r\n }\r\n\r\n const setNewAddress = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n await makeNewAddress(nickAddress, zipCode, st, address, complement, number, district, city, cityCode);\r\n\r\n toast.success(\"Endereço cadastrado com sucesso\", { autoClose: 3000 });\r\n\r\n setLoading(false);\r\n\r\n navigation.push(\"/addresses\");\r\n\r\n } catch (error) {\r\n setLoading(false);\r\n\r\n let errorMessage = error.message;\r\n let validationMessages = [];\r\n\r\n if (errorMessage.indexOf('zipCode') >= 0) {\r\n validationMessages.push(\"CEP\");\r\n }\r\n\r\n if (errorMessage.indexOf('district') >= 0) {\r\n validationMessages.push(\"Bairro\");\r\n }\r\n\r\n if (errorMessage.indexOf('number') >= 0) {\r\n validationMessages.push(\"Número\");\r\n }\r\n\r\n if (errorMessage.indexOf('address') >= 0) {\r\n validationMessages.push(\"Rua\");\r\n }\r\n\r\n if (errorMessage.indexOf('description') >= 0) {\r\n validationMessages.push(\"Apelido\");\r\n }\r\n\r\n if (validationMessages.length > 0) {\r\n toast.warn(\"Favor preencher os campos obrigatórios:\\n- \" + validationMessages.join(\"\\n- \"), { autoClose: 5000 });\r\n } else {\r\n toast.error(\"Erro ao realizar cadastro de: \" + errorMessage)\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n
\r\n {(ok || data !== '') ?\r\n
Agora é só terminar de cadastrar seu endereço \r\n :\r\n
Insira um CEP para validação \r\n }\r\n\r\n
\r\n
\r\n
setZipCode(e.target.value)}\r\n disabled={data?.zipCode ? true : false}\r\n mask=\"99999-999\"\r\n maskChar=\"\"\r\n />\r\n\r\n {!data?.zipCode &&\r\n \r\n
\r\n \r\n não sei meu cep \r\n \r\n \r\n\r\n
\r\n
\r\n setCity(e.target.value)}\r\n />\r\n
\r\n\r\n
\r\n setCity(e.target.value)}\r\n />\r\n
\r\n\r\n
\r\n
setDistrict(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n
setAddress(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n
setNumber(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n
setComplement(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n
setNickAddress(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n
\r\n\r\n
\r\n cadastrar endereço \r\n \r\n \r\n
\r\n\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default NewAddress;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n .container-address {\r\n display: flex;\r\n align-items: center;\r\n background-color: #FFFFFF;\r\n border: 1px solid #F4F4F4;\r\n padding: 40px;\r\n margin: 10px;\r\n border-radius: 20px;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n width: 600px;\r\n }\r\n\r\n .about-address {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n margin-left: 10px;\r\n margin-right: 20px;\r\n }\r\n\r\n .description-address {\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n width: 400px;\r\n }\r\n\r\n .name-address {\r\n color: #707070;\r\n font-size: 1rem;\r\n font-weight: 300;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n width: 400px;\r\n }\r\n\r\n .function-address {\r\n color: #FA9F2A;\r\n margin: 3px 5px 0;\r\n background: none;\r\n font-size: 1rem;\r\n display: flex;\r\n align-items: center;\r\n transition: .2s color;\r\n }\r\n\r\n .function-address span {\r\n margin-left: 5px;\r\n }\r\n\r\n .function-address:hover {\r\n color: #E6860B;\r\n }\r\n\r\n @media(max-width: 650px) {\r\n .container-address {\r\n width: 500px;\r\n }\r\n\r\n .name-address {\r\n font-size: 0.9rem;\r\n width: 300px;\r\n }\r\n\r\n .description-address {\r\n font-size: 1.1rem;\r\n width: 300px;\r\n }\r\n \r\n .function-address {\r\n font-size: 0.9rem; \r\n }\r\n }\r\n\r\n @media(max-width: 540px) {\r\n .container-address {\r\n width: 400px;\r\n padding: 30px;\r\n }\r\n\r\n .name-address {\r\n font-size: 0.85rem;\r\n width: 230px;\r\n }\r\n\r\n .description-address {\r\n font-size: 1rem;\r\n width: 230px;\r\n }\r\n\r\n .function-address {\r\n font-size: 0.85rem; \r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .container-address {\r\n width: 300px;\r\n padding: 20px;\r\n }\r\n\r\n .name-address {\r\n font-size: 0.8rem;\r\n width: 150px;\r\n }\r\n\r\n .description-address {\r\n font-size: 0.9rem;\r\n width: 150px;\r\n }\r\n\r\n .function-address {\r\n font-size: 0.8rem; \r\n }\r\n }\r\n`;","import React, { useState, useEffect } from 'react';\r\nimport { deleteAddressInactivation } from '../../../../api/customer';\r\nimport { FiTrash2 } from 'react-icons/fi';\r\nimport { toast } from 'react-toastify';\r\nimport { Container } from './styles';\r\nimport LoaderSpinner from '../../../../components/LoaderSpinner';\r\n\r\nconst UserAddress = ({ props, showModal, deleteAdd, change }) => {\r\n const [id, setId] = useState('');\r\n const [loading, setLoading] = useState(false);\r\n\r\n const deleteAddress = async () => {\r\n try {\r\n setLoading(true);\r\n await deleteAddressInactivation(id);\r\n\r\n toast.success(\"Endereço removido com sucesso\")\r\n setLoading(false);\r\n\r\n change();\r\n\r\n } catch (erro) {\r\n setLoading(false);\r\n toast.error(\"Erro ao remover endereço: \" + erro.message)\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (deleteAdd) {\r\n deleteAddress();\r\n } else {\r\n setId('');\r\n }\r\n }, [deleteAdd]);\r\n\r\n return (\r\n \r\n \r\n
\r\n {address.description} \r\n {address.address}, {address.number}, {address.city_name} \r\n
\r\n\r\n
{ showModal(true); setId(address.id) }} className=\"function-address\">\r\n remover \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default UserAddress;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-addresses {\r\n margin-top: 50px;\r\n padding-bottom: 200px;\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n .button-new {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .button-new-address {\r\n margin-top: 40px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 500px;\r\n align-self: center;\r\n padding: 15px 0;\r\n font-size: 1.2rem;\r\n background-color: #FA9F2A;\r\n border-radius: 19px;\r\n transition: .2s background;\r\n }\r\n\r\n .button-new-address:hover {\r\n background-color: #E6860B;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 650px) {\r\n .button-new-address {\r\n width: 400px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 540px) {\r\n .button-new-address {\r\n width: 300px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .button-new-address {\r\n width: 250px;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalDeleteAddress = ({ showModalDelete, setShowModalDelete, clicked }) => {\r\n const doCloseModal = (option) => {\r\n clicked(option);\r\n setShowModalDelete(false);\r\n }\r\n\r\n return (\r\n \r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content delete-address\"\r\n ariaHideApp={false}\r\n >\r\n \r\n confirmar \r\n cancelamento \r\n
\r\n\r\n \r\n Confirmar exclusão permanente do endereço? \r\n
\r\n\r\n \r\n doCloseModal(true)}>\r\n sim, excluir \r\n \r\n doCloseModal(false)}>\r\n não \r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n );\r\n}\r\n\r\nexport default SkeletonAddresses;","import React, { useState, useEffect } from 'react';\r\nimport { getAddresses } from '../../../api/customer';\r\nimport UserAddress from './UserAddresses';\r\nimport { toast } from 'react-toastify';\r\nimport Header from '../../../components/Header';\r\nimport { Container } from './styles';\r\nimport ModalDeleteAddress from '../../../components/Modals/ModalDeleteAddress';\r\nimport Footer from '../../../components/Footer';\r\nimport TabButton from '../../../components/TabButton';\r\nimport SkeletonAddresses from './SkeletonAddresses';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { debounce } from 'throttle-debounce';\r\n\r\nconst Addresses = () => {\r\n const navigation = useHistory();\r\n const [address, setAddress] = useState([]);\r\n const [showModal, setShowModal] = useState(false);\r\n const [deleteAddress, setDeleteAddress] = useState(false);\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n\r\n const cancelLoading = () => {\r\n let timeout = setTimeout(() => {\r\n if (document.getElementById('bodyAddresses')) {\r\n document.getElementById('bodyAddresses').style.display = 'block';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 500);\r\n return () => { clearTimeout(timeout); };\r\n }\r\n\r\n const goCreateNewAddress = () => {\r\n navigation.push(\"/newAddress\", { data: '' });\r\n }\r\n\r\n const getAllAdresses = async () => {\r\n try {\r\n await getAddresses().then(val => setAddress(val));\r\n\r\n setDeleteAddress(false);\r\n cancelLoading();\r\n } catch (erro) {\r\n toast.error(\"Erro ao buscar endereços: \" + erro.message)\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n let timeout;\r\n\r\n if (isMounted) {\r\n if (document.getElementById('bodyAddresses')) {\r\n document.getElementById('bodyAddresses').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n timeout = setTimeout(() => debounce(5000, getAllAdresses()), 1500);\r\n }\r\n\r\n return () => { isMounted = false; clearTimeout(timeout); };\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n\r\n setShowModal(val)}\r\n clicked={option => option && setDeleteAddress(true)}\r\n />\r\n\r\n \r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n {address.length > 0 &&\r\n
\r\n }\r\n\r\n
\r\n \r\n adicionar novo endereço \r\n \r\n
\r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n )\r\n};\r\n\r\nexport default Addresses;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-self: center;\r\n justify-content: center;\r\n background-color: #FFFFFF;\r\n border-radius: 18px;\r\n width: 800px;\r\n padding: 5px;\r\n padding-right: 0px;\r\n padding-bottom: 0px;\r\n margin-bottom: 20px;\r\n border: 1px solid #F7F7F7;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n\r\n .order-view {\r\n display: flex;\r\n position: relative;\r\n }\r\n\r\n .container-locale {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .locale {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n margin-left: 5px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n width: 350px;\r\n }\r\n\r\n .service-img {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 16px;\r\n }\r\n\r\n .container-image {\r\n width: 100px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .locale-view {\r\n margin-top: 10px;\r\n height: 15px;\r\n align-self: flex-start;\r\n margin-left: 4px;\r\n }\r\n\r\n .container-state-name {\r\n display: flex;\r\n align-items: center;\r\n margin-top: 5px;\r\n }\r\n\r\n .order-state {\r\n margin-left: 5px;\r\n color: #14213D;\r\n font-size: 1rem;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n width: 80px;\r\n }\r\n\r\n .estimateApprovalButton{\r\n width: 110px;\r\n height: 20px;\r\n background-color: #FA9F2A;\r\n border-width: 1px;\r\n border-color: #FA9F2A;\r\n border-radius: 10px;\r\n text-align: center;\r\n font-size: 13px;\r\n color: #FFFFFF;\r\n overflow: hidden;\r\n margin-top: 5px;\r\n }\r\n\r\n .order-data-view {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n margin-left: 10px;\r\n margin-top: 5px;\r\n }\r\n\r\n .service-name-text {\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n color: #14213D;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n width: 500px;\r\n }\r\n\r\n .cancel-button-view button {\r\n background: none;\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n font-size: 1rem;\r\n }\r\n\r\n .options-view {\r\n margin-top: 5px;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .date-info-order {\r\n display: flex;\r\n margin: 5px 0;\r\n align-items: center;\r\n }\r\n\r\n .schedule-date {\r\n margin-top: 0;\r\n color: #707070;\r\n font-size: 0.9rem;\r\n margin-left: 5px;\r\n }\r\n\r\n .time-info-order {\r\n display: flex;\r\n margin-top: 5px;\r\n align-items: center;\r\n }\r\n\r\n .schedule-time {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n margin-left: 5px;\r\n }\r\n\r\n .price-view {\r\n color: #707070;\r\n border: 1px solid #14213D;\r\n border-radius: 18px 18px 0 18px;\r\n padding: 0 20px;\r\n height: 30px;\r\n position: absolute;\r\n right: 0;\r\n top: -5px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .price {\r\n text-align: center;\r\n font-size: 1rem;\r\n color: #14213D;\r\n }\r\n\r\n .professional-view {\r\n display: flex;\r\n background-color: #F8F8F8;\r\n width: 350px;\r\n border-radius: 18px 0 0 18px;\r\n position: absolute;\r\n right: 0;\r\n bottom: 0;\r\n padding: 5px;\r\n }\r\n\r\n .professional-image {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 16px;\r\n }\r\n\r\n .professional-data {\r\n margin-left: 5px;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .professional-title {\r\n font-size: 0.9rem;\r\n color: #14213D;\r\n margin-top: 5px;\r\n }\r\n\r\n .professional-name {\r\n width: 260px;\r\n margin-top: 5px;\r\n font-size: 1rem;\r\n font-weight: 700;\r\n color: #14213D;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .bottom-view {\r\n background-color: #F0F0F0;\r\n border-radius: 0 0 17px 17px;\r\n justify-content: center;\r\n margin-left: -5px;\r\n height: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 10px;\r\n }\r\n\r\n .order-number {\r\n color: #14213D;\r\n text-align: center;\r\n font-size: 0.8rem;\r\n padding: 3px;\r\n }\r\n\r\n .online-tag-text {\r\n font-size: 0.7rem;\r\n color: #FFFFFF;\r\n margin-left: 2px;\r\n }\r\n\r\n .access-room-button-view button {\r\n background-color: #FA9F2A;\r\n color: #FFFFFF;\r\n padding: 10px 20px;\r\n border-radius: 20px;\r\n font-size: 1rem;\r\n }\r\n\r\n .copy-link-button-view {\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n }\r\n\r\n .online-tag {\r\n position: absolute;\r\n top: 5px;\r\n left: 5px;\r\n background-color: #14213D;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 5px 10px;\r\n border-radius: 20px;\r\n }\r\n\r\n @media(max-width: 820px) {\r\n width: 700px;\r\n\r\n .service-name-text {\r\n width: 450px;\r\n }\r\n\r\n .professional-view {\r\n width: 300px;\r\n }\r\n\r\n .professional-name {\r\n width: 200px;\r\n }\r\n } \r\n\r\n @media(max-width: 745px) {\r\n width: 600px;\r\n\r\n .container-state-name svg {\r\n width: 14px;\r\n }\r\n\r\n .container-state-name span{\r\n font-size: 0.9rem;\r\n }\r\n\r\n .time-info-order span {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .time-info-order svg {\r\n width: 11px;\r\n }\r\n\r\n .cancel-button-view button {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .container-locale svg {\r\n width: 14px;\r\n }\r\n\r\n .container-locale span {\r\n font-size: 0.9rem;\r\n width: 250px;\r\n }\r\n\r\n .service-img {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n\r\n .professional-image {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n\r\n .container-image {\r\n width: 90px;\r\n }\r\n\r\n .price {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .service-name-text {\r\n width: 350px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .professional-view {\r\n width: 280px;\r\n }\r\n\r\n .professional-name {\r\n width: 200px;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 620px) {\r\n width: 500px;\r\n\r\n .container-locale span {\r\n width: 200px;\r\n }\r\n\r\n .professional-title {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .date-info-order svg {\r\n width: 11px;\r\n }\r\n\r\n .date-info-order span {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .service-img {\r\n width: 85px;\r\n height: 85px;\r\n }\r\n\r\n .container-image {\r\n width: 85px;\r\n }\r\n\r\n .service-name-text {\r\n width: 260px;\r\n font-size: 1rem;\r\n }\r\n\r\n .professional-view {\r\n width: 230px;\r\n }\r\n\r\n .professional-name {\r\n width: 150px;\r\n }\r\n }\r\n\r\n @media(max-width: 525px) {\r\n max-width: 400px;\r\n\r\n .cancel-button-view button {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .container-locale span {\r\n width: 150px;\r\n }\r\n\r\n .price {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .service-img {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .container-image {\r\n width: 80px;\r\n }\r\n\r\n .service-name-text {\r\n width: 150px;\r\n }\r\n\r\n .professional-view {\r\n width: 200px;\r\n }\r\n\r\n .professional-name {\r\n width: 110px;\r\n }\r\n }\r\n\r\n @media(max-width: 420px) {\r\n max-width: 300px;\r\n\r\n .professional-title {\r\n font-size: 0.7rem;\r\n }\r\n\r\n .professional-image {\r\n width: 45px;\r\n height: 45px;\r\n }\r\n\r\n .container-locale span {\r\n width: 100px;\r\n }\r\n\r\n .service-name-text {\r\n width: 100px;\r\n }\r\n\r\n .professional-view {\r\n width: 150px;\r\n }\r\n\r\n .professional-name {\r\n width: 90px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\n\r\nconst ModalCancelOrder = ({ showModalCancel, setShowModalCancel, code, clicked }) => {\r\n const doCloseModal = (option) => {\r\n clicked(option);\r\n setShowModalCancel(false);\r\n }\r\n\r\n return (\r\n \r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content cancel-order\"\r\n ariaHideApp={false}\r\n >\r\n \r\n confirmar \r\n cancelamento \r\n
\r\n\r\n \r\n Confirmar cancelamento do pedido Nº {code}? \r\n
\r\n\r\n \r\n doCloseModal(true)}>\r\n sim, confirmar \r\n \r\n doCloseModal(false)}>\r\n não \r\n \r\n
\r\n \r\n setApproveApprovalModalOpen(!approveApprovalModalOpen)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content reprove-order\"\r\n ariaHideApp={false}\r\n >\r\n setApproveApprovalModalOpen(false)}>\r\n x \r\n \r\n\r\n \r\n Confirmar \r\n APROVAÇÃO \r\n
\r\n\r\n \r\n
\r\n Confirmar aprovação do orçamento do pedido Nº {order.id}? \r\n
\r\n
\r\n approveEstimateCall(order, setCloseAllModals, setAllOrders, setLoad, searchOrders, type, setLoading, history)}>\r\n sim, aprovar \r\n \r\n\r\n setApproveApprovalModalOpen(!approveApprovalModalOpen)}>\r\n não \r\n \r\n
\r\n\r\n \r\n\r\n \r\n )\r\n}","import React, { useEffect, useState } from 'react'\r\nimport Modal from 'react-modal';\r\nimport { disapproveEstimateCall } from '../../../api/service_orders';\r\nimport LoaderSpinner from '../../LoaderSpinner';\r\nimport './styles.css'\r\n\r\n\r\nexport function ModalCancelApprovalOrder({ cancelApprovalModalOpen, setCancelApprovalModalOpen, order, setApprovalModalOpen, type, searchOrders, setLoad, loading, setLoading, setAllOrders }) {\r\n\r\n const [closeAllModals, setCloseAllModals] = useState(false);\r\n\r\n useEffect(() => {\r\n if (closeAllModals) {\r\n setCancelApprovalModalOpen(false)\r\n setApprovalModalOpen(false);\r\n }\r\n setLoading(false);\r\n }, [cancelApprovalModalOpen, closeAllModals, setApprovalModalOpen, setCancelApprovalModalOpen, setLoading, loading])\r\n\r\n return (\r\n <>\r\n setCancelApprovalModalOpen(!cancelApprovalModalOpen)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content reprove-order\"\r\n ariaHideApp={false}\r\n >\r\n\r\n setCancelApprovalModalOpen(false)}>\r\n x \r\n \r\n\r\n \r\n Confirmar \r\n REPROVAÇÃO \r\n
\r\n\r\n \r\n
\r\n Confirmar reprovação do orçamento do pedido Nº {order.id}? \r\n
\r\n
\r\n disapproveEstimateCall(order, setCloseAllModals, setAllOrders, setLoad, searchOrders, type, setLoading)}>\r\n Sim, reprovar \r\n \r\n\r\n setCancelApprovalModalOpen(!cancelApprovalModalOpen)}>\r\n Não \r\n \r\n
\r\n\r\n \r\n\r\n \r\n )\r\n}","import Moment from 'moment-timezone';\r\nimport React, { useState } from 'react';\r\nimport Modal from 'react-modal';\r\nimport { formatCurrencyBRL } from '../../../utils/utils';\r\nimport { ModalApproveApprovalOrder } from '../ModalApproveApprovalOrder';\r\nimport { ModalCancelApprovalOrder } from '../ModalCancelApprovalOrder';\r\nimport './styles.css'\r\n\r\nexport function ModalApprovalOrder({ approvalModalOpen, setApprovalModalOpen, order, type, searchOrders, setLoad, loading, setLoading, setAllOrders }) {\r\n const [approveApprovalModalOpen, setApproveApprovalModalOpen] = useState(false);\r\n const [cancelApprovalModalOpen, setCancelApprovalModalOpen] = useState(false);\r\n\r\n return (\r\n <>\r\n {approvalModalOpen &&\r\n setApprovalModalOpen(!approvalModalOpen)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content approval-order\"\r\n ariaHideApp={false}\r\n >\r\n \r\n setApprovalModalOpen(false)}>\r\n x \r\n \r\n \r\n \r\n Orçamento \r\n APROVAR \r\n
\r\n\r\n \r\n\r\n
\r\n Pedido: {order.id}
\r\n\r\n
\r\n Serviço: {order.service.name}
\r\n
\r\n Data de entrega: {Moment(order.estimate.delivery_date).format('DD/MM/YYYY')}
\r\n
\r\n Total: {formatCurrencyBRL(order.total_value)}
\r\n
\r\n Itens:
\r\n
\r\n {order.estimate.items.map((item, index) => {\r\n return (\r\n
{item.description} - {formatCurrencyBRL(item.price)} \r\n )\r\n })}\r\n \r\n
\r\n setApproveApprovalModalOpen(!approveApprovalModalOpen)}>\r\n aprovar \r\n \r\n setCancelApprovalModalOpen(!cancelApprovalModalOpen)}>\r\n reprovar \r\n \r\n
\r\n\r\n {cancelApprovalModalOpen &&\r\n \r\n {order.company.name} \r\n
\r\n );\r\n } else if (\"residential\" === order.order_type) {\r\n setLocale(\r\n \r\n {order.address_description} \r\n
\r\n );\r\n } else {\r\n setLocale(<>);\r\n }\r\n\r\n if (\"scheduled_with_professional\" === order.state || \"waiting_confirmation\" === order.state) {\r\n setCancelButtonView(\r\n \r\n setCancelModalVisible(true)}>\r\n cancelar \r\n \r\n
\r\n );\r\n } else {\r\n setCancelButtonView(null);\r\n }\r\n\r\n if (order.online_room_link) {\r\n setAccessRoomButtonView(\r\n \r\n openVideo(order.online_room_link)}>\r\n acessar serviço \r\n \r\n
\r\n );\r\n\r\n setCopyLinkButtonView(\r\n \r\n toast.success(\"Link copiado com sucesso!\")} text={order.online_room_link}>\r\n copiar link \r\n \r\n
\r\n );\r\n } else {\r\n setAccessRoomButtonView(null);\r\n setCopyLinkButtonView(null);\r\n }\r\n\r\n if (\r\n \"online_group\" === order.service_type ||\r\n \"online_personal\" === order.service_type\r\n ) {\r\n setOnlineTag(\r\n \r\n online \r\n
\r\n );\r\n } else {\r\n setOnlineTag(null);\r\n }\r\n }\r\n\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [order.id]);\r\n\r\n return (\r\n \r\n\r\n \r\n \r\n\r\n
\r\n
\r\n\r\n {onlineTag}\r\n\r\n
\r\n {order.state_name} \r\n
\r\n\r\n {order.can_approve_estimate && order.estimate &&\r\n
setApprovalModalOpen(!approvalModalOpen)} className=\"estimateApprovalButton\">Visualizar \r\n }\r\n
\r\n\r\n
{locale}
\r\n
\r\n\r\n
\r\n
{order.service.name} \r\n\r\n
\r\n {Moment(order.scheduled_date).format(\"DD/MM/YYYY\")} \r\n
\r\n\r\n
\r\n \r\n entre {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format(\"HH:mm\")} e {Moment(order.scheduled_until).tz(\"America/Sao_Paulo\").format(\"HH:mm\")}\r\n \r\n :\r\n {Moment(order.scheduled_date).tz(\"America/Sao_Paulo\").format(\"HH:mm\")} \r\n }\r\n
\r\n
\r\n\r\n
\r\n {formatCurrencyBRL(order.total_value)} \r\n
\r\n\r\n {order.professional.name && (\r\n
\r\n
\r\n\r\n
\r\n Profissional \r\n {order.professional.name} \r\n
\r\n
\r\n )}\r\n
\r\n {cancelButtonView}\r\n {accessRoomButtonView}\r\n {copyLinkButtonView}\r\n
\r\n )}\r\n\r\n {order.chat_enabled === true &&\r\n history.push('/chat', {\r\n orderId: order.id,\r\n namePro: order.professional?.name,\r\n idPro: order.professional?.id\r\n })}>\r\n {(chatInfo && chatInfo.last_message_delivered === false) &&\r\n \r\n Chat \r\n \r\n \r\n }\r\n\r\n \r\n pedido nº {order.id} \r\n
\r\n\r\n {cancelModalVisible &&\r\n setCancelModalVisible(val)}\r\n code={order.id}\r\n clicked={value => value && cancelOrderCall()}\r\n />\r\n }\r\n \r\n );\r\n};\r\n\r\nexport default OrderCard;\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-service-order-history {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .not-found-text{\r\n font-size: 1.3rem;\r\n color: #C4C4C4;\r\n margin: 5rem 0;\r\n }\r\n\r\n .choose-type-view {\r\n display: flex;\r\n align-self: center;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 31px;\r\n width: 100%;\r\n max-width: 500px;\r\n height: 40px;\r\n border: 1px solid #FA9F2A;\r\n border-radius: 20px;\r\n }\r\n\r\n .content-body {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .choose-type-view label {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .container-order-card-list {\r\n width: 100%;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n .order-list {\r\n display: flex;\r\n flex-direction: column;\r\n padding-bottom: 150px;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n margin-top: 50px;\r\n }\r\n\r\n .container-order-card-list {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .react-switch-selector-wrapper {\r\n border: 1px solid #FA9F2A;\r\n width: 500px;\r\n }\r\n\r\n .react-switch-selector-wrapper::before{\r\n height: calc(100% - 6px);\r\n width: calc(50% - 6px);\r\n border: none;\r\n margin-left: 3px;\r\n }\r\n\r\n .react-switch-selector-option label {\r\n font-size: 1.2rem;\r\n padding: 10px 20px;\r\n }\r\n\r\n .container-order-card {\r\n width: 100%;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n padding-bottom: 50px;\r\n\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 745px) {\r\n .choose-type-view {\r\n max-width: 400px;\r\n height: 35px;\r\n }\r\n\r\n .react-switch-selector-option label {\r\n font-size: 1.1rem;\r\n padding: 10px;\r\n }\r\n\r\n .choose-type-view label {\r\n font-size: 1rem;\r\n }\r\n\r\n .order-list {\r\n padding-bottom: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 525px) {\r\n .choose-type-view {\r\n max-width: 300px;\r\n height: 30px;\r\n }\r\n\r\n .choose-type-view label {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .choose-type-view {\r\n max-width: 240px;\r\n height: 30px;\r\n }\r\n\r\n .react-switch-selector-option label {\r\n font-size: 1rem;\r\n padding: 10px 5px;\r\n }\r\n\r\n .choose-type-view label {\r\n font-size: 0.8rem;\r\n }\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 500px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .banner-skt {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .banner-skeleton {\r\n width: 1080px;\r\n height: 200px;\r\n }\r\n\r\n @media(max-width: 1070px) {\r\n .banner-skeleton {\r\n width: 1070px;\r\n }\r\n }\r\n\r\n @media(max-width: 1050px) {\r\n .title-skeleton {\r\n width: 1040px;\r\n }\r\n }\r\n\r\n @media(max-width: 1030px) {\r\n .banner-skeleton {\r\n width: 1030px;\r\n }\r\n }\r\n\r\n @media(max-width: 1000px) {\r\n .banner-skeleton {\r\n width: 980px;\r\n }\r\n }\r\n\r\n @media(max-width: 970px) {\r\n .banner-skeleton {\r\n width: 950px;\r\n }\r\n }\r\n\r\n @media(max-width: 940px) {\r\n .banner-skeleton {\r\n width: 920px;\r\n }\r\n }\r\n\r\n @media(max-width: 890px) {\r\n .banner-skeleton {\r\n width: 890px;\r\n }\r\n }\r\n\r\n @media(max-width: 850px) {\r\n .banner-skeleton {\r\n width: 850px;\r\n }\r\n }\r\n\r\n @media(max-width: 820px) {\r\n .banner-skeleton {\r\n width: 810px;\r\n }\r\n }\r\n\r\n @media(max-width: 780px) {\r\n .banner-skeleton {\r\n width: 770px;\r\n }\r\n }\r\n\r\n @media(max-width: 720px) {\r\n .banner-skeleton {\r\n width: 710px;\r\n }\r\n }\r\n\r\n @media(max-width: 660px) {\r\n .banner-skeleton {\r\n width: 650px;\r\n }\r\n }\r\n\r\n @media(max-width: 600px) {\r\n .banner-skeleton {\r\n width: 590px;\r\n }\r\n }\r\n\r\n @media(max-width: 550px) {\r\n .banner-skeleton {\r\n width: 540px;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .banner-skeleton {\r\n width: 480px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .banner-skeleton {\r\n width: 420px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .banner-skeleton {\r\n width: 370px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .banner-skeleton {\r\n width: 310px;\r\n }\r\n }\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n .today-skeleton {\r\n width: 600px;\r\n height: 160px;\r\n border-radius: 20px;\r\n margin: 20px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 500px;\r\n height: 140px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 400px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 400px) {\r\n .today-skeleton {\r\n width: 350px;\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .today-skeleton {\r\n width: 300px;\r\n height: 100px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonServiceOrderHistory = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonServiceOrderHistory;","import { header, fetchWithTimeout } from './helper/request';\r\nimport { API_CHAT, CHATS } from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\n\r\nconst getAllChatsApi = async () => {\r\n try {\r\n const { get_bearer_chat } = header();\r\n const response = await fetchWithTimeout(`${API_CHAT}${CHATS}`, get_bearer_chat);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n return responseJson;\r\n } else {\r\n throw new Error('Erro na chamada de getAllChats: ' + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao buscar todos os chats');\r\n }\r\n}\r\n\r\nconst getChats = async (customerId, orderId) => {\r\n try {\r\n const { get_bearer_chat } = header();\r\n const response = await fetchWithTimeout(`${API_CHAT}${CHATS}?recipient_id=${customerId}&recipient_type=professional&subject_id=${orderId}&subject_type=order`, get_bearer_chat);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n\r\n } else {\r\n throw new Error('Erro na chamada de getChats: ' + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao buscar chats');\r\n }\r\n}\r\n\r\nconst getChatMessages = async (id) => {\r\n try {\r\n const { get_bearer_chat } = header();\r\n const response = await fetchWithTimeout(`${API_CHAT}${CHATS}/${id}/messages`, get_bearer_chat);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n } else {\r\n throw new Error('Erro na chamada de getChatMessages: ' + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao buscar mensagens');\r\n }\r\n}\r\n\r\nexport {\r\n getAllChatsApi,\r\n getChats,\r\n getChatMessages,\r\n}","import React, { useEffect, useState } from \"react\";\r\nimport { getOpenOrders } from \"../../../api/service_orders\";\r\nimport { getConcludedOrders } from \"../../../api/service_orders\";\r\nimport { getUser } from \"../../../utils/auth\";\r\nimport SwitchSelector from \"react-switch-selector\";\r\nimport OrderCard from \"./OrderCard\";\r\nimport { getDatesMinuteDifference } from \"../../../utils/utils\";\r\nimport { toast } from \"react-toastify\";\r\nimport Header from \"../../../components/Header\";\r\nimport TabButton from \"../../../components/TabButton\";\r\nimport { Container } from \"./styles\";\r\nimport LoaderSpinner from \"../../../components/LoaderSpinner\";\r\nimport SkeletonServiceOrderHistory from \"./SkeletonServiceOrderHistory\";\r\nimport Footer from \"../../../components/Footer\";\r\nimport { debounce } from 'throttle-debounce';\r\n\r\nimport { getAllChatsApi } from '../../../api/chats';\r\n\r\nconst ServiceOrderHistory = ({ location }) => {\r\n const selectedOrder = location.state ? location.state.selectedOrder : null;\r\n const [loading, setLoading] = useState(false);\r\n const [allOrders, setAllOrders] = useState([]);\r\n const [type, setType] = useState(\"open\");\r\n const company = getUser()?.company;\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n const [allChats, setAllChats] = useState([]);\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if (document.getElementById('bodyServiceHistory')) {\r\n document.getElementById('bodyServiceHistory').style.display = 'flex';\r\n }\r\n setLoadingSkeleton(false);\r\n setLoading(false);\r\n }, 1000);\r\n }\r\n\r\n const searchOrders = async (type, setAllOrders, isMounted, setLoadingSkeleton, setRefreshing) => {\r\n try {\r\n setLoadingSkeleton(true);\r\n\r\n if (\"open\" === type) {\r\n await getOpenOrders(setAllOrders, 0, 30);\r\n } else if (\"concluded\" === type) {\r\n await getConcludedOrders(setAllOrders, 0, 30);\r\n }\r\n\r\n setLoading(false);\r\n } catch (error) {\r\n toast.error(error.message);\r\n setAllOrders([]);\r\n } finally {\r\n cancelLoading();\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n if (document.getElementById('bodyServiceHistory')) {\r\n document.getElementById('bodyServiceHistory').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => {\r\n debounce(5000, searchOrders(type, setAllOrders, isMounted, setLoadingSkeleton))\r\n getAllChats(setAllChats);\r\n }, 1500);\r\n }\r\n\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [type]);\r\n\r\n let ordersComponents = allOrders?.map((order, orderIndex) => {\r\n let openStreamingModal = false;\r\n\r\n if (null != selectedOrder && selectedOrder.id === order.id) {\r\n openStreamingModal =\r\n getDatesMinuteDifference(order.scheduled_date, new Date()) <= 5;\r\n }\r\n return (\r\n \r\n
\r\n );\r\n });\r\n\r\n const getAllChats = async (setAllChats) => {\r\n try {\r\n await getAllChatsApi().then(val => setAllChats(val));\r\n } catch (error) {\r\n toast.error(error.message, 5000);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (allChats.length > 0) {\r\n let info = allChats.find(x => x.last_message_delivered === false && x.last_message_content !== null);\r\n if (info) {\r\n localStorage.setItem('hasMessage', true);\r\n } else {\r\n localStorage.setItem('hasMessage', false);\r\n }\r\n }\r\n }, [allChats]);\r\n\r\n return (\r\n \r\n
\r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n {\r\n setType(value);\r\n }}\r\n fontColor=\"#FA9F2A\"\r\n selectedBackgroundColor=\"#FA9F2A\"\r\n selectedFontColor=\"#FFF\"\r\n backgroundColor=\"#FFF\"\r\n buttonColor=\"#FA9F2A\"\r\n borderColor=\"#FA9F2A\"\r\n options={[\r\n {\r\n label: \"serviços agendados\",\r\n value: \"open\",\r\n },\r\n {\r\n label: \"serviços concluídos\",\r\n value: \"concluded\",\r\n },\r\n ]}\r\n />\r\n
\r\n {ordersComponents.length > 0 ?\r\n (
\r\n {ordersComponents}\r\n
\r\n ) : (\r\n
Nenhum serviço agendado. \r\n )\r\n }\r\n
\r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n\r\n
\r\n
\r\n {coupon.code} \r\n {description} \r\n válido até: {Moment(coupon.expire_at).subtract({ hour: 1 }).format('DD/MM/YYYY')} \r\n \r\n );\r\n}\r\n\r\nexport default DiscountCouponCard;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-coupon {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin-top: 30px;\r\n padding-bottom: 200px;\r\n }\r\n\r\n .container-titles {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n font-size: 1.3rem;\r\n color: #707070;\r\n }\r\n\r\n .container-cashback-discount {\r\n margin-top: 1rem;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n .coupon-list {\r\n margin-top: 25px;\r\n }\r\n\r\n .not-found-text{\r\n font-size: 1.2rem;\r\n color: #C4C4C4;\r\n margin: 10px 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .content-coupon {\r\n padding-bottom: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .contianer-titles {\r\n font-size: 1.1rem;\r\n }\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n .banner-skt {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .banner-skeleton {\r\n width: 500px;\r\n height: 100px;\r\n margin-top: 40px;\r\n border-radius: 20px;\r\n margin-bottom: 10px;\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .banner-skeleton {\r\n width: 300px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .banner-skeleton {\r\n width: 200px;\r\n }\r\n }\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n .today-skeleton {\r\n width: 600px;\r\n height: 120px;\r\n border-radius: 20px;\r\n margin: 10px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 500px;\r\n height: 140px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 400px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 400px) {\r\n .today-skeleton {\r\n width: 350px;\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .today-skeleton {\r\n width: 300px;\r\n height: 100px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonDiscountCoupons = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonDiscountCoupons;","import styled from 'styled-components';\n\nexport const Container = styled.div`\n border: 1px solid #F4F4F4;\n background-color: #FFFFFF;\n border-radius: 18px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n padding: 20px 30px;\n margin-bottom: 20px;\n width: 600px;\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n\n .validate {\n font-size: 0.9rem;\n color: #707070;\n font-weight: bold;\n margin-top: 5px;\n }\n\n .cashback-title {\n font-size: 1rem;\n font-weight: bold;\n color: #14213D;\n }\n \n .cashback-text {\n margin-top: 3px;\n font-size: 0.95rem;\n color: #707070;\n }\n\n .card-icon {\n left: 33.5rem;\n bottom: 1rem;\n color: black;\n position: relative;\n }\n\n @media(max-width: 620px) {\n width: 500px;\n }\n\n @media(max-width: 520px) {\n width: 400px;\n }\n\n @media(max-width: 420px) {\n width: 300px;\n\n .code-text {\n font-size: 0.9rem;\n }\n\n .description-text {\n font-size: 0.85rem;\n }\n\n .validate {\n font-size: 0.8rem;\n }\n }\n`;","import { FiDollarSign } from \"react-icons/fi\";\nimport { Container } from \"./style\";\nimport Moment from 'moment-timezone';\n\n\nconst CashbackCard = ({ cashback }) => {\n\n const hasService = cashback.service_name ? true : false\n\n const orderTypeDict = {\n 'corporate': 'Serviços no escritório',\n 'residential': 'Serviços em casa (delivery)',\n 'global': 'Serviços online'\n }\n\n return (\n \n {cashback.name} \n {cashback.cashback_percentage}% OFF {hasService ? `no serviço ${cashback.service_name}` : 'em todos os serviços'} \n validade: {Moment(cashback.valid_from).format('DD/MM/YYYY')} até {Moment(cashback.valid_to).format('DD/MM/YYYY')} \n {orderTypeDict[cashback.order_type]} \n \n )\n}\n\nexport default CashbackCard;","import React, { useEffect, useState } from 'react';\r\nimport { getDiscountCoupons } from '../../api/discount_coupons'\r\nimport { toast } from 'react-toastify';\r\nimport Header from '../../components/Header';\r\nimport TabButton from '../../components/TabButton';\r\nimport DiscountCouponCard from './DiscountCard';\r\nimport { Container } from './styles';\r\nimport SkeletonDiscountCoupons from './SkeletonDiscountCoupons';\r\nimport Footer from '../../components/Footer';\r\nimport { debounce } from 'throttle-debounce';\r\nimport { getAvailableCashbacks } from '../../api/cashback'\r\nimport CashbackCard from './CashbackCard';\r\n\r\nconst DiscountCoupons = () => {\r\n const [allCoupons, setAllCoupons] = useState([]);\r\n const [allCashbacks, setAllCashbacks] = useState([]);\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if (document.getElementById('couponBody')) {\r\n document.getElementById('couponBody').style.display = 'flex';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 1000);\r\n }\r\n\r\n const searchDiscountCoupons = async () => {\r\n try {\r\n await getDiscountCoupons(setAllCoupons);\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n setAllCoupons([]);\r\n } finally {\r\n cancelLoading();\r\n }\r\n }\r\n\r\n const searchAvailableCashbacks = async () => {\r\n try {\r\n await getAvailableCashbacks().then((cashback) => setAllCashbacks(cashback))\r\n } catch (error) {\r\n toast.error(error.message);\r\n setAllCoupons([]);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n if (document.getElementById('couponBody')) {\r\n document.getElementById('couponBody').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => debounce(5000, searchDiscountCoupons()), 1500);\r\n setTimeout(() => debounce(5000, searchAvailableCashbacks()), 1500);\r\n }\r\n\r\n return () => { isMounted = false; };\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n {(allCoupons.length === 0 && allCashbacks.length === 0) &&\r\n
Nenhum cupom encontrado. \r\n }\r\n\r\n {allCoupons.length > 0 &&\r\n
\r\n
\r\n Estes são seus cupons disponíveis. \r\n Você pode utilizá-los no checkout \r\n
\r\n\r\n
\r\n {allCoupons.map((coupon, couponIndex) => {\r\n return (\r\n
\r\n
\r\n )\r\n })}\r\n
\r\n\r\n\r\n
\r\n }\r\n\r\n {allCashbacks.length > 0 &&\r\n
\r\n
\r\n Estes são seus cashbacks disponíveis. \r\n
\r\n
\r\n {allCashbacks.map((cashback, cashbackIndex) => {\r\n return (\r\n
\r\n
\r\n )\r\n })}\r\n
\r\n
\r\n }\r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n );\r\n};\r\n\r\nexport default DiscountCoupons;\r\n","import { getSectionsCatchErrors } from \"./getSectionsCatchErrors\";\r\nimport { API_BASE, API_VERSION, CUSTOMERS_TERMS } from \"./helper/api_urls\";\r\nimport { fetchWithTimeout, header } from \"./helper/request\";\r\n\r\nconst getTermsConditionsToSee = async (callback) => {\r\n try {\r\n const { get } = header();\r\n const response = await fetchWithTimeout(`${API_BASE}${API_VERSION}${CUSTOMERS_TERMS}`, get);\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n\r\n callback(responseJson);\r\n } else {\r\n throw new Error('erro na chamada getTermsConditions: ' + response.status);\r\n }\r\n } catch (error) {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de termos');\r\n }\r\n}\r\n\r\n\r\nexport {\r\n getTermsConditionsToSee\r\n}","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: justify;\r\n\r\n .background-terms {\r\n max-width: 1080px !important;\r\n background-color: #FFF;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n min-height: 100vh;\r\n }\r\n`;\r\n\r\nexport const ContentBody = styled.div`\r\n margin-top: 2rem;\r\n padding: 1rem 3rem;\r\n font-size: 0.8rem;\r\n display: flex;\r\n color: #14213D !important;\r\n\r\n > div{\r\n overflow: auto;\r\n font-size: 1rem;\r\n margin-top: 10px;\r\n line-height: 1.5;\r\n }\r\n\r\n \r\n h1, h2, h3, h4, h5, h6, strong{\r\n color: #14213D !important;\r\n }\r\n`;\r\n\r\n\r\nexport const ButtonAcceptTerms = styled.button`\r\n width: 40%;\r\n padding: 15px 0;\r\n margin-top: 3rem;\r\n font-size: 1rem;\r\n border-radius: 1rem;\r\n background-color: #FA9F2A;\r\n transition: ease-in 0.2s;\r\n margin-bottom: 10rem;\r\n &:hover{\r\n opacity: 0.7;\r\n }\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { getTermsConditionsToSee } from '../../api/termsConditions';\r\nimport { ButtonAcceptTerms, Container, ContentBody } from './styles';\r\n\r\nconst TermsConditions = () => {\r\n const [terms, setTerms] = useState();\r\n const history = useHistory();\r\n\r\n const doGetTerms = async (isMounted) => {\r\n await getTermsConditionsToSee(setTerms);\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n doGetTerms(isMounted);\r\n }\r\n return () => (isMounted = false);\r\n }, [])\r\n\r\n return (\r\n \r\n
\r\n \r\n {terms && <>\r\n
\r\n
\r\n \r\n \r\n\r\n\r\n }\r\n
history.push('/')}\r\n >\r\n voltar \r\n \r\n\r\n \r\n\r\n
\r\n \r\n
\r\n \r\n \r\n\r\n \r\n );\r\n}\r\n\r\nexport default SkeletonPersonalData;","import React, { useState } from 'react';\nimport { FiEye, FiEyeOff } from 'react-icons/fi';\nimport Modal from 'react-modal';\nimport { toast } from 'react-toastify';\nimport { deleteCustomerAccount } from '../../../api/customer';\nimport LoaderSpinner from '../../LoaderSpinner';\nimport './styles.css';\nimport { onSignOut } from '../../../utils/auth';\nimport { useHistory } from 'react-router-dom';\n\n\nconst ModalCancelAccount = ({ showModalCancel, setShowModalCancel }) => {\n const [password, setPassword] = useState('')\n const [loading, setLoading] = useState(false)\n const [showPassword, setShowPassword] = useState(false)\n const navigation = useHistory();\n\n\n const doCloseModal = () => {\n setShowModalCancel(false);\n }\n\n const verifyPassword = () => {\n return password.length <= 3\n }\n\n const doRemoveAccount = async () => {\n try {\n setLoading(true)\n const response = await deleteCustomerAccount(password)\n if(response.ok) {\n toast.success('Cadastro removido com sucesso')\n logout()\n }\n setLoading(false)\n } catch (error) {\n setLoading(false)\n toast.error(error.message)\n }\n setShowModalCancel(false);\n }\n\n const logout = async () => {\n onSignOut();\n navigation.push('/')\n }\n\n return (\n \n
doCloseModal(false)}\n overlayClassName=\"modal-overlay\"\n className=\"modal-content cancel-account\"\n ariaHideApp={false}\n >\n \n confirmar \n remoção \n
\n\n \n
\n Ao confirmar a deleção da sua conta, todas as suas informações cadastrais serão eliminadas\n de nossa base e você perderá o valor total acumulado em sua carteira digital e todos os pacotes\n de serviços que foram adquiridos. Não haverá reembolso dos pacotes ou do valor acumulado na\n carteira.\n \n
\n
senha \n
{ setPassword(text.target.value) }}\n />\n \n { setShowPassword(!showPassword) }} >\n {showPassword ?\n \n
\n \n
\n doRemoveAccount()} disabled={verifyPassword()}>\n confirmar \n \n doCloseModal(false)}>\n voltar \n \n
\n \n \r\n \r\n \r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n
\r\n {t(\"toChangeYourData\")} \r\n {t(\"justClickAndChangeData\")} \r\n
\r\n\r\n {\"BR\" === customer.country && (\r\n
\r\n CPF \r\n \r\n )}\r\n\r\n {\"BR\" !== customer.country && (\r\n
\r\n Documento de identificação \r\n \r\n )}\r\n\r\n
\r\n {t(\"name\")} \r\n setFullName(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n {t(\"usernamePlaceholder\")} \r\n setEmail(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n {t(\"phoneNumberPlaceholder\")} \r\n setMobilePhone(e.target.value)}\r\n mask=\"(99) 9 9999-9999\"\r\n maskChar=\"\"\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n {t(\"gender\")}\r\n \r\n \r\n setGender(gen.target.value)}>\r\n Com qual gênero você se identifica? \r\n Masculino \r\n Feminino \r\n Outro \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n {t(\"birthDate\")}\r\n \r\n setBirthdayDate(e.target.value)}\r\n />\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n {t(\"languageText\")}\r\n \r\n \r\n changeLanguage(lang.target.value)}>\r\n {!language && (\r\n ptBR \r\n en \r\n es \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n \r\n {t(\"updateAccount\")}\r\n \r\n \r\n { customer?.can_remove_registration && (\r\n
{setShowModalCancel(true)}}>\r\n \r\n {t(\"deleteAccount\")}\r\n \r\n \r\n )}\r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n );\r\n};\r\n\r\nexport default PersonalData;\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-change-password {\r\n margin-top: 60px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .title-change-password {\r\n color: #14213D;\r\n font-size: 1.3rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .container-input {\r\n position: relative;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n .inputs {\r\n width: 600px;\r\n text-align: center;\r\n margin: 15px 0;\r\n font-size: 1.1rem;\r\n height: 60px;\r\n border-radius: 30px;\r\n border: 1px solid #CFCFCF;\r\n background-color: #fff;\r\n color: #14213D;\r\n }\r\n\r\n .inputs:focus {\r\n border: 1px solid #FA9F2A;\r\n }\r\n\r\n .border-icon-input {\r\n position: absolute;\r\n right: 15px;\r\n top: 30px;\r\n background-color: #FA9F2A;\r\n border-radius: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 5px;\r\n }\r\n\r\n .buttom-view {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 15px 0;\r\n margin-top: 15px;\r\n background-color: #FA9F2A;\r\n border-radius: 20px;\r\n width: 400px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 650px) {\r\n .inputs {\r\n width: 500px;\r\n height: 55px;\r\n }\r\n\r\n .border-icon-input {\r\n top: 27px;\r\n }\r\n\r\n .buttom-view {\r\n width: 350px;\r\n }\r\n }\r\n\r\n @media(max-width: 540px) {\r\n .inputs {\r\n width: 400px;\r\n height: 50px;\r\n font-size: 1rem;\r\n }\r\n\r\n .border-icon-input {\r\n top: 25px;\r\n }\r\n\r\n .buttom-view {\r\n width: 300px;\r\n padding: 12px 0;\r\n }\r\n }\r\n\r\n @media(max-width: 410px) {\r\n .title-change-password {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .inputs {\r\n width: 300px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .border-icon-input {\r\n top: 25px;\r\n }\r\n\r\n .buttom-view {\r\n width: 250px;\r\n font-size: 0.9rem;\r\n padding: 12px 0;\r\n }\r\n }\r\n`;","import React, { useState } from \"react\";\r\nimport { getUser } from \"../../../utils/auth\";\r\nimport { makeChangePassword } from \"../../../api/customer\";\r\nimport { FiEye, FiEyeOff } from \"react-icons/fi\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { toast } from \"react-toastify\";\r\nimport { Container } from './styles';\r\nimport Header from \"../../../components/Header\";\r\nimport LoaderSpinner from \"../../../components/LoaderSpinner\";\r\nimport Footer from \"../../../components/Footer\";\r\nimport TabButton from \"../../../components/TabButton\";\r\n\r\nconst ChangePassword = () => {\r\n let customer = getUser().customer;\r\n let username = customer.email;\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [oldPassword, setOldPassword] = useState(\"\");\r\n const [newPassword, setNewPassword] = useState(\"\");\r\n const [hideOldPassword, setHideOldPassword] = useState(true);\r\n const [hideNewPassword, setHideNewPassword] = useState(true);\r\n const navigation = useHistory();\r\n\r\n const updatePassword = async () => {\r\n let validationMessages = [];\r\n\r\n try {\r\n setLoading(true);\r\n\r\n await makeChangePassword(username, oldPassword, newPassword);\r\n toast.success(\"Senha atualizada com sucesso\", { autoClose: 3000 });\r\n\r\n setLoading(false);\r\n\r\n navigation.push(\"/home\");\r\n } catch (error) {\r\n setLoading(false);\r\n let errorMessage = error.message;\r\n\r\n if (errorMessage.indexOf(\"oldPassword\") >= 0) {\r\n validationMessages.push(\"Senha atual\");\r\n }\r\n\r\n if (errorMessage.indexOf(\"newPassword\") >= 0) {\r\n validationMessages.push(\"Nova senha\");\r\n }\r\n\r\n if (validationMessages.length > 0) {\r\n toast.warn(\r\n \"Favor preencher os campos obrigatórios:\\n- \" +\r\n validationMessages.join(\"\\n- \")\r\n );\r\n } else {\r\n toast.error(error.message);\r\n }\r\n }\r\n };\r\n\r\n const oldPasswordHideAndShow = () => {\r\n setHideOldPassword(!hideOldPassword);\r\n };\r\n const newPasswordHideAndShow = () => {\r\n setHideNewPassword(!hideNewPassword);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n\r\n
\r\n
\r\n Troque sua senha informando a senha atual \r\n e a nova \r\n
\r\n\r\n
\r\n setOldPassword(e.target.value)}\r\n />\r\n\r\n \r\n {hideOldPassword ?\r\n \r\n
\r\n\r\n
\r\n setNewPassword(e.target.value)}\r\n />\r\n\r\n \r\n {hideNewPassword ?\r\n \r\n
\r\n\r\n
\r\n atualizar senha \r\n \r\n
\r\n\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ChangePassword;\r\n","import styled from 'styled-components';\r\nimport ImgBackground from '../../../../assets/images/bg-complete-order-light.jpg';\r\n\r\nexport const Container = styled.div`\r\n .background-body {\r\n background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${ImgBackground});\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n padding-bottom: 150px;\r\n }\r\n\r\n .checked {\r\n border-radius: 100%;\r\n background-color: #50B041;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 50px 0 20px;\r\n }\r\n\r\n .all-right {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: #FFF;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .text {\r\n width: 500px;\r\n font-size: 1.2rem;\r\n color: #FFF;\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .block-services {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 20px 0;\r\n }\r\n\r\n @media(max-width: 890px) {\r\n .text {\r\n width: 450px;\r\n }\r\n }\r\n\r\n @media(max-width: 480px) {\r\n .text {\r\n width: 350px;\r\n font-size: 1rem;\r\n }\r\n\r\n .all-right {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .checked {\r\n padding: 8px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .text {\r\n width: 250px;\r\n }\r\n }\r\n\r\n @media(max-width: 320px) {\r\n .text {\r\n width: 220px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { FiCheck } from 'react-icons/fi';\r\nimport AvailableNow from '../../../ServiceOrder/components/AvailableNow';\r\nimport { Container } from './styles';\r\nimport Header from '../../../../components/Header';\r\nimport TabButton from '../../../../components/TabButton';\r\n\r\nconst LinkedCompany = ({ location }) => {\r\n const company = location?.state?.company;\r\n\r\n return (\r\n \r\n \r\n\r\n \r\n
\r\n
\r\n\r\n
Tudo certo :) \r\n\r\n
Agora você pode aproveitar todos os serviços oferecidos para a {company.name} \r\n\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default LinkedCompany;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-body-video-view {\r\n width: 100%;\r\n max-width: 1080px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding-bottom: 200px;\r\n }\r\n \r\n .video-title-view {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n color: #14213D;\r\n width: 100%;\r\n margin-top: 40px;\r\n }\r\n\r\n .video-title-view-right,\r\n .video-title-view-left {\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n margin: 0 40px;\r\n font-size: 1.2rem;\r\n }\r\n\r\n .video-title-view-left span:nth-child(2),\r\n .video-title-view-right span:nth-child(2) {\r\n font-weight: 700;\r\n }\r\n\r\n .video-container {\r\n width: 100%;\r\n max-width: 1080px;\r\n height: 500px;\r\n margin: 20px 0;\r\n background-color: #000;\r\n }\r\n\r\n .button-go-back {\r\n background-color: #FA9F2A;\r\n padding: 20px 200px;\r\n border-radius: 20px;\r\n font-size: 1.2rem;\r\n margin: 20px 0;\r\n transition: .2s background;\r\n box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);\r\n }\r\n\r\n .button-go-back:hover {\r\n background-color: #E6860B; \r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 480px) {\r\n .button-go-back {\r\n padding: 20px 150px;\r\n }\r\n\r\n .video-container {\r\n height: 300px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .video-title-view-right,\r\n .video-title-view-left {\r\n font-size: 1rem;\r\n margin: 0 15px;\r\n }\r\n \r\n .button-go-back {\r\n padding: 15px 150px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .video-title-view-right,\r\n .video-title-view-left {\r\n font-size: 0.9rem;\r\n margin: 0 10px;\r\n }\r\n \r\n .button-go-back {\r\n padding: 15px 100px;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport Moment from 'moment-timezone';\r\nimport { Container } from './styles';\r\nimport Header from '../../../components/Header';\r\nimport { useHistory } from 'react-router-dom';\r\nimport Footer from '../../../components/Footer';\r\nimport TabButton from '../../../components/TabButton';\r\n\r\nconst VideoView = ({ location }) => {\r\n const navigation = useHistory();\r\n const { video, category, service } = location.state;\r\n\r\n return (\r\n \r\n \r\n\r\n \r\n\r\n
\r\n
\r\n
\r\n {category.name} \r\n {service.name} \r\n
\r\n
\r\n Gravado dia \r\n {Moment(video.recorded_at).format('DD/MM/yyyy')} \r\n
\r\n
\r\n\r\n
\r\n \r\n\r\n
navigation.goBack()}>\r\n voltar \r\n \r\n
\r\n\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default VideoView;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-body-video-list {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n }\r\n\r\n .recorded-at-view-value {\r\n background-color: #14213D;\r\n position: absolute;\r\n top: 20px;\r\n left: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 5px 10px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .recorded-at-view-value span {\r\n margin-left: 10px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .sub-title {\r\n font-size: 1.3rem;\r\n color: #14213D;\r\n font-weight: 700;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport VideosGrid from './components/VideosGrid'\r\nimport ServiceBanner from '../components/ServiceBanner';\r\nimport { Container } from './styles';\r\nimport Header from '../../../components/Header';\r\nimport { FiCamera } from 'react-icons/fi';\r\nimport Footer from '../../../components/Footer';\r\nimport TabButton from '../../../components/TabButton';\r\nimport LoaderSpinner from '../../../components/LoaderSpinner';\r\n\r\nconst VideoList = ({ location }) => {\r\n const { offer, category, service } = location.state;\r\n const [loading, setLoading] = useState(false);\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n gravados \r\n
\r\n\r\n
SESSÕES GRAVADAS \r\n\r\n
\r\n
\r\n\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default VideoList;\r\n","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .content-body-pack {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding-bottom: 200px;\r\n }\r\n\r\n .pack-container {\r\n display: flex;\r\n margin: 10px 0;\r\n border: 1px solid #F2F2F2;\r\n box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);\r\n width: 800px;\r\n padding: 10px;\r\n border-radius: 20px;\r\n position: relative;\r\n }\r\n\r\n .pack-image {\r\n width: 100px;\r\n height: 100px;\r\n border-radius: 20px;\r\n }\r\n\r\n .content-pack {\r\n margin-left: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n color: #14213D;\r\n }\r\n\r\n .title-pack {\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n width: 550px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n .description-pack {\r\n font-size: 1rem;\r\n width: 550px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n color: #B7B7B7;\r\n margin: 5px 0;\r\n }\r\n\r\n .button-more {\r\n background: none;\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n font-size: 1.1rem;\r\n margin-top: 5px;\r\n transition: .2s color;\r\n }\r\n\r\n .price-pack {\r\n border: 1px solid #14213D;\r\n color: #14213D;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n border-radius: 20px 20px 0 20px;\r\n padding: 5px 15px;\r\n font-size: 1rem;\r\n }\r\n\r\n .divisor-pack {\r\n border: 1px solid #F2F2F2;\r\n width: 70%;\r\n margin: 20px 0;\r\n }\r\n\r\n .total-pack {\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .button-pay-disabled {\r\n font-size: 1.2rem;\r\n border-radius: 20px;\r\n margin-top: 10px;\r\n padding: 20px 230px;\r\n background-color: #CFCFCF;\r\n }\r\n\r\n .button-pay {\r\n font-size: 1.2rem;\r\n border-radius: 20px;\r\n margin-top: 10px;\r\n padding: 20px 230px;\r\n background-color: #FA9F2A;\r\n transition: .2s background;\r\n }\r\n\r\n .button-more:hover {\r\n color: #E6860B;\r\n }\r\n\r\n .button-pay:hover {\r\n background-color: #E6860B; \r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .content-body-pack {\r\n padding-bottom: 100px;\r\n }\r\n\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n }\r\n\r\n @media(max-width: 890px) {\r\n .pack-container {\r\n width: 600px;\r\n }\r\n\r\n .description-pack,\r\n .title-pack {\r\n width: 350px;\r\n }\r\n\r\n .button-pay,\r\n .button-pay-disabled {\r\n padding: 15px 150px;\r\n }\r\n }\r\n\r\n @media(max-width: 630px) {\r\n .pack-container {\r\n width: 500px;\r\n }\r\n\r\n .description-pack,\r\n .title-pack {\r\n width: 270px;\r\n }\r\n\r\n .button-pay,\r\n .button-pay-disabled {\r\n padding: 15px 130px;\r\n margin-top: 5px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .pack-container {\r\n width: 400px;\r\n }\r\n\r\n .pack-image {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .title-pack {\r\n font-size: 1rem;\r\n }\r\n\r\n .description-pack {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .description-pack,\r\n .title-pack {\r\n width: 200px;\r\n }\r\n\r\n .button-more {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .price-pack {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .button-pay,\r\n .button-pay-disabled {\r\n padding: 15px 130px;\r\n margin-top: 5px;\r\n }\r\n }\r\n\r\n @media(max-width: 450px) {\r\n .button-pay,\r\n .button-pay-disabled {\r\n padding: 15px 100px;\r\n margin-top: 5px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .pack-container {\r\n width: 350px;\r\n }\r\n\r\n .title-pack {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .description-pack {\r\n font-size: 0.75rem;\r\n }\r\n\r\n .description-pack,\r\n .title-pack {\r\n width: 150px;\r\n }\r\n\r\n .button-more {\r\n font-size: 0.85rem;\r\n margin-top: 10px;\r\n }\r\n\r\n .price-pack {\r\n font-size: 0.9rem;\r\n padding: 3px 8px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .pack-container {\r\n width: 300px;\r\n padding: 5px;\r\n }\r\n\r\n .description-pack,\r\n .title-pack {\r\n width: 110px;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport PaymentView from '../../ServiceOrder/components/PaymentView';\r\nimport { formatCurrencyBRL } from '../../../utils/utils';\r\nimport { createOrderPackage } from '../../../api/service_packages';\r\nimport ServiceBanner from '../../ServiceOrder/components/ServiceBanner';\r\nimport { toast } from 'react-toastify';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Container } from './styles';\r\nimport Header from '../../../components/Header';\r\nimport LoaderSpinner from '../../../components/LoaderSpinner';\r\nimport ModalMoreInformation from '../../../components/Modals/ModalMoreInformation';\r\nimport TabButton from '../../../components/TabButton';\r\nimport Footer from '../../../components/Footer';\r\n\r\nconst PackageCheckout = ({ location }) => {\r\n const navigation = useHistory();\r\n const { pack } = location.state;\r\n const [modalVisible, setModalVisible] = useState(false);\r\n const [methodPayment, setMethodPayment] = useState({});\r\n const [loading, setLoading] = useState(false);\r\n\r\n const packagePayment = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n await createOrderPackage(pack.id, methodPayment.method, methodPayment.card);\r\n\r\n setLoading(false);\r\n\r\n navigation.push('/packageCompletedOrder', { pack: pack });\r\n } catch (error) {\r\n setLoading(false);\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n return (\r\n \r\n \r\n setModalVisible(val)}\r\n title={pack?.name}\r\n body={pack?.description}\r\n />\r\n\r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n\r\n
\r\n {pack.name} \r\n {pack.description} \r\n\r\n setModalVisible(true)}\r\n className=\"button-more\"\r\n >\r\n + informações \r\n \r\n
\r\n\r\n
\r\n R$ {formatCurrencyBRL(pack.price).substring(2)} \r\n
\r\n
\r\n\r\n
\r\n\r\n
PAGAMENTO \r\n\r\n
\r\n\r\n
\r\n concluir compra \r\n \r\n \r\n\r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default PackageCheckout;","import styled from 'styled-components';\r\nimport imgSrc from '../../../assets/images/bg-complete-order-light.jpg';\r\n\r\nexport const Container = styled.div`\r\n .background-body {\r\n background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${imgSrc});\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n .container-all-right {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .all-right {\r\n display: flex;\r\n background-color: #50B041;\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 60px;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 78px auto 20px;\r\n }\r\n\r\n .text-all-right {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n .message {\r\n width: 100%;\r\n font-size: 1.3rem;\r\n padding: 0 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .message-now {\r\n background: #14213d;\r\n border-radius: 20px;\r\n padding: 20px 0;\r\n width: 500px;\r\n text-align: center;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .body-message {\r\n display: flex;\r\n align-items: center;\r\n background-color: #fff;\r\n color: #14213D;\r\n margin: 15px 0;\r\n border-radius: 20px;\r\n width: 800px;\r\n height: 100px;\r\n }\r\n\r\n .id-message {\r\n background-color: #14213D;\r\n color: #fff;\r\n height: 100px;\r\n padding: 0 20px;\r\n border-radius: 19px 0 0 19px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 15px;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n }\r\n\r\n .message-text {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .text {\r\n font-size: 1rem;\r\n margin-left: 10px;\r\n }\r\n\r\n .container-messages {\r\n margin: 20px 0 100px;\r\n }\r\n\r\n @media(max-width: 840px) {\r\n .message-now {\r\n width: 400px;\r\n }\r\n \r\n .body-message {\r\n width: 600px;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .all-right {\r\n width: 80px;\r\n height: 80px;\r\n margin-top: 50px;\r\n }\r\n\r\n .all-right svg {\r\n width: 40px;\r\n }\r\n\r\n .message {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .message-now {\r\n width: 300px;\r\n padding: 15px 0;\r\n }\r\n \r\n .body-message {\r\n width: 500px;\r\n height: 90px;\r\n }\r\n\r\n .id-message {\r\n height: 90px;\r\n }\r\n\r\n .text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .all-right {\r\n width: 70px;\r\n height: 70px;\r\n margin-top: 50px;\r\n }\r\n\r\n .all-right svg {\r\n width: 40px;\r\n }\r\n\r\n .message {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .message-now {\r\n width: 250px;\r\n padding: 10px 0;\r\n font-size: 1rem;\r\n }\r\n \r\n .body-message {\r\n width: 400px;\r\n height: 90px;\r\n }\r\n\r\n .id-message {\r\n height: 90px;\r\n }\r\n\r\n .text {\r\n font-size: 0.8rem;\r\n }\r\n\r\n .container-messages {\r\n margin: 10px 0 80px; \r\n }\r\n }\r\n\r\n @media(max-width: 405px) {\r\n .message {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .message-now {\r\n width: 250px;\r\n padding: 10px 0;\r\n font-size: 1rem;\r\n }\r\n \r\n .body-message {\r\n width: 350px;\r\n height: 90px;\r\n }\r\n\r\n .id-message {\r\n height: 90px;\r\n margin-right: 5px;\r\n }\r\n\r\n .text {\r\n font-size: 0.8rem;\r\n margin-left: 5px;\r\n }\r\n\r\n .body-message svg {\r\n width: 30px;\r\n }\r\n }\r\n\r\n @media(max-width: 360px) {\r\n .message {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .message-now {\r\n width: 250px;\r\n padding: 10px 0;\r\n font-size: 1rem;\r\n }\r\n \r\n .body-message {\r\n width: 300px;\r\n height: 90px;\r\n padding-right: 10px;\r\n }\r\n\r\n .id-message {\r\n height: 90px;\r\n padding: 0 12px;\r\n margin-right: 5px;\r\n }\r\n\r\n .text {\r\n font-size: 0.8rem;\r\n margin-left: 5px;\r\n }\r\n\r\n .body-message svg {\r\n width: 30px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { FiCheck, FiClock, FiDollarSign, FiMail } from 'react-icons/fi';\r\nimport { Container } from './styles';\r\nimport Header from '../../../components/Header';\r\nimport TabButton from '../../../components/TabButton';\r\n\r\nconst PackageCompletedOrder = ({ location }) => {\r\n const { pack } = location.state;\r\n\r\n return (\r\n \r\n \r\n\r\n \r\n
\r\n
\r\n
\r\n\r\n
Tudo certo :) \r\n
\r\n\r\n
Sua compra foi concluída \r\n\r\n
\r\n E AGORA? \r\n
\r\n\r\n
\r\n
\r\n
\r\n 1 \r\n
\r\n
\r\n Acabamos de enviar um recibo da compra para seu email. \r\n
\r\n
\r\n\r\n
\r\n
\r\n 2 \r\n
\r\n
\r\n Se você usou cartão de crédito, seu pacote já está disponível. Caso seja boleto aguarde até 2 dias para confirmação. \r\n
\r\n
\r\n\r\n
\r\n
\r\n 3 \r\n
\r\n
\r\n Seu pacote estará disponível para usar por {pack.validity_days} dias após a confirmação de pagamento. \r\n
\r\n
\r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default PackageCompletedOrder;","import styled from 'styled-components';\r\n\r\nexport const ButtonContainer = styled.div`\r\n position: relative;\r\n\r\n .button-more {\r\n background: none;\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n font-size: 1.1rem;\r\n position: absolute;\r\n bottom: 20px;\r\n left: 165px;\r\n };\r\n\r\n @media(max-width: 830px) {\r\n .button-more {\r\n left: 145px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .button-more {\r\n left: 125px;\r\n bottom: 10px;\r\n }\r\n }\r\n\r\n @media(max-width: 500px) {\r\n .button-more {\r\n left: 110px;\r\n bottom: 10px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n .button-more {\r\n left: 98px;\r\n bottom: 10px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .button-more {\r\n left: 97px;\r\n bottom: 10px;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const Container = styled.button`\r\n background-color: #FFFFFF;\r\n border-radius: 18px;\r\n width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n margin: 10px 0;\r\n height: 160px;\r\n border: 1px solid #FA9F2A;\r\n\r\n :hover {\r\n background: #F8F8F8;\r\n }\r\n\r\n .image {\r\n width: 140px;\r\n height: 140px;\r\n border-radius: 16px;\r\n border: 1px solid #f2f2f2;\r\n background-color: #f2f2f2;\r\n margin: 10px 0 10px 10px;\r\n };\r\n\r\n .content {\r\n margin-left: 13px;\r\n margin-right: 17px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n width: 100%;\r\n margin-top: 15px;\r\n };\r\n\r\n .title {\r\n color: #14213D;\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n margin-bottom: 3px;\r\n width: 500px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n };\r\n\r\n .description {\r\n text-transform: uppercase;\r\n color: #C4C4C4;\r\n font-size: 0.9rem;\r\n margin: 10px 0 5px;\r\n text-align: left;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n width: 500px;\r\n };\r\n\r\n .buy-container {\r\n width: 100px !important;\r\n };\r\n\r\n .buy {\r\n background-color: #FA9F2A;\r\n border-radius: 0 16px 0 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin-left: 10px;\r\n overflow: hidden;\r\n margin-left: 13px;\r\n height: 120px;\r\n width: 87px;\r\n };\r\n\r\n .icon-buy {\r\n color: #FFFFFF;\r\n width: 20px;\r\n height: 20px;\r\n };\r\n\r\n .text-buy {\r\n color: #FFFFFF;\r\n font-size: 0.9rem;\r\n };\r\n\r\n .price {\r\n background-color: #E6860B;\r\n border-radius: 16px 0 16px 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 39px;\r\n width: 100px;\r\n };\r\n\r\n .text-price {\r\n color: #FFFFFF;\r\n font-size: 0.9rem;\r\n };\r\n\r\n .price-value {\r\n font-size: 1rem;\r\n };\r\n\r\n @media(max-width: 830px) {\r\n height: 140px;\r\n\r\n .image {\r\n width: 120px;\r\n height: 120px;\r\n align-self: center;\r\n }\r\n\r\n .title {\r\n width: 400px;\r\n }\r\n\r\n .description {\r\n width: 400px;\r\n }\r\n\r\n .buy {\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n height: 120px;\r\n\r\n .image {\r\n width: 100px;\r\n height: 100px;\r\n align-self: center;\r\n }\r\n\r\n .title {\r\n width: 350px;\r\n margin-bottom: 0;\r\n }\r\n\r\n .description {\r\n width: 350px;\r\n }\r\n\r\n .buy-container {\r\n width: 85px !important;\r\n };\r\n\r\n .buy {\r\n height: 90px;\r\n width: 72px;\r\n }\r\n\r\n .price {\r\n height: 29px;\r\n width: 85px;\r\n }\r\n }\r\n\r\n @media(max-width: 600px) {\r\n height: 120px;\r\n\r\n .image {\r\n width: 100px;\r\n height: 100px;\r\n align-self: center;\r\n }\r\n\r\n .title {\r\n width: 250px;\r\n }\r\n\r\n .description {\r\n width: 250px;\r\n }\r\n\r\n .buy-container {\r\n width: 85px !important;\r\n };\r\n\r\n .buy {\r\n height: 90px;\r\n width: 72px;\r\n }\r\n\r\n .price {\r\n height: 29px;\r\n width: 85px;\r\n }\r\n }\r\n\r\n @media(max-width: 500px) {\r\n height: 110px;\r\n\r\n .image {\r\n width: 90px;\r\n height: 90px;\r\n align-self: center;\r\n }\r\n\r\n .title {\r\n width: 200px;\r\n }\r\n\r\n .description {\r\n width: 200px;\r\n }\r\n\r\n .buy-container {\r\n width: 75px !important;\r\n };\r\n\r\n .buy {\r\n height: 80px;\r\n width: 62px;\r\n }\r\n\r\n .price {\r\n height: 29px;\r\n width: 75px;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n height: 100px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n align-self: center;\r\n margin: 5px 0 5px 5px;\r\n }\r\n\r\n .content {\r\n margin-top: 10px;\r\n margin-left: 10px;\r\n }\r\n\r\n .title {\r\n font-size: 1rem;\r\n width: 180px;\r\n }\r\n\r\n .description {\r\n font-size: 0.85rem;\r\n margin-top: 5px;\r\n width: 180px;\r\n }\r\n\r\n .buy-container {\r\n width: 65px !important;\r\n };\r\n\r\n .buy {\r\n height: 70px;\r\n width: 52px;\r\n }\r\n\r\n .price {\r\n height: 29px;\r\n width: 65px;\r\n }\r\n\r\n .text-price {\r\n color: #FFFFFF;\r\n font-size: 0.8rem;\r\n };\r\n\r\n .price-value {\r\n font-size: 0.85rem;\r\n };\r\n\r\n .icon-buy {\r\n color: #FFFFFF;\r\n width: 15px;\r\n height: 15px;\r\n };\r\n\r\n .text-buy {\r\n color: #FFFFFF;\r\n font-size: 0.8rem;\r\n };\r\n }\r\n\r\n @media(max-width: 375px) {\r\n height: 100px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n align-self: center;\r\n margin: 5px 0 5px 5px;\r\n }\r\n\r\n .content {\r\n margin-top: 10px;\r\n margin-left: 10px;\r\n }\r\n\r\n .title {\r\n font-size: 1rem;\r\n width: 150px;\r\n }\r\n\r\n .description {\r\n font-size: 0.85rem;\r\n margin-top: 5px;\r\n width: 150px;\r\n }\r\n\r\n .buy-container {\r\n width: 65px !important;\r\n };\r\n\r\n .buy {\r\n height: 70px;\r\n width: 52px;\r\n }\r\n\r\n .price {\r\n height: 29px;\r\n width: 65px;\r\n }\r\n\r\n .text-price {\r\n color: #FFFFFF;\r\n font-size: 0.8rem;\r\n };\r\n\r\n .price-value {\r\n font-size: 0.85rem;\r\n };\r\n\r\n .icon-buy {\r\n color: #FFFFFF;\r\n width: 15px;\r\n height: 15px;\r\n };\r\n\r\n .text-buy {\r\n color: #FFFFFF;\r\n font-size: 0.8rem;\r\n };\r\n }\r\n\r\n @media(max-width: 340px) {\r\n height: 90px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n align-self: center;\r\n margin: 5px 0 5px 5px;\r\n }\r\n\r\n .content {\r\n margin-top: 10px;\r\n margin-left: 10px;\r\n }\r\n\r\n .title {\r\n font-size: 1rem;\r\n width: 120px;\r\n }\r\n\r\n .description {\r\n font-size: 0.85rem;\r\n margin-top: 5px;\r\n width: 120px;\r\n }\r\n\r\n .buy-container {\r\n width: 65px !important;\r\n };\r\n\r\n .buy {\r\n height: 60px;\r\n width: 52px;\r\n }\r\n\r\n .price {\r\n height: 29px;\r\n width: 65px;\r\n }\r\n\r\n .text-price {\r\n color: #FFFFFF;\r\n font-size: 0.8rem;\r\n };\r\n\r\n .price-value {\r\n font-size: 0.85rem;\r\n };\r\n\r\n .icon-buy {\r\n color: #FFFFFF;\r\n width: 15px;\r\n height: 15px;\r\n };\r\n\r\n .text-buy {\r\n color: #FFFFFF;\r\n font-size: 0.8rem;\r\n };\r\n }\r\n`;","import React from 'react';\r\nimport { formatCurrencyBRL } from '../../../../utils/utils';\r\nimport { Container, ButtonContainer } from './styles';\r\nimport { FiShoppingCart } from 'react-icons/fi';\r\n\r\nconst Product = ({ product, descriptionSelected, addShoppingCard }) => {\r\n return (\r\n \r\n
\r\n addShoppingCard(product)}>\r\n \r\n {product.name} \r\n {product.description} \r\n
\r\n\r\n \r\n
\r\n
\r\n
\r\n
comprar \r\n
\r\n
\r\n R$ {formatCurrencyBRL(product.price).substring(2)} \r\n
\r\n
\r\n\r\n descriptionSelected(product)}\r\n >\r\n + informações \r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {(partner.name).toUpperCase()} \r\n
\r\n\r\n {showShoppingCard &&\r\n
navigation.push('/partnersCheckout', { partner: partner, address: address })}\r\n className=\"shopping-card-button\"\r\n >\r\n \r\n
\r\n
\r\n {quantity} \r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default HeaderBanner;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .button {\r\n background: none;\r\n };\r\n\r\n .container-products {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n padding-bottom: 150px;\r\n }\r\n\r\n #partnerBody {\r\n display: none;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n };\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .container-products {\r\n padding-bottom: 100px;\r\n }\r\n }\r\n`;","import styled from 'styled-components';\r\n\r\nexport const SkeletonLoader = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n`;\r\n\r\nexport const GroupSkeletons = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n margin-top: 15px;\r\n\r\n .today-skeleton {\r\n width: 800px;\r\n height: 160px;\r\n border-radius: 20px;\r\n margin: 10px 0;\r\n }\r\n\r\n @media(max-width: 920px) {\r\n .today-skeleton {\r\n width: 700px;\r\n height: 140px;\r\n }\r\n }\r\n\r\n @media(max-width: 740px) {\r\n .today-skeleton {\r\n width: 600px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 700px) {\r\n .today-skeleton {\r\n width: 500px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 520px) {\r\n .today-skeleton {\r\n width: 400px;\r\n height: 120px;\r\n }\r\n }\r\n\r\n @media(max-width: 410px) {\r\n .today-skeleton {\r\n width: 350px;\r\n height: 100px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .today-skeleton {\r\n width: 300px;\r\n height: 100px;\r\n }\r\n }\r\n`;","import React from 'react';\r\nimport { SkeletonLoader, GroupSkeletons } from './styles';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\nconst SkeletonPartner = () => {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default SkeletonPartner;","import React, { useState, useEffect } from 'react';\r\nimport { getProductsPartners } from '../../api/partners';\r\nimport Product from './components/Product';\r\nimport HeaderBanner from './components/HeaderBanner';\r\nimport { getPartnerAddressValidation } from '../../api/partners';\r\nimport { toast } from 'react-toastify';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ModalAddress from '../../components/Modals/ModalAddress';\r\nimport { Container } from './styles';\r\nimport Header from '../../components/Header';\r\nimport ModalMoreInformation from '../../components/Modals/ModalMoreInformation';\r\nimport Footer from '../../components/Footer';\r\nimport TabButton from '../../components/TabButton';\r\nimport SkeletonPartner from './components/SkeletonPartner';\r\nimport { debounce } from 'throttle-debounce';\r\n\r\nconst PartnerProductOrder = ({ location }) => {\r\n const navigation = useHistory();\r\n const [address, setAddress] = useState(location.state?.address);\r\n let partner = location.state?.partner;\r\n let idPartner = partner?.id;\r\n const [products, setProducts] = useState([]);\r\n const [quantity, setQuantity] = useState(0);\r\n const [showModalDescription, setShowModalVisible] = useState(false);\r\n const [showModalAddress, setShowModalAddress] = useState(false);\r\n const [selectAddressMessage, setSelectAddressMessage] = useState('');\r\n const [descriptionSelected, setDescriptionSelected] = useState();\r\n const [arrayProducts, setArrayProducts] = useState([]);\r\n const [loadingSkeleton, setLoadingSkeleton] = useState(false);\r\n const [go, setGo] = useState(false);\r\n\r\n if (location.state.af_deeplink) {\r\n partner = location.state;\r\n idPartner = location.state.id;\r\n }\r\n\r\n const cancelLoading = () => {\r\n setTimeout(() => {\r\n if (document.getElementById('partnerBody')) {\r\n document.getElementById('partnerBody').style.display = 'flex';\r\n }\r\n setLoadingSkeleton(false);\r\n }, 1000);\r\n }\r\n\r\n const getAllProducts = async () => {\r\n try {\r\n await getProductsPartners(idPartner, setProducts);\r\n cancelLoading();\r\n } catch (error) {\r\n toast.error(error.message);\r\n cancelLoading();\r\n }\r\n }\r\n\r\n const addShoppingCard = (product) => {\r\n let value = arrayProducts.findIndex(prod => prod.id === product.id);\r\n\r\n if (value === -1) {\r\n product.quantity = 1;\r\n setArrayProducts(oldArray => [...oldArray, product]);\r\n } else {\r\n let prod = arrayProducts.find(prod => prod.id === product.id);\r\n prod.quantity += 1;\r\n arrayProducts.splice(value, 1, prod);\r\n }\r\n\r\n setGo(true);\r\n }\r\n\r\n const afterSelectAddress = async (address) => {\r\n try {\r\n let available = await getPartnerAddressValidation(partner.id, address.id);\r\n\r\n if (available.available) {\r\n setAddress(address);\r\n setShowModalAddress(false);\r\n setSelectAddressMessage('');\r\n } else {\r\n setSelectAddressMessage('Parceiro indisponível no endereço selecionado');\r\n }\r\n } catch (error) {\r\n toast.error(error.message);\r\n }\r\n }\r\n\r\n const countQuantity = () => {\r\n var value = 0;\r\n\r\n arrayProducts.map(product => {\r\n value += product.quantity;\r\n });\r\n\r\n setQuantity(value);\r\n }\r\n\r\n const getProductsBySync = () => {\r\n setArrayProducts(JSON.parse(localStorage.getItem('products')) || []);\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (!address && isMounted) {\r\n if (document.getElementById('partnerBody')) {\r\n document.getElementById('partnerBody').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setShowModalAddress(true);\r\n } else if (isMounted) {\r\n if (document.getElementById('partnerBody')) {\r\n document.getElementById('partnerBody').style.display = 'none';\r\n }\r\n setLoadingSkeleton(true);\r\n setTimeout(() => debounce(5000, getAllProducts()), 1500);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, [address]);\r\n\r\n useEffect(() => {\r\n if (arrayProducts.length > 0 && go) {\r\n setGo(false);\r\n localStorage.setItem('products', JSON.stringify(arrayProducts));\r\n\r\n navigation.push('/partnersCheckout', { partner: partner, address: address });\r\n }\r\n\r\n if (arrayProducts.length > 0) {\r\n countQuantity();\r\n } else {\r\n setQuantity(0);\r\n }\r\n }, [arrayProducts, go]);\r\n\r\n useEffect(() => {\r\n getProductsBySync();\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n\r\n afterSelectAddress(address)}\r\n warningMessage={selectAddressMessage}\r\n checkResidentialAvailability={true}\r\n message={`Selecione o endereço onde deseja receber os produtos do nosso parceiro `}\r\n partner={partner.name}\r\n />\r\n\r\n {showModalDescription &&\r\n setShowModalVisible(val)}\r\n title={descriptionSelected?.name}\r\n body={descriptionSelected?.description}\r\n />\r\n }\r\n\r\n \r\n
\r\n\r\n {loadingSkeleton &&\r\n
\r\n }\r\n\r\n
\r\n\r\n
\r\n {products.length > 0 &&\r\n products.map(product => {\r\n return (\r\n
addShoppingCard(val)}\r\n descriptionSelected={val => { setDescriptionSelected(val); setShowModalVisible(true) }}\r\n />\r\n );\r\n })\r\n }\r\n \r\n
\r\n\r\n {!loadingSkeleton &&\r\n
\r\n }\r\n
\r\n );\r\n}\r\n\r\nexport default PartnerProductOrder;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n background-color: #FFF;\r\n width: 800px;\r\n display: flex;\r\n flex-direction: column;\r\n align-self: center;\r\n height: 160px;\r\n position: relative;\r\n margin-top: 15px;\r\n margin-bottom: 15px;\r\n border: 1px solid #FA9F2A;\r\n border-radius: 18px;\r\n\r\n .container-content {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n padding-bottom: 10px;\r\n };\r\n\r\n .image {\r\n border-radius: 18px;\r\n width: 120px;\r\n height: 120px;\r\n margin-left: 10px;\r\n margin-top: 10px;\r\n };\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n margin-left: 13px;\r\n };\r\n\r\n .title {\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n width: 550px;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n text-align: left;\r\n margin-bottom: 5px;\r\n };\r\n\r\n .description {\r\n color: #B7B7B7;\r\n font-size: 1rem;\r\n text-align: left;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n width: 640px;\r\n };\r\n\r\n .button-more {\r\n background: none;\r\n display: flex;\r\n align-items: flex-start;\r\n margin-top: 5px;\r\n }\r\n\r\n .text-button-more {\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n font-size: 1rem;\r\n };\r\n\r\n .back-quantity {\r\n background-color: #FFF;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 300px;\r\n align-self: flex-end;\r\n border: 1px solid #CFCFCF;\r\n border-radius: 20px;\r\n padding: 5px;\r\n margin-top: -35px;\r\n margin-right: 10px;\r\n };\r\n\r\n .button {\r\n background-color: #FA9F2A;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 9px 10px;\r\n border-radius: 100%;\r\n };\r\n\r\n .quantity {\r\n color: #707070;\r\n font-size: 0.9rem;\r\n };\r\n\r\n .text-button {\r\n color: #FFF;\r\n };\r\n\r\n .price {\r\n border: 1px solid #14213D;\r\n border-radius: 17px 17px 0 17px;\r\n padding: 7px 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n };\r\n\r\n .text-price {\r\n color: #14213D;\r\n font-size: 0.9rem;\r\n };\r\n\r\n .price-value {\r\n font-size: 1rem;\r\n };\r\n\r\n @media(max-width: 840px) {\r\n width: 600px;\r\n height: 140px;\r\n\r\n .image {\r\n width: 110px;\r\n height: 110px;\r\n }\r\n\r\n .title {\r\n width: 350px;\r\n font-size: 1rem;\r\n }\r\n\r\n .description {\r\n width: 450px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .text-button-more {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .back-quantity {\r\n margin-top: -40px;\r\n width: 200px;\r\n }\r\n\r\n .button {\r\n padding: 7px 8px;\r\n }\r\n\r\n .quantity {\r\n font-size: 0.9rem;\r\n };\r\n\r\n .text-price {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .price-value {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 630px) {\r\n width: 500px;\r\n height: 130px;\r\n\r\n .image {\r\n width: 100px;\r\n height: 100px;\r\n }\r\n\r\n .title {\r\n width: 290px;\r\n font-size: 1rem;\r\n }\r\n\r\n .description {\r\n width: 380px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .text-button-more {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .back-quantity {\r\n margin-top: -40px;\r\n width: 150px;\r\n }\r\n\r\n .button {\r\n padding: 7px 8px;\r\n }\r\n\r\n .quantity {\r\n font-size: 0.9rem;\r\n };\r\n\r\n .text-price {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .price-value {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 530px) {\r\n width: 400px;\r\n height: 120px;\r\n\r\n .image {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n\r\n .title {\r\n width: 200px;\r\n font-size: 1rem;\r\n }\r\n\r\n .description {\r\n width: 260px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .text-button-more {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .back-quantity {\r\n margin-top: -35px;\r\n width: 150px;\r\n }\r\n\r\n .button {\r\n padding: 7px 8px;\r\n }\r\n\r\n .quantity {\r\n font-size: 0.9rem;\r\n };\r\n\r\n .text-price {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .price-value {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 425px) {\r\n width: 350px;\r\n height: 145px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .title {\r\n width: 150px;\r\n font-size: 1rem;\r\n }\r\n\r\n .description {\r\n width: 220px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .text-button-more {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .back-quantity {\r\n margin-top: -2px;\r\n align-self: center;\r\n margin-left: 10px;\r\n width: 250px;\r\n }\r\n\r\n .button {\r\n padding: 7px 8px;\r\n }\r\n\r\n .quantity {\r\n font-size: 0.9rem;\r\n };\r\n\r\n .price {\r\n padding: 5px 6px;\r\n }\r\n\r\n .text-price {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .price-value {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n width: 300px;\r\n height: 145px;\r\n\r\n .image {\r\n width: 80px;\r\n height: 80px;\r\n }\r\n\r\n .title {\r\n width: 120px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n .description {\r\n width: 190px;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .text-button-more {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .back-quantity {\r\n margin-top: -2px;\r\n align-self: center;\r\n margin-left: 10px;\r\n width: 200px;\r\n }\r\n\r\n .button {\r\n padding: 7px 8px;\r\n }\r\n\r\n .quantity {\r\n font-size: 0.9rem;\r\n };\r\n\r\n .price {\r\n padding: 5px 6px;\r\n }\r\n\r\n .text-price {\r\n font-size: 0.80rem;\r\n }\r\n\r\n .price-value {\r\n font-size: 0.85rem;\r\n }\r\n }\r\n`;","import React, { useState } from 'react';\r\nimport { formatCurrencyBRL } from '../../../../../utils/utils';\r\nimport { FiPlus, FiMinus } from 'react-icons/fi';\r\nimport { Container } from './styles';\r\n\r\nconst ProductCheckout = ({ product, doUpdate, showModal }) => {\r\n const [quantity, setQuantity] = useState(product.quantity);\r\n\r\n return (\r\n \r\n \r\n
\r\n\r\n
\r\n {product.name} \r\n {product.description} \r\n showModal(true)}\r\n className=\"button-more\"\r\n >\r\n + informações \r\n \r\n
\r\n\r\n
\r\n R$ {formatCurrencyBRL(product.price).substring(2)} \r\n
\r\n
\r\n { doUpdate('minus'); quantity > 0 && setQuantity(quantity => quantity - 1) }}>\r\n \r\n {quantity} \r\n { doUpdate('plus'); setQuantity(quantity => quantity + 1) }}>\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default ProductCheckout;","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n .container-body {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding-bottom: 150px;\r\n };\r\n \r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n };\r\n\r\n .button-continue {\r\n align-self: center;\r\n margin-top: 20px;\r\n background: none;\r\n };\r\n\r\n .text-continue {\r\n color: #FA9F2A;\r\n text-decoration: underline;\r\n align-self: center;\r\n font-size: 1rem;\r\n };\r\n\r\n .message-text {\r\n font-size: 1.2rem;\r\n color: #B7B7B7;\r\n text-align: center;\r\n margin: 20px 0;\r\n };\r\n\r\n .button-go-back {\r\n background-color: #FA9F2A;\r\n border-radius: 20px;\r\n padding: 15px 0;\r\n width: 400px;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n margin-top: 20px;\r\n };\r\n\r\n .text-go-back {\r\n font-size: 1rem;\r\n color: #FFF;\r\n };\r\n\r\n .container-payments {\r\n background-color: #FFF;\r\n width: 650px;\r\n display: flex;\r\n flex-direction: column;\r\n align-self: center;\r\n padding: 20px 0;\r\n border-radius: 18px;\r\n margin: 20px 5px;\r\n };\r\n\r\n .title-payment {\r\n text-align: center;\r\n color: #14213D;\r\n font-size: 1rem;\r\n font-weight: bold;\r\n margin-bottom: 15px;\r\n };\r\n\r\n .address-text {\r\n margin-bottom: 10px;\r\n margin-left: 30px;\r\n color: #14213D;\r\n font-size: 1rem;\r\n font-weight: 300;\r\n };\r\n\r\n .text-description {\r\n font-weight: bold;\r\n };\r\n\r\n .total {\r\n text-align: center;\r\n color: #14213D;\r\n font-size: 1rem;\r\n font-weight: 300;\r\n margin-bottom: 5px;\r\n };\r\n\r\n .total-value {\r\n font-weight: bold;\r\n };\r\n\r\n .button-finish {\r\n width: 100%;\r\n background-color: #FA9F2A;\r\n border-radius: 20px;\r\n padding: 15px 0;\r\n align-self: center;\r\n };\r\n\r\n .button-disabled {\r\n width: 100%;\r\n background-color: #707070;\r\n border-radius: 20px;\r\n padding: 15px 0;\r\n align-self: center;\r\n };\r\n\r\n .text-finish {\r\n text-align: center;\r\n color: #FFFFFF;\r\n font-size: 1.1rem;\r\n };\r\n\r\n @media(max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .container-body {\r\n padding-bottom: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 840px) {\r\n .container-payments {\r\n width: 450px;\r\n }\r\n }\r\n\r\n @media(max-width: 630px) {\r\n .button-finish,\r\n .button-disabled {\r\n width: 90%;\r\n }\r\n\r\n .button-go-back {\r\n width: 300px;\r\n };\r\n\r\n .text-go-back {\r\n font-size: 1rem;\r\n };\r\n }\r\n\r\n @media(max-width: 460px) {\r\n .container-payments {\r\n width: 350px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .container-payments {\r\n width: 310px;\r\n }\r\n\r\n .button-go-back {\r\n width: 200px;\r\n };\r\n\r\n .text-go-back {\r\n font-size: 0.9rem;\r\n };\r\n }\r\n`;","import React, { useState, useEffect } from 'react';\r\nimport HeaderBanner from '../components/HeaderBanner';\r\nimport ProductCheckout from './components/ProductCheckout';\r\nimport { formatCurrencyBRL } from '../../../utils/utils';\r\nimport PaymentView from '../../ServiceOrder/components/PaymentView';\r\nimport { makeCreatePartnerOrder } from '../../../api/partners';\r\nimport { toast } from 'react-toastify';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Container } from './styles';\r\nimport ModalMoreInformation from '../../../components/Modals/ModalMoreInformation';\r\nimport Header from '../../../components/Header';\r\nimport Footer from '../../../components/Footer';\r\nimport TabButton from '../../../components/TabButton';\r\nimport LoaderSpinner from '../../../components/LoaderSpinner';\r\n\r\nconst PartnersCheckout = ({ location }) => {\r\n const navigation = useHistory();\r\n const [loading, setLoading] = useState(false);\r\n const { partner, address } = location.state;\r\n const [products, setProducts] = useState([]);\r\n const [showModal, setShowModal] = useState(false);\r\n const [total, setTotal] = useState(0.0);\r\n const [descriptionSelected, setDescriptionSelected] = useState();\r\n const [methodPayment, setMethodPayment] = useState({});\r\n\r\n const makePaymentProduct = async () => {\r\n try {\r\n setLoading(true);\r\n const arrayProd = [];\r\n\r\n products.map(product => {\r\n arrayProd.push({ id: product.id, quantity: product.quantity });\r\n });\r\n\r\n let response = await makeCreatePartnerOrder(partner.id, address.id, methodPayment.method, methodPayment.card, arrayProd);\r\n\r\n if (response.id) {\r\n setLoading(false);\r\n toast.success('Pedido feito com sucesso!');\r\n\r\n navigation.push('/partnerCompletedOrder', { partner: partner });\r\n }\r\n setLoading(false);\r\n\r\n } catch (error) {\r\n toast.error(error.message);\r\n setLoading(false);\r\n }\r\n }\r\n\r\n const getProductsBySync = () => {\r\n setProducts(JSON.parse(localStorage.getItem('products')) || []);\r\n }\r\n\r\n const updateQuantity = (product, sign) => {\r\n let value = products.findIndex(prod => prod.id === product.id);\r\n\r\n if (sign === 'plus') {\r\n product.quantity += 1;\r\n products.splice(value, 1, product);\r\n localStorage.setItem('products', JSON.stringify(products));\r\n } else if (product.quantity > 1) {\r\n product.quantity -= 1;\r\n products.splice(value, 1, product);\r\n localStorage.setItem('products', JSON.stringify(products));\r\n } else {\r\n products.splice(value, 1);\r\n localStorage.setItem('products', JSON.stringify(products));\r\n }\r\n\r\n setTotal(totalCalculate(products));\r\n }\r\n\r\n const totalCalculate = () => {\r\n var value = 0;\r\n\r\n products.forEach(product => {\r\n value += (product.price * product.quantity);\r\n });\r\n\r\n return value;\r\n }\r\n\r\n const goBack = () => {\r\n navigation.push(\"/partner\", { partner: partner, address: address });\r\n }\r\n\r\n useEffect(() => {\r\n getProductsBySync();\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (products.length > 0 && total === 0.0) {\r\n setTotal(totalCalculate(products));\r\n }\r\n }, [products]);\r\n\r\n return (\r\n \r\n \r\n setShowModal(val)}\r\n title={descriptionSelected?.name}\r\n body={descriptionSelected?.description}\r\n />\r\n }\r\n\r\n \r\n
\r\n\r\n
\r\n
\r\n {products.length > 0 ?\r\n products.map(product => {\r\n return (\r\n
updateQuantity(product, sign)}\r\n showModal={val => { setDescriptionSelected(product); setShowModal(val) }}\r\n />\r\n );\r\n })\r\n :\r\n não há produtos no seu carrinho! \r\n }\r\n \r\n\r\n {products.length > 0 ?\r\n
\r\n continue comprando \r\n \r\n :\r\n \r\n voltar para produtos \r\n \r\n }\r\n\r\n {products.length > 0 &&\r\n \r\n
PAGAMENTO \r\n\r\n
Envio para: {address.description} \r\n\r\n
\r\n\r\n
Total: R${formatCurrencyBRL(total).substring(2)} \r\n\r\n
\r\n concluir pedido \r\n \r\n \r\n\r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default PartnersCheckout;","import styled from \"styled-components\";\r\nimport imgSrc from \"../../../assets/images/bg-complete-order-light.jpg\";\r\n\r\nexport const BackgroundImage = styled.div`\r\n .background-body {\r\n background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${imgSrc});\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n .yellow-clock-view {\r\n display: flex;\r\n background-color: #ffff00;\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 60px;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 78px auto 30px;\r\n }\r\n\r\n .green-check-view {\r\n display: flex;\r\n background-color: #50B041;\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 60px;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 78px auto 30px;\r\n }\r\n\r\n .text-pix {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n }\r\n\r\n .text-message {\r\n width: 100%;\r\n padding: 0 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .text-ok {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n .pix-code-view {\r\n background-color: #FFFFFF;\r\n width: 550px;\r\n border-radius: 18px;\r\n display: flex;\r\n justify-content: center;\r\n height: 60px;\r\n align-self: center;\r\n align-items: center;\r\n margin: 20px 0;\r\n cursor: pointer;\r\n }\r\n\r\n .copy-text {\r\n font-size: 0.9rem;\r\n color: #4BB543;\r\n }\r\n\r\n .pix-code-text {\r\n font-size: 0.9rem;\r\n color: #707070;\r\n margin-right: 20px;\r\n }\r\n\r\n .info-tags {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n display: flex;\r\n align-items: center;\r\n background-color: #fff;\r\n width: 550px;\r\n border-radius: 20px;\r\n margin-bottom: 10px;\r\n justify-content: flex-start;\r\n height: 100px;\r\n }\r\n\r\n .icon-one-click,\r\n .one-two-number-text {\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: #14213D;\r\n font-size: 1.2rem;\r\n height: 100px;\r\n padding: 0 25px;\r\n border-radius: 19px 0 0 19px;\r\n font-weight: 700;\r\n }\r\n\r\n .icon-one-click {\r\n background-color: #FA9F2A;\r\n padding: 0 15px;\r\n }\r\n\r\n .mail-clock-view {\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n justify-content: center;\r\n margin: 0 10px;\r\n }\r\n\r\n .info-one-two-text {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .one-two-text {\r\n font-size: 1rem;\r\n margin: 0 15px;\r\n color: #707070;\r\n padding-right: 10px;\r\n text-align: left;\r\n }\r\n\r\n .avaliable-now {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 60px 0;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .background-body {\r\n padding-bottom: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 900px) {\r\n .green-check-view,\r\n .yellow-clock-view {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n .green-check-view > svg,\r\n .yellow-clock-view > svg {\r\n width: 40px;\r\n }\r\n\r\n .text-ok,\r\n .text-pix {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .pix-code-view {\r\n width: 450px;\r\n height: 50px;\r\n }\r\n\r\n .copy-text,\r\n .pix-code-text {\r\n font-size: 0.85rem;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n width: 450px;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .green-check-view,\r\n .yellow-clock-view {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n\r\n .green-check-view > svg,\r\n .yellow-clock-view > svg {\r\n width: 40px;\r\n }\r\n\r\n .text-ok,\r\n .text-pix {\r\n font-size: 1rem;\r\n }\r\n\r\n .pix-code-view {\r\n width: 350px;\r\n height: 50px;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n width: 350px;\r\n height: 80px;\r\n }\r\n\r\n .icon-one-click,\r\n .one-two-number-text {\r\n height: 80px;\r\n padding: 0 15px;\r\n }\r\n\r\n .icon-one-click {\r\n padding: 0 4px;\r\n }\r\n\r\n .one-two-text {\r\n font-size: 0.9rem;\r\n margin: 0 10px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .green-check-view,\r\n .yellow-clock-view {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n\r\n .green-check-view > svg,\r\n .yellow-clock-view > svg {\r\n width: 30px;\r\n }\r\n\r\n .text-ok,\r\n .text-pix {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .pix-code-view {\r\n width: 300px;\r\n height: 50px;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n width: 300px;\r\n height: 80px;\r\n }\r\n\r\n .one-two-text {\r\n font-size: 0.85rem;\r\n margin: 0 5px;\r\n }\r\n }\r\n`;\r\n\r\nexport const InfoView = styled.div`\r\n margin-bottom: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n\r\n .info-text {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.1rem;\r\n width: 600px;\r\n }\r\n\r\n .info-text span {\r\n font-weight: 700;\r\n }\r\n\r\n @media(max-width: 900px) {\r\n .info-text {\r\n width: 450px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .info-text {\r\n width: 350px;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .info-text {\r\n width: 300px;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const AndNowBanner = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 20px;\r\n\r\n .and-now-banner {\r\n background: #14213d;\r\n border-radius: 20px;\r\n padding: 20px 0;\r\n width: 500px;\r\n text-align: center;\r\n font-size: 1.1rem;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .and-now-banner {\r\n width: 400px;\r\n padding: 15px 0;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .and-now-banner {\r\n width: 300px;\r\n padding: 15px 0;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .and-now-banner {\r\n width: 250px;\r\n padding: 15px 0;\r\n font-size: 0.85rem;\r\n }\r\n }\r\n`;\r\n","import React from 'react';\r\nimport { FiClock, FiSend, FiCheck } from 'react-icons/fi';\r\nimport Header from '../../../components/Header';\r\nimport { InfoView, AndNowBanner, BackgroundImage } from './styles';\r\n\r\nconst PartnerCompletedOrder = ({ location }) => {\r\n const { partner } = location.state;\r\n\r\n return (\r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n
Tudo certo :) \r\n
\r\n\r\n
\r\n
\r\n Seu pedido foi concluído \r\n \r\n\r\n
\r\n \r\n E AGORA? \r\n
\r\n \r\n\r\n
\r\n
1 \r\n\r\n
\r\n
\r\n\r\n
Enviamos todas as informações do pedido para seu email. \r\n
\r\n\r\n
\r\n
2 \r\n\r\n
\r\n
\r\n\r\n
Seus produtos serão enviados em {partner.delivery_term} \r\n
\r\n
\r\n
\r\n
\r\n Olá! Muito legal que você entrou no aplicativo web da POSHER! Identificamos que você possui um AdBlocker instalado. Para poder usar nosso aplicativo web você precisará desabilitar o AdBlocker para nosso site. Por favor siga com o desbloqueio na área de configuração do seu computador e em seguida clique no botão abaixo para aproveitar tudo que nosso aplicativo oferece! \r\n Seguir para POSHER \r\n \r\n );\r\n}\r\n\r\nexport default AdblockCard;","import styled from \"styled-components\";\r\nimport imgSrc from \"../../../../assets/images/bg-complete-order-light.jpg\";\r\n\r\nexport const BackgroundImage = styled.div`\r\n .background-body {\r\n background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${imgSrc});\r\n background-repeat: no-repeat;\r\n background-size: cover;\r\n background-position: center;\r\n }\r\n\r\n .yellow-clock-view {\r\n display: flex;\r\n background-color: #ffff00;\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 60px;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 78px auto 30px;\r\n }\r\n\r\n .green-check-view {\r\n display: flex;\r\n background-color: #50B041;\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 60px;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 78px auto 30px;\r\n }\r\n\r\n .text-pix {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n }\r\n\r\n .text-message {\r\n width: 100%;\r\n padding: 0 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .text-ok {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n }\r\n\r\n .pix-code-view {\r\n background-color: #FFFFFF;\r\n width: 550px;\r\n border-radius: 18px;\r\n display: flex;\r\n justify-content: center;\r\n height: 60px;\r\n align-self: center;\r\n align-items: center;\r\n margin: 20px 0;\r\n cursor: pointer;\r\n }\r\n\r\n .copy-text {\r\n font-size: 1.2rem;\r\n color: #4BB543;\r\n }\r\n\r\n .pix-code-text {\r\n font-size: 1.2rem;\r\n color: #707070;\r\n margin-right: 20px;\r\n }\r\n\r\n .info-tags {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n display: flex;\r\n align-items: center;\r\n background-color: #fff;\r\n width: 550px;\r\n border-radius: 20px;\r\n margin-bottom: 10px;\r\n justify-content: flex-start;\r\n height: 100px;\r\n }\r\n\r\n .icon-one-click,\r\n .one-two-number-text {\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: #14213D;\r\n font-size: 1.2rem;\r\n height: 100px;\r\n padding: 0 25px;\r\n border-radius: 19px 0 0 19px;\r\n font-weight: 700;\r\n }\r\n\r\n .icon-one-click {\r\n background-color: #FA9F2A;\r\n padding: 0 15px;\r\n }\r\n\r\n .mail-clock-view {\r\n display: flex;\r\n align-items: center;\r\n align-content: center;\r\n justify-content: center;\r\n margin: 0 10px;\r\n }\r\n\r\n .info-one-two-text {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .one-two-text {\r\n font-size: 1rem;\r\n margin: 0 15px;\r\n color: #707070;\r\n padding-right: 10px;\r\n text-align: left;\r\n }\r\n\r\n .avaliable-now {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 60px 0;\r\n }\r\n\r\n .qr-code {\r\n margin: 20px 0 0;\r\n background-color: #FFF;\r\n width: 550px;\r\n border-radius: 18px;\r\n display: flex;\r\n justify-content: center;\r\n padding: 20px 0;\r\n align-self: center;\r\n align-items: center;\r\n }\r\n\r\n @media(max-width: 960px) {\r\n .background-body {\r\n padding-bottom: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 900px) {\r\n .green-check-view,\r\n .yellow-clock-view {\r\n width: 70px;\r\n height: 70px;\r\n }\r\n\r\n .green-check-view > svg,\r\n .yellow-clock-view > svg {\r\n width: 40px;\r\n }\r\n\r\n .text-ok,\r\n .text-pix {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .pix-code-view {\r\n width: 450px;\r\n height: 50px;\r\n }\r\n\r\n .qr-code {\r\n width: 450px;\r\n }\r\n\r\n .copy-text,\r\n .pix-code-text {\r\n font-size: 1rem;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n width: 450px;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .green-check-view,\r\n .yellow-clock-view {\r\n width: 60px;\r\n height: 60px;\r\n }\r\n\r\n .green-check-view > svg,\r\n .yellow-clock-view > svg {\r\n width: 40px;\r\n }\r\n\r\n .text-ok,\r\n .text-pix {\r\n font-size: 1rem;\r\n }\r\n\r\n .pix-code-view {\r\n width: 350px;\r\n height: 50px;\r\n }\r\n\r\n .qr-code {\r\n width: 350px;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n width: 350px;\r\n height: 80px;\r\n }\r\n\r\n .icon-one-click,\r\n .one-two-number-text {\r\n height: 80px;\r\n padding: 0 15px;\r\n }\r\n\r\n .icon-one-click {\r\n padding: 0 4px;\r\n }\r\n\r\n .one-two-text {\r\n font-size: 0.9rem;\r\n margin: 0 10px;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .green-check-view,\r\n .yellow-clock-view {\r\n width: 50px;\r\n height: 50px;\r\n }\r\n\r\n .green-check-view > svg,\r\n .yellow-clock-view > svg {\r\n width: 30px;\r\n }\r\n\r\n .text-ok,\r\n .text-pix {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .pix-code-view {\r\n width: 300px;\r\n height: 50px;\r\n }\r\n\r\n .qr-code {\r\n width: 300px;\r\n }\r\n\r\n .one-click-banner,\r\n .one-two-banner {\r\n width: 300px;\r\n height: 80px;\r\n }\r\n\r\n .one-two-text {\r\n font-size: 0.85rem;\r\n margin: 0 5px;\r\n }\r\n }\r\n`;\r\n\r\nexport const InfoView = styled.div`\r\n margin-bottom: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n\r\n .info-text {\r\n margin-top: 1rem;\r\n text-align: center;\r\n color: #fff;\r\n font-size: 1.1rem;\r\n width: 400px;\r\n }\r\n\r\n .info-text span {\r\n font-weight: 700;\r\n }\r\n\r\n @media(max-width: 900px) {\r\n .info-text {\r\n width: 450px;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .info-text {\r\n width: 350px;\r\n font-size: 0.95rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .info-text {\r\n width: 300px;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const AndNowBanner = styled.div`\r\n display: flex;\r\n width: 100%;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 10px 0 20px 0;\r\n\r\n .and-now-banner {\r\n background: #14213d;\r\n border-radius: 20px;\r\n padding: 20px 0;\r\n width: 500px;\r\n text-align: center;\r\n font-size: 1.1rem;\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .and-now-banner {\r\n width: 400px;\r\n padding: 15px 0;\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n @media(max-width: 490px) {\r\n .and-now-banner {\r\n width: 300px;\r\n padding: 15px 0;\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .and-now-banner {\r\n width: 250px;\r\n padding: 15px 0;\r\n font-size: 0.85rem;\r\n }\r\n }\r\n`;\r\n","import React, { useState } from \"react\";\r\nimport { FiCheck, FiMail, FiClock, FiKey, FiCopy } from \"react-icons/fi\";\r\nimport AvailableNow from \"../../components/AvailableNow\";\r\nimport { getDayName } from \"../../../../utils/utils\";\r\nimport Moment from \"moment-timezone\";\r\nimport { AndNowBanner, BackgroundImage, InfoView } from './styles';\r\nimport Header from \"../../../../components/Header\";\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport TabButton from \"../../../../components/TabButton\";\r\nimport QRCode from \"react-qr-code\";\r\nimport { useResponsiveValue } from '@theme-ui/match-media';\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nconst CompleteOrderApproval = ({ location }) => {\r\n const history = useHistory();\r\n\r\n if (!location.state) {\r\n history.goBack();\r\n }\r\n\r\n const [copy, setCopy] = useState(false);\r\n const numberSizes = useResponsiveValue(['100', '150', '180', '220']);\r\n\r\n const {\r\n state: {\r\n pixCode,\r\n orderType,\r\n paymentMethod,\r\n serviceName,\r\n scheduledDate\r\n } = {}\r\n } = location;\r\n\r\n\r\n const dayOfWeek = getDayName(scheduledDate);\r\n\r\n const copyPixCode = () => {\r\n setCopy(true);\r\n setTimeout(() => setCopy(false), 2000);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n\r\n \r\n {paymentMethod === \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
Pague AGORA com o Pix para confirmar o agendamento \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
Tudo certo! \r\n
\r\n )}\r\n\r\n {paymentMethod === 'pix' && pixCode && (\r\n
\r\n
\r\n )}\r\n\r\n {paymentMethod === \"pix\" && pixCode && (\r\n
copyPixCode()}>\r\n {copy ? (\r\n \r\n Código copiado! \r\n
\r\n ) : (\r\n \r\n ou use o código Pix Copia e Cola! \r\n
\r\n )}\r\n \r\n )}\r\n\r\n {paymentMethod === 'pix' &&\r\n
\r\n \r\n \r\n Sua solicitação de {serviceName} foi confirmada para {dayOfWeek} \r\n {Moment(scheduledDate).tz(\"America/Sao_Paulo\").format('DD/MM')} está aguardando pagamento.\r\n \r\n \r\n \r\n
\r\n }\r\n\r\n
\r\n \r\n E AGORA? \r\n
\r\n \r\n\r\n
\r\n
1 \r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviamos todas as informações do agendamento para seu email.\r\n \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
\r\n Pague com PIX usando a chave fornecida ou o QR Code enviado em seu email.\r\n \r\n
\r\n )}\r\n
\r\n\r\n
\r\n
2 \r\n {paymentMethod !== \"pix\" ? (\r\n
\r\n
\r\n
\r\n\r\n
\r\n No horário combinado se dirija ao local do serviço. O profissional estará te aguardando. \r\n
\r\n ) : (\r\n
\r\n
\r\n
\r\n\r\n
\r\n O agendamento será cancelado se o pagamento não for realizado em até 10 minutos.\r\n \r\n
\r\n )}\r\n
\r\n\r\n
\r\n
\r\n \r\n )\r\n}\r\n\r\nexport default CompleteOrderApproval;","import { fetchWithTimeout, header } from './helper/request';\r\nimport {\r\n API_SCHEDULE,\r\n DATES,\r\n MAP,\r\n PLACES,\r\n POSITIONS,\r\n POSITION_TYPES,\r\n SCHEDULES,\r\n TIMES,\r\n} from './helper/api_urls';\r\nimport { getSectionsCatchErrors } from './getSectionsCatchErrors';\r\nimport { getUser } from '../utils/auth';\r\n\r\nconst getPlaces = async () => {\r\n let validationError = false;\r\n\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}`,\r\n get_bearer_common,\r\n );\r\n if (response.ok) {\r\n const data = response.data;\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de edifícios');\r\n }\r\n }\r\n};\r\n\r\nconst getDates = async build => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}/${build}${DATES}`,\r\n get_bearer_common,\r\n );\r\n if (response.ok) {\r\n const data = response.data;\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de datas');\r\n }\r\n }\r\n};\r\n\r\nconst getTimes = async (build, date) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}/${build}${DATES}/${date}${TIMES}`,\r\n get_bearer_common,\r\n );\r\n if (response.ok) {\r\n const data = response.data;\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(\r\n error,\r\n 'Erro ao realizar consulta de horários disponíveis',\r\n );\r\n }\r\n }\r\n};\r\n\r\nconst getPositionTypes = async buildingId => {\r\n let validationError = false;\r\n\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}/${buildingId}${POSITION_TYPES}`,\r\n get_bearer_common,\r\n );\r\n\r\n if (response.ok) {\r\n const data = response.data;\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(\r\n error,\r\n 'Erro ao realizar consulta de tipos de posições',\r\n );\r\n }\r\n }\r\n};\r\n\r\nconst getPositionsMapUrl = (buildingId, positionType, dateFrom, dateTo) => {\r\n return `${API_SCHEDULE}${PLACES}/${buildingId}${POSITIONS}/${positionType}${MAP}?date_from=${dateFrom}&date_to=${dateTo}&token=${getUser().token\r\n }`;\r\n};\r\n\r\nconst getPositionMapWithCode = async (buildingId, positionType, code) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}/${buildingId}${POSITIONS}/${positionType}/${code}`, get_bearer_common,\r\n );\r\n\r\n if (response.ok) {\r\n const data = response.data;\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de posições por código');\r\n }\r\n }\r\n};\r\n\r\nconst getPositions = async (\r\n buildingId,\r\n positionType,\r\n dateFrom,\r\n dateTo,\r\n filteredPerson,\r\n) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}/${buildingId}${POSITIONS}/${positionType}?date_from=${dateFrom}&date_to=${dateTo}&scheduled_user_name=${filteredPerson}`,\r\n get_bearer_common,\r\n );\r\n\r\n if (response.ok) {\r\n const data = response.data;\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de posições');\r\n }\r\n }\r\n};\r\n\r\nconst getSchedules = async (\r\n dateFrom,\r\n dateTo,\r\n placePositionId,\r\n) => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer_common } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}${POSITIONS}${SCHEDULES}?place_position_id=${placePositionId}&date_from=${dateFrom}&date_to=${dateTo}`,\r\n get_bearer_common,\r\n );\r\n if (response.ok) {\r\n const data = response.data;\r\n console.log('Data', data)\r\n return data;\r\n }\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else {\r\n const data = response.data;\r\n\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao realizar consulta de agendamentos');\r\n }\r\n }\r\n}\r\n\r\nconst schedulePosition = async (\r\n buildingId,\r\n positionType,\r\n positionId,\r\n dateFrom,\r\n dateTo,\r\n description,\r\n note,\r\n) => {\r\n let validationError = false;\r\n\r\n try {\r\n const { post_bearer_common } = header({\r\n date_from: dateFrom,\r\n date_to: dateTo,\r\n description,\r\n note,\r\n });\r\n\r\n const response = await fetchWithTimeout(\r\n `${API_SCHEDULE}${PLACES}/${buildingId}${POSITIONS}/${positionType}/${positionId}${SCHEDULES}`,\r\n post_bearer_common,\r\n );\r\n\r\n if (response.status === 400) {\r\n const responseJson = response.data;\r\n validationError = true;\r\n\r\n throw new Error(responseJson.message);\r\n } else if (response.status !== 200) {\r\n const data = response.data;\r\n throw new Error(data.message);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, 'Erro ao agendar');\r\n }\r\n }\r\n};\r\n\r\nexport {\r\n getPlaces,\r\n getDates,\r\n getTimes,\r\n getPositionTypes,\r\n getPositionsMapUrl,\r\n getPositionMapWithCode,\r\n getPositions,\r\n getSchedules,\r\n schedulePosition,\r\n};","import React, { useState } from 'react';\r\nimport './styles.css';\r\nimport Modal from 'react-modal';\r\nimport { schedulePosition } from '../../../api/schedule_place';\r\nimport { toast } from 'react-toastify';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { deleteCheckin, putCheckin, putCheckout } from '../../../api/check';\r\nimport LoaderSpinner from '../../LoaderSpinner';\r\nimport {t} from 'i18next'\r\n\r\nconst ModalConfirmation = ({ setShow, setOption, buildingId, positionType, positionId, dateFrom, dateTo, type, date, hourFrom, hourTo, position, mode, schedule_id, positionCode, description, note }) => {\r\n const history = useHistory();\r\n const [showModal, setShowModal] = useState(true);\r\n const [loading, setLoading] = useState(false);\r\n \r\n const closeModal = (option) => {\r\n setOption(option);\r\n setShow(false);\r\n setShowModal(false);\r\n }\r\n \r\n const handleSchedule = async () => {\r\n setLoading(true);\r\n if (mode === 'agendamento') {\r\n await schedulePosition(buildingId, positionType, positionId, dateFrom, dateTo, description, note)\r\n .then(() => {\r\n setLoading(false)\r\n const data = {\r\n building: buildingId,\r\n type: type,\r\n date: date,\r\n hourFrom: hourFrom,\r\n hourTo: hourTo,\r\n position: position,\r\n positionCode: positionCode\r\n };\r\n history.push('/resume', { data: data });\r\n })\r\n .catch((err) => {\r\n toast.error(err.message);\r\n }).finally(() => {\r\n setLoading(false)\r\n closeModal(true);\r\n })\r\n } else if (mode === 'check') {\r\n await putCheckin(schedule_id)\r\n .then(() => {\r\n toast.success('check-in feito com sucesso!', { duration: 5000 });\r\n history.replace('/home');\r\n })\r\n .catch((error) => {\r\n toast.error(error.message);\r\n }).finally(() => {\r\n closeModal(true);\r\n })\r\n } else if (mode === 'cancel') {\r\n await deleteCheckin(schedule_id)\r\n .then(() => {\r\n toast.success('cancelamento feito com sucesso!', { duration: 5000 });\r\n history.replace('/checkin');\r\n })\r\n .catch((err) => {\r\n toast.error(err.message);\r\n }).finally(() => {\r\n closeModal(true);\r\n })\r\n } else {\r\n await putCheckout(schedule_id)\r\n .then(() => {\r\n toast.success('check-out feito com sucesso!', { duration: 5000 });\r\n history.replace('/home');\r\n })\r\n .catch((err) => {\r\n toast.error(err.message);\r\n }).finally(() => {\r\n closeModal(true);\r\n })\r\n }\r\n setLoading(false);\r\n }\r\n\r\n return (\r\n closeModal(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content confirmation\"\r\n ariaHideApp={false}\r\n >\r\n\r\n \r\n\r\n closeModal(false)}>\r\n x \r\n \r\n\r\n \r\n {t(\"confirmWord\")} \r\n {mode === 'check' ? t(\"checkInButtonTitle\") : mode === 'checkout' ? t(\"checkOutButtonTitle\") : mode === 'cancel' ? t(\"cancellation\") : t(\"schedule\")} \r\n
\r\n\r\n \r\n {t(\"makeScheduleConfirm\")} {mode === 'check' ? t(\"checkInButtonTitle\").toLowerCase() : mode === 'checkout' ? t(\"checkOutButtonTitle\") : mode === 'cancel' ? t(\"cancellation\").toLowerCase() : t(\"schedule\")} {t(\"atWord\")} {positionType === 'parking_space' ? t(\"vacancyWord\") : positionType === 'room' ? t(\"roomWord\") : t(\"positionWord\")} {positionCode}? \r\n
\r\n\r\n \r\n \r\n {t(\"yesWord\")}, {t(\"confirmWord\")} \r\n \r\n closeModal(false)}>\r\n {t(\"noWord\")} \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default ModalConfirmation;","import styled from \"styled-components\";\r\n\r\nexport const ContainerOpacity = styled.div`\r\n cursor: pointer;\r\n transition: ease-in 0.2s;\r\n display: flex;\r\n justify-content: flex-end;\r\n &:hover{\r\n opacity: 0.6;\r\n }\r\n height: 100%;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerButtonInfo = styled.div`\r\n\r\n display: flex;\r\n align-self: center;\r\n justify-content: center;\r\n align-items: center;\r\n background-color: #FFFFFF;\r\n border-radius: 18px;\r\n width: 800px;\r\n padding-right: 0px;\r\n padding-bottom: 0px;\r\n margin-bottom: 20px;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n transition: ease-in 0.2s;\r\n height: 9.5rem;\r\n\r\n @media(max-width: 820px ){\r\n width: 90vw;\r\n }\r\n\r\n\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ImageInfo = styled.img`\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 1rem;\r\n margin: 0 1vw 0 1vw;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerAbout = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin: 5px 0;\r\n .title{\r\n margin-left: 5px;\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n padding-top: 5px;\r\n }\r\n @media(max-width: 745px) {\r\n .title{\r\n font-size: 1.1rem;\r\n }\r\n }\r\n @media(max-width: 620px) {\r\n .title{\r\n font-size: 1.rem;\r\n }\r\n }\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerInfo = styled.div`\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n margin-top: 5px;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const TextAbout = styled.h3`\r\n color: #707070;\r\n font-size: 13px;\r\n margin-left: 5px;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerButtonOrange = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n text-align: center;\r\n`;","\r\nimport styled from \"styled-components\";\r\n\r\nexport const ButtonOrange = styled.button`\r\n background-color: #FA9F2A;\r\n justify-content: center;\r\n width: 7rem;\r\n align-self: flex-end;\r\n height: 100%;\r\n border-top-right-radius: 1rem;\r\n border-bottom-right-radius: 1rem;\r\n overflow: hidden;\r\n font-size: 1.1rem;\r\n @media(max-width: 720px) {\r\n width: 6rem;\r\n }\r\n`;","\r\nimport styled from \"styled-components\";\r\n\r\nexport const NotFound = styled.h4`\r\n color: #14213D;\r\n font-family: 'Roboto', sans-serif;\r\n font-size: 1.2rem;\r\n font-weight: 300;\r\n text-align: center;\r\n margin-bottom: 4rem;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const PrincipalContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n height: 100%;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerCheck = styled.div`\r\n padding-top: 5rem;\r\n gap: 2vh;\r\n width: 100%;\r\n padding-bottom: 10rem;\r\n\r\n .background-body {\r\n background-color: #FFF;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 1080px !important;\r\n margin: auto;\r\n box-sizing: border-box;\r\n min-height: 100vh;\r\n position: relative;\r\n }\r\n\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n \r\n\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerImage = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0.2rem;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 5px 0 5px 5px;\r\n height\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const TextCancel = styled.h3`\r\n color: #E6860B;\r\n font-size: 0.8rem;\r\n transition: ease-in 0.2s;\r\n cursor: pointer;\r\n &:hover{\r\n opacity: 1 !important;\r\n color: #E6760B;\r\n transform: scale(1.1);\r\n }\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const Title = styled.h1`\r\n color: #14213d;\r\n text-align: center;\r\n background: #fff;\r\n border-radius: 22px;\r\n overflow: hidden;\r\n opacity: 1;\r\n padding: 14px;\r\n width: 400px;\r\n font-size: 1.4rem;\r\n text-transform: uppercase;\r\n border: 1px solid #F7F7F7;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n\r\n @media (max-width: 920px) {\r\n width: 20rem;\r\n font-size: 1.2rem;\r\n }\r\n\r\n @media (max-width: 560px) {\r\n font-size: 1rem;\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n align-items: center;\r\n align-self: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n position: relative;\r\n max-height: 200px;\r\n background-color: #C4C4C4;\r\n\r\n .title {\r\n position: absolute;\r\n bottom: -25px;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .image-service-list {\r\n max-width: 1080px;\r\n max-height: 200px;\r\n width: auto;\r\n height: auto;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid #F7F7F7;\r\n }\r\n\r\n .image-service-list .service-banner {\r\n width: 1080px;\r\n }\r\n\r\n .online-view {\r\n position: absolute;\r\n top: 20px;\r\n left: 30px;\r\n background-color: #14213D;\r\n border-radius: 20px;\r\n width: 100px;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .online-view .online-text {\r\n margin-left: 5px;\r\n }\r\n\r\n @media(max-width: 1080px) {\r\n .image-service-list .service-banner {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .image-service-list {\r\n height: 150px;\r\n }\r\n\r\n .online-view {\r\n top: 10px;\r\n left: 10px;\r\n width: 80px;\r\n height: 25px;\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .image-service-list {\r\n height: 120px;\r\n }\r\n }\r\n`;\r\n","import React from \"react\";\r\nimport { FiGlobe } from \"react-icons/fi\";\r\nimport { Container, Title } from \"./styles\";\r\n\r\nconst ServiceBanner = ({ bannerUrl, title, serviceType, isUrl }) => {\r\n return (\r\n \r\n \r\n
\r\n
\r\n
{title} \r\n \r\n\r\n {\"online\" === serviceType &&\r\n \r\n online \r\n
\r\n }\r\n \r\n );\r\n};\r\n\r\nexport default ServiceBanner;\r\n","\r\nimport styled from \"styled-components\";\r\n\r\nexport const PageInfoWhatToDo = styled.h4`\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n`;","import { useEffect, useState } from \"react\";\r\nimport moment from \"moment-timezone\";\r\n\r\nimport { FiBookmark, FiCalendar, FiClock, FiMapPin } from \"react-icons/fi\";\r\n\r\nimport Header from \"../../../../../components/Header\";\r\nimport ModalConfirmation from \"../../../../../components/Modals/ModalConfirmation\";\r\nimport TabButton from \"../../../../../components/TabButton\";\r\nimport { ContainerOpacity } from \"../components/ContainerOpacity\";\r\nimport { ContainerButtonInfo } from \"../components/ContainerButtonInfo\";\r\nimport { ImageInfo } from \"../components/ImageInfo\";\r\nimport { ContainerAbout } from \"../components/ContainerAbout\";\r\nimport { ContainerInfo } from \"../components/ContainerInfo\";\r\nimport { TextAbout } from \"../components/TextAbout\";\r\nimport { ContainerButtonOrange } from \"../components/ContainerButtonOrange\";\r\nimport { ButtonOrange } from \"../components/ButtonOrange\";\r\nimport { NotFound } from \"../components/NotFound\";\r\nimport { PrincipalContainer } from \"../components/PrincipalContainer\";\r\nimport { getScheduled } from \"../../../../../api/check\";\r\nimport { ContainerCheck } from \"../components/ContainerCheck\";\r\nimport { ContainerImage } from \"../components/ContainerImage\";\r\nimport { TextCancel } from \"../components/TextCancel\";\r\nimport Footer from \"../../../../../components/Footer\";\r\nimport LoaderSpinner from \"../../../../../components/LoaderSpinner\";\r\nimport useGeoLocation from \"../../../../../hooks/useGeoLocation\";\r\nimport SchedulePlaceBanner from \"../SchedulePlaceBanner\";\r\nimport { PageInfoWhatToDo } from \"../components/PageInfoWhatToDo\";\r\nimport { ButtonCloseAdblock } from \"../../../../../components/AdblockCard/styles\";\r\n\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { getUser } from \"../../../../../utils/auth\";\r\nimport { t } from 'i18next'\r\n\r\nexport const Checkin = () => {\r\n const history = useHistory();\r\n\r\n if (!getUser()?.company?.position_scheduling_enabled) {\r\n history.replace(\"/home\");\r\n }\r\n\r\n const [showModal, setShowModal] = useState(false);\r\n const [scheduleChoosed, setScheduleChoosed] = useState({});\r\n const [isCancel, setIsCancel] = useState(0);\r\n const [loading, setLoading] = useState(false);\r\n const hasAutomaticCheckin = getUser()?.company?.position_scheduling_automatic_checkin;\r\n\r\n const [scheduled, setScheduled] = useState([]);\r\n\r\n // const theLocation = useGeoLocation();\r\n\r\n const checkLocation = () => {\r\n window.location.reload();\r\n };\r\n\r\n const doGetScheduled = async (isMounted) => {\r\n setLoading(true);\r\n await getScheduled().then((places) =>\r\n isMounted ? setScheduled(places) : null\r\n );\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n doGetScheduled(isMounted);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, [showModal]);\r\n\r\n\r\n return (\r\n \r\n {showModal && (\r\n setShowModal(val)}\r\n setOption={(op) => op}\r\n schedule_id={scheduleChoosed.id}\r\n positionCode={scheduleChoosed.company_place_position_code}\r\n />\r\n )}\r\n \r\n \r\n {scheduled.length === 0 ? (\r\n {t(\"noCheckinAvailable\")} \r\n ) : (\r\n <>\r\n {t(\"yourReservations\")} \r\n {scheduled.map((schedule, index) => {\r\n var timeFrom = moment(schedule.date_from)\r\n .tz(moment.tz.guess())\r\n .format(\"HH:mm\");\r\n var timeTo = moment(schedule.date_to)\r\n .tz(moment.tz.guess())\r\n .format(\"HH:mm\");\r\n return (\r\n \r\n \r\n {\r\n setScheduleChoosed(schedule);\r\n setIsCancel(true);\r\n setShowModal(true);\r\n }}\r\n >\r\n {t(\"cancelWord\")}\r\n \r\n \r\n \r\n \r\n \r\n {schedule.company_place_description}\r\n \r\n \r\n\r\n \r\n \r\n {schedule.company_place_position_type_description} -{\" \"}\r\n {schedule.company_place_position_code}\r\n {schedule.company_place_position_description &&\r\n \" - \" + schedule.company_place_position_description}\r\n \r\n \r\n\r\n \r\n \r\n {moment(schedule.date_from)\r\n .tz(moment.tz.guess())\r\n .format(\"DD/MM/YYYY\")}\r\n \r\n \r\n\r\n \r\n \r\n {t(\"fromTimePicker\").toLowerCase()} {timeFrom} {t(\"toTimePicker\").toLowerCase()} {timeTo}\r\n \r\n \r\n \r\n\r\n {!hasAutomaticCheckin &&\r\n {\r\n setScheduleChoosed(schedule);\r\n setIsCancel(false);\r\n setShowModal(true);\r\n }}\r\n >\r\n \r\n {t(\"checkInButtonTitle\")} \r\n \r\n }\r\n \r\n );\r\n })}\r\n \r\n )}\r\n \r\n \r\n {/* ) : (\r\n <>\r\n \r\n \r\n Ative sua localização para realizar o checkin!\r\n \r\n \r\n Recarregar\r\n \r\n \r\n \r\n )} */}\r\n \r\n );\r\n};\r\n","import { useEffect, useState } from \"react\";\r\n\r\nimport Header from \"../../../../../components/Header\";\r\nimport TabButton from \"../../../../../components/TabButton\";\r\nimport moment from \"moment-timezone\";\r\n\r\nimport { FiBookmark, FiCalendar, FiClock, FiMapPin } from \"react-icons/fi\";\r\n\r\nimport { ContainerOpacity } from \"../components/ContainerOpacity\";\r\nimport { ContainerButtonInfo } from \"../components/ContainerButtonInfo\";\r\nimport { ImageInfo } from \"../components/ImageInfo\";\r\nimport { ContainerAbout } from \"../components/ContainerAbout\";\r\nimport { ContainerInfo } from \"../components/ContainerInfo\";\r\nimport { TextAbout } from \"../components/TextAbout\";\r\nimport { ContainerButtonOrange } from \"../components/ContainerButtonOrange\";\r\nimport { ButtonOrange } from \"../components/ButtonOrange\";\r\nimport { NotFound } from \"../components/NotFound\";\r\nimport { PrincipalContainer } from \"../components/PrincipalContainer\";\r\nimport ModalConfirmation from \"../../../../../components/Modals/ModalConfirmation\";\r\nimport { getChecked } from \"../../../../../api/check\";\r\nimport { ContainerCheck } from \"../components/ContainerCheck\";\r\nimport Footer from \"../../../../../components/Footer\";\r\nimport LoaderSpinner from \"../../../../../components/LoaderSpinner\";\r\nimport SchedulePlaceBanner from \"../SchedulePlaceBanner\";\r\nimport { PageInfoWhatToDo } from \"../components/PageInfoWhatToDo\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { getUser } from \"../../../../../utils/auth\";\r\nimport { t } from 'i18next';\r\n\r\nexport const Checkout = () => {\r\n const history = useHistory();\r\n\r\n if (!getUser()?.company?.position_scheduling_enabled) {\r\n history.replace(\"/home\");\r\n }\r\n\r\n const [showModal, setShowModal] = useState(false);\r\n const [scheduleChoosed, setScheduleChoosed] = useState({});\r\n const [loading, setLoading] = useState(false);\r\n\r\n const [checked, setChecked] = useState([]);\r\n\r\n const doGetChecked = async (isMounted) => {\r\n setLoading(true);\r\n await getChecked().then((places) =>\r\n isMounted ? setChecked(places) : null\r\n );\r\n setLoading(false);\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n doGetChecked(isMounted);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, [showModal]);\r\n\r\n return (\r\n \r\n {showModal && (\r\n setShowModal(val)}\r\n setOption={(op) => op}\r\n schedule_id={scheduleChoosed.id}\r\n positionCode={scheduleChoosed.company_place_position_code}\r\n />\r\n )}\r\n \r\n\r\n \r\n {checked.length === 0 ? (\r\n Nenhum check-out disponível no momento \r\n ) : (\r\n <>\r\n {t(\"yourReservations\")} \r\n\r\n {checked.map((schedule, index) => {\r\n var timeFrom = moment(schedule.date_from)\r\n .tz(moment.tz.guess())\r\n .format(\"HH:mm\");\r\n var timeTo = moment(schedule.date_to)\r\n .tz(moment.tz.guess())\r\n .format(\"HH:mm\");\r\n return (\r\n \r\n \r\n \r\n \r\n {schedule.company_place_description}\r\n \r\n \r\n\r\n \r\n \r\n {schedule.company_place_position_type_description} -{\" \"}\r\n {schedule.company_place_position_code} -{\" \"}\r\n {schedule.company_place_position_description}\r\n \r\n \r\n\r\n \r\n \r\n {moment(schedule.date_from)\r\n .tz(moment.tz.guess())\r\n .format(\"DD/MM/YYYY\")}\r\n \r\n \r\n\r\n \r\n \r\n das {timeFrom} às {timeTo}\r\n \r\n \r\n \r\n\r\n {\r\n setScheduleChoosed(schedule);\r\n setShowModal(true);\r\n }}\r\n >\r\n \r\n Check-out \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n )}\r\n\r\n \r\n \r\n\r\n \r\n );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/orangeArrowLeftDates.c404cf5f.svg\";","export default __webpack_public_path__ + \"static/media/orangeArrowRightDates.06e66231.svg\";","import styled from \"styled-components\";\r\n\r\nexport const TableView = styled.tbody`\r\n border-radius: 0.5rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n width: 45vw;\r\n display: flex;\r\n flex-direction: column;\r\n height: 20rem;\r\n overflow-y: scroll;\r\n color: #000;\r\n border: 1px solid #C4C4C4;\r\n\r\n @media(max-width: 700px){\r\n width: 70vw;\r\n }\r\n \r\n @media(max-width: 500px){\r\n width: 90vw;\r\n }\r\n`;\r\n\r\nexport const TableRow = styled.tr`\r\n border-bottom: 0.1px solid #C4C4D4;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 1rem;\r\n color: ${props => props.clicked && !props.disabled ? \"#FA9F2A\" : \"#000\"};\r\n transition: ease-in .2s;\r\n &:hover{\r\n color: #fff;\r\n background: #FA9F2A;\r\n }\r\n opacity: ${props => props.disabled && '0.4'};\r\n cursor: ${props => props.disabled && 'auto'};\r\n`;\r\n\r\n\r\nexport const TableCode = styled.th`\r\n margin-right: auto;\r\n`;\r\n\r\nexport const TableLocal = styled.th` \r\n margin-right: auto;\r\n margin-left: auto;\r\n text-align: center;\r\n`;\r\n\r\nexport const TableInfoScheduled = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin-right: auto;\r\n gap: 0.1rem;\r\n p{\r\n font-size: 0.9rem;\r\n }\r\n`;","import React from 'react'\r\nimport { NotFound } from '../NotFound'\r\nimport { TableCode, TableInfoScheduled, TableLocal, TableRow, TableView } from './styles'\r\n\r\nexport function TableSchedulePositions({ positions, setPosition, position, isPositionsFiltered }) {\r\n\r\n return (\r\n \r\n {positions.length === 0\r\n ? {isPositionsFiltered ? `O nome filtrado não foi encontrado.` : \"Nenhum lugar disponível para o tipo selecionado.\"} \r\n : (\r\n \r\n {positions.map((positionValue) => {\r\n return (\r\n {\r\n setPosition(positionValue)\r\n }\r\n }\r\n clicked={positionValue.id === position.id}>\r\n {positionValue.code} \r\n \r\n {positionValue.description} \r\n \r\n {positionValue.scheduled_user && positionValue.scheduled_user_in_progress === true ? `${positionValue.scheduled_user}` : positionValue.scheduled_user ? `${positionValue.scheduled_user}` : ''} {positionValue.scheduled_user_description && \" - \" + positionValue.scheduled_user_description}
\r\n \r\n \r\n )\r\n })}\r\n \r\n )\r\n }\r\n\r\n
\r\n )\r\n}","import styled from 'styled-components';\r\n\r\nexport const Container = styled.div`\r\n\r\n .container-select-time {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-direction: column;\r\n }\r\n\r\n .slots-range-data-view {\r\n margin-top: 20px;\r\n display: flex;\r\n align-items: center;\r\n align-self: center;\r\n justify-content: center;\r\n }\r\n\r\n .slots-range-data-text {\r\n color: #14213D;\r\n font-size: 1.1rem;\r\n text-align: center;\r\n margin-bottom: 10px;\r\n margin-left: 120px;\r\n margin-right: 120px;\r\n }\r\n\r\n .select-container {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .select-time {\r\n width: 300px;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n margin: 0 10px;\r\n }\r\n\r\n .select-time select::-ms-expand {\r\n display: none;\r\n }\r\n\r\n .select-time select {\r\n width: 100%;\r\n height: 50px;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n color: #14213D;\r\n background-color: #F5F5F5;\r\n border: none;\r\n border-radius: 10px;\r\n border: 2px solid #F1F1F1;\r\n padding: 10px;\r\n padding-right: 40px;\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n transition: background-color 0.3s ease;\r\n }\r\n\r\n .select-time select option {\r\n font-size: 1rem;\r\n color: #14213D;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar-track {\r\n background-color: #f7f7f7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar {\r\n width: 7px;\r\n background: #f7f7f7;\r\n border-radius: 0 0 20px 20px;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar-thumb {\r\n background: #dad7d7;\r\n border-radius: 20px;\r\n -webkit-border-radius: 20px;\r\n }\r\n\r\n .select-time select::-webkit-scrollbar-corner {\r\n border-radius: 20px;\r\n }\r\n\r\n .select-time select:hover {\r\n background-color: white;\r\n }\r\n\r\n .select-time .select-icon {\r\n position: absolute;\r\n top: 15px;\r\n right: 10px;\r\n pointer-events: none;\r\n padding-left: 5px;\r\n }\r\n\r\n @media(max-width: 870px) {\r\n .select-time {\r\n width: 200px;\r\n }\r\n\r\n .slots-range-data-text {\r\n margin-left: 80px;\r\n margin-right: 80px;\r\n }\r\n }\r\n\r\n @media(max-width: 450px) {\r\n .select-time {\r\n width: 160px;\r\n }\r\n\r\n .slots-range-data-text {\r\n margin-left: 60px;\r\n margin-right: 60px;\r\n }\r\n }\r\n\r\n @media(max-width: 410px) {\r\n .select-time {\r\n width: 130px;\r\n }\r\n\r\n .slots-range-data-text {\r\n margin-left: 45px;\r\n margin-right: 45px;\r\n }\r\n }\r\n\r\n\r\n @media (max-width: 660px){\r\n .select-container{\r\n gap: 1.5rem;\r\n flex-direction: column;\r\n }\r\n }\r\n\r\n`;","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState } from 'react';\r\nimport { FiChevronDown } from 'react-icons/fi';\r\nimport { Container } from './styles';\r\nimport { t } from 'i18next'\r\n\r\nconst SlotRangeSchedule = props => {\r\n const { selectedFrom } = props;\r\n const { setSelectedFrom } = props;\r\n const { selectedTo } = props;\r\n const { setSelectedTo } = props;\r\n const { times } = props;\r\n const [timeNewTo, setTimeNewTo] = useState([]);\r\n\r\n /* Novo array \"de\", incrementando o intervalo para cada horário. Caso seja = 60 minutos, acrescenta uma hora. */\r\n let timeHoursTo;\r\n let timeMinutesTo;\r\n\r\n useEffect(() => {\r\n setTimeNewTo(\r\n times.times.map(time => {\r\n timeMinutesTo = Number(time.time.split(':')[1]) + times.interval;\r\n timeHoursTo = Number(time.time.split(':')[0]);\r\n if (timeMinutesTo === 60) {\r\n timeHoursTo += 1;\r\n timeMinutesTo = '00';\r\n }\r\n if (timeHoursTo < 10) {\r\n timeHoursTo = `0${timeHoursTo}`\r\n }\r\n\r\n const newValue = `${String(timeHoursTo)}:${String(timeMinutesTo)}`;\r\n return newValue;\r\n }),\r\n );\r\n }, [times]);\r\n\r\n /* Render */\r\n return (\r\n \r\n \r\n
\r\n {selectedFrom && (\r\n {t(\"fromTimePicker\")} {selectedFrom} \r\n )}\r\n\r\n {selectedTo && (\r\n {t(\"toTimePicker\")} {selectedTo} \r\n )}\r\n
\r\n\r\n
\r\n
\r\n
setSelectedFrom(timeFrom.target.value)}\r\n >\r\n \r\n Selecione um horario\r\n \r\n {times.times.map(val => {\r\n return (\r\n \r\n {val.time}\r\n \r\n );\r\n })}\r\n \r\n\r\n \r\n
\r\n \r\n\r\n
\r\n
setSelectedTo(timeTo.target.value)}\r\n >\r\n \r\n Selecione um horario\r\n \r\n {timeNewTo.map(val => {\r\n return (\r\n \r\n {val}\r\n \r\n );\r\n })}\r\n \r\n\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default SlotRangeSchedule;\r\n","/* eslint-disable react-hooks/exhaustive-deps */\r\nimport React, { useEffect, useState } from 'react';\r\nimport Modal from 'react-modal';\r\nimport './styles.css';\r\nimport LoaderSpinner from '../../LoaderSpinner';\r\nimport { getPositionMapWithCode, getPositionsMapUrl } from '../../../api/schedule_place';\r\nimport { toast } from 'react-toastify';\r\nimport { t } from 'i18next'\r\n\r\nconst ModalMapa = ({ setShow, buildingId, positionType, dateFrom, dateTo, setPosition }) => {\r\n const [showModal, setShowModal] = useState(true);\r\n const [loading, setLoading] = useState(false);\r\n const [mapUrl, setMapUrl] = useState();\r\n\r\n const doCloseModal = () => {\r\n setShowModal(false);\r\n setShow(false);\r\n }\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n setLoading(true);\r\n setMapUrl(getPositionsMapUrl(buildingId, positionType, dateFrom, dateTo));\r\n setLoading(false);\r\n }\r\n return () => (isMounted = false);\r\n }, []);\r\n\r\n async function handleGetMessage(e) {\r\n const code = e.data.message;\r\n if (!!code) {\r\n await getPositionMapWithCode(buildingId, positionType, code)\r\n .then((response) => {\r\n setPosition(response);\r\n })\r\n .catch((error) => {\r\n toast.error(error.message);\r\n }).finally(() => {\r\n doCloseModal();\r\n window.removeEventListener('message', handleGetMessage);\r\n })\r\n }\r\n return;\r\n }\r\n\r\n useEffect(() => {\r\n if (showModal) {\r\n window.addEventListener('message', handleGetMessage, false);\r\n }\r\n return () => {\r\n window.removeEventListener(\"message\", handleGetMessage);\r\n };\r\n }, []);\r\n\r\n return (\r\n \r\n {mapUrl &&\r\n
doCloseModal(false)}\r\n overlayClassName=\"modal-overlay\"\r\n className=\"modal-content show-mapa\"\r\n ariaHideApp={false}\r\n >\r\n doCloseModal(false)}>\r\n x \r\n \r\n\r\n \r\n {t(\"seeTheMapWord\")} \r\n {t(\"mapWord\")} \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n doCloseModal(true)}>\r\n {t(\"closeButton\")} \r\n \r\n
\r\n \r\n }\r\n \r\n {\r\n handleSubmitFilterPerson();\r\n }}\r\n ref={inputFilterRef}\r\n />\r\n {\r\n handleClearFilter();\r\n }}\r\n >\r\n {\r\n handleSubmitFilterPerson();\r\n }}\r\n >\r\n \r\n );\r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const Container = styled.h3`\r\n background-color: #FFF;\r\n border-radius: 1rem;\r\n padding: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n max-width: 1080px !important;\r\n padding-top: 5rem;\r\n padding-bottom: 20rem;\r\n z-index: -1;\r\n\r\n .background-body {\r\n background-color: #FFF;\r\n width: 100%;\r\n min-height: 100vh;\r\n position: relative;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n\r\n`;\r\n\r\nexport const ContainerNoFlex = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 2rem;\r\n width: 50vw;\r\n \r\n &+&{\r\n margin-top: 3rem;\r\n }\r\n @media(max-width:660px){\r\n width: 80vw;\r\n }\r\n`;\r\n\r\nexport const Text = styled.h2`\r\n text-align: center;\r\n color: #707070;\r\n font-size: 1.1rem;\r\n`;\r\n\r\nexport const ContainerDate = styled.div`\r\n width: 50vw;\r\n padding: 0 10px;\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n @media(max-width: 1280px){\r\n width: 70vw;\r\n }\r\n @media(max-width: 700px){\r\n width: 90vw;\r\n }\r\n`;\r\n\r\nexport const DateArrowRight = styled.img`\r\n width: 0.5rem;\r\n`;\r\n\r\nexport const DateArrowLeft = styled.img`\r\n width: 0.5rem;\r\n`;\r\n\r\nexport const DatesView = styled.div`\r\n\r\n width: 40vw;\r\n padding: 1rem;\r\n border-radius: 1rem;\r\n display: flex;\r\n overflow-x: scroll;\r\n justify-content: flex-start;\r\n background: #f1f1f1;\r\n @media(max-width: 1280px){\r\n width: 50vw;\r\n }\r\n @media(max-width: 700px){\r\n width: 70vw;\r\n }\r\n`;\r\n\r\nexport const TypesView = styled.div`\r\n display: flex;\r\n overflow-x: scroll;\r\n justify-content: flex-start;\r\n text-align: center;\r\n width: 85%;\r\n ::-webkit-scrollbar-track {\r\n background: #fff;\r\n }\r\n`;\r\n\r\nexport const ContainerHour = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n margin-top: -20px;\r\n`;\r\n\r\nexport const SelectView = styled.div`\r\n border-radius: 1rem;\r\n border-width: 1px;\r\n border-color: #C4C4C4;\r\n margin-top: 10px;\r\n text-align: center;\r\n width: 50vw;\r\n margin-bottom: 2rem;\r\n select{\r\n width: 15rem;\r\n padding: 1rem 1rem;\r\n border-radius: 1rem;\r\n option{\r\n padding: 1rem;\r\n }\r\n }\r\n`;\r\n\r\n\r\nexport const ViewBox = styled.div`\r\n margin: 0 10px;\r\n align-items: center;\r\n &:first-child{\r\n margin-left: auto;\r\n }\r\n &:last-child{\r\n margin-right: auto;\r\n }\r\n`;\r\n\r\nexport const ButtonImg = styled.img`\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 18px;\r\n background-color: #FFF;\r\n border: 2px solid ${props => props.label === props.type.code ? \"#FA9F2A\" : \"#C4C4C4\"};\r\n`;\r\n\r\nexport const ButtonView = styled.div`\r\n display: flex;\r\n`;\r\n\r\nexport const ButtonText = styled.span`\r\n font-size: 13px;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n margin: 0 5px;\r\n flex: 1;\r\n flex-wrap: wrap;\r\n width: 0.8px;\r\n text-align: center;\r\n color: ${props => props.label === props.type ? \"#FA9F2A\" : \"#14213D\"};\r\n`;\r\n\r\nexport const NotFound = styled.span`\r\n text-align: center;\r\n color: #14213D;\r\n`;\r\n\r\nexport const ButtonCheck = styled.button`\r\n display: flex;\r\n border-radius: 20px;\r\n width: 200px;\r\n height: 42px;\r\n font-size: 1.2rem;\r\n background-color: #FA9F2A;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n`;\r\n\r\nexport const TextCheck = styled.h3`\r\n color: #FFF;\r\n font-family: 'Roboto';\r\n font-size: 1rem;\r\n font-weight: 300;\r\n`;\r\n\r\nexport const Table = styled.table`\r\n width: 45vw;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n @media(max-width: 1280px){\r\n width: 45vw;\r\n }\r\n @media(max-width: 700px){\r\n width: 70vw;\r\n }\r\n`;\r\n\r\nexport const TableBody = styled.tbody`\r\n border-radius: 0.5rem;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n color: #000;\r\n border: 1px solid #c4c4c4;\r\n width: inherit;\r\n margin: 0.5rem 0 2rem 0;\r\n\r\n @media (max-width: 700px) {\r\n width: 70vw;\r\n }\r\n\r\n @media (max-width: 500px) {\r\n width: 90vw;\r\n }\r\n`;\r\n\r\nexport const TableRow = styled.tr`\r\n border-bottom: 0.1px solid #c4c4d4;\r\n display: flex;\r\n align-items: center;\r\n flex: 1;\r\n color: \"#c4c4c4\";\r\n &:first-child{\r\n border-top: 0;\r\n }\r\n &:last-child{\r\n border-bottom: 0;\r\n }\r\n`;\r\n\r\nexport const TableData = styled.td`\r\n display: flex;\r\n flex: 1;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n justify-content: center;\r\n border-right: 0.1px solid #c4c4d4;\r\n &:last-child{\r\n border-right: 0;\r\n }\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const InputContainer = styled.div`\r\n background-color: #f1f1f1;\r\n display: flex;\r\n \r\n border-radius: 1rem;\r\n align-items: center;\r\n margin: 0 0 2vh 0;\r\n`;\r\n\r\nexport const Input = styled.input`\r\n color: #14213d;\r\n background-color: #f1f1f1;\r\n width: 30rem;\r\n\r\n height: 100%;\r\n padding: 0.8rem;\r\n border-radius: 1rem;\r\n\r\n @media(max-width: 600px){\r\n width: 90vw;\r\n }\r\n`;\r\n","import React from \"react\";\r\n\r\nimport { Input, InputContainer } from \"./styles\";\r\n\r\nexport function InputType({\r\n inputRef,\r\n}) {\r\n\r\n return (\r\n \r\n \r\n );\r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const FilterInputContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 2rem;\r\n \r\n background-color: #f1f1f1;\r\n border-radius: 1rem;\r\n`;\r\n\r\nexport const TextArea = styled.textarea`\r\n color: #14213d;\r\n background-color: #f1f1f1;\r\n width: 30rem;\r\n height: 10rem;\r\n padding: 0.8rem;\r\n border-radius: 1rem;\r\n\r\n resize: none;\r\n\r\n @media(max-width: 600px){\r\n width: 90vw;\r\n }\r\n`;","import React from \"react\";\r\n\r\nimport { TextArea, FilterInputContainer } from \"./styles\";\r\n\r\nexport function TextAreaDescription({\r\n textNotes,\r\n}) {\r\n return (\r\n \r\n \r\n );\r\n}\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { toast } from 'react-toastify';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport orangeArrowLeftDates from '../../../../../assets/images/icons/orangeArrowLeftDates.svg';\r\nimport orangeArrowRightDates from '../../../../../assets/images/icons/orangeArrowRightDates.svg';\r\n\r\nimport { DateButton } from '../../../../ServiceOrder/components/DateButton';\r\n\r\nimport { ButtonOpacity } from '../components/ButtonOpacity';\r\nimport { TableSchedulePositions } from '../components/TableSchedulePositions';\r\nimport Footer from '../../../../../components/Footer';\r\nimport LoaderSpinner from '../../../../../components/LoaderSpinner';\r\nimport { PageInfoWhatToDo } from '../components/PageInfoWhatToDo';\r\nimport SlotRangeSchedule from '../components/SlotRangeSchedule';\r\nimport Header from '../../../../../components/Header';\r\nimport TabButton from '../../../../../components/TabButton';\r\nimport SchedulePlaceBanner from '../SchedulePlaceBanner';\r\nimport ModalConfirmation from '../../../../../components/Modals/ModalConfirmation';\r\nimport ModalMapa from '../../../../../components/Modals/ModalMapa';\r\nimport { FilterInput } from '../components/FilterInput';\r\n\r\nimport {\r\n getDates,\r\n getPlaces,\r\n getPositions,\r\n getPositionTypes,\r\n getTimes,\r\n getSchedules,\r\n} from '../../../../../api/schedule_place';\r\nimport { getUser } from '../../../../../utils/auth';\r\nimport { addDaysToCurrentDate } from '../../../../../utils/utils';\r\n\r\nimport {\r\n Container,\r\n Text,\r\n ContainerNoFlex,\r\n ContainerDate,\r\n DateArrowLeft,\r\n DateArrowRight,\r\n DatesView,\r\n ContainerHour,\r\n ViewBox,\r\n ButtonImg,\r\n ButtonView,\r\n ButtonText,\r\n TypesView,\r\n ButtonCheck,\r\n TextCheck,\r\n NotFound,\r\n Table,\r\n TableHead,\r\n TableBody,\r\n TableRow,\r\n TableData,\r\n} from './styles';\r\nimport { InputType } from '../components/InputType';\r\nimport { TextAreaDescription } from '../components/TextAreaDescription';\r\nimport moment from 'moment';\r\nimport { t } from \"i18next\";\r\n\r\n\r\nexport const SchedulePosition = () => {\r\n const history = useHistory();\r\n\r\n if (!getUser()?.company?.position_scheduling_enabled) {\r\n history.replace('/home');\r\n }\r\n\r\n const [positions, setPositions] = useState([]);\r\n const [showModal, setShowModal] = useState(false);\r\n const [allDates, setAllDates] = useState([]);\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [position, setPosition] = useState('');\r\n const [build, setBuild] = useState('');\r\n const [type, setType] = useState('');\r\n const [showMap, setShowMap] = useState();\r\n const [date, setDate] = useState();\r\n const [hourFrom, setHourFrom] = useState();\r\n const [hourTo, setHourTo] = useState();\r\n\r\n const [building, setBuilding] = useState([]);\r\n const [types, setTypes] = useState([]);\r\n const [dateFrom, setDateFrom] = useState('');\r\n const [dateTo, setDateTo] = useState('');\r\n const [times, setTimes] = useState();\r\n const [schedules, setSchedules] = useState([]);\r\n\r\n const inputFilterRef = useRef(null);\r\n const inputDescription = useRef(null);\r\n const textNotes = useRef(null);\r\n const [filteredPerson, setFilteredPerson] = useState('');\r\n const [isPositionsFiltered, setIsPositionsFiltered] = useState(false);\r\n\r\n const refDate = useRef(null);\r\n const refHour = useRef(null);\r\n const refTypePosition = useRef(null);\r\n const refPosition = useRef(null);\r\n\r\n const doGetBuildings = async isMounted => {\r\n setLoading(true);\r\n await getPlaces()\r\n .then(places => {\r\n if (isMounted) {\r\n setBuilding(places);\r\n if (places.length === 1) {\r\n setBuild(places[0]?.id);\r\n }\r\n }\r\n })\r\n .catch(error => toast.error(error.message));\r\n setLoading(false);\r\n };\r\n\r\n const doGetDates = async isMounted => {\r\n setLoading(true);\r\n await getDates(build)\r\n .then(dates => {\r\n if (isMounted) {\r\n setAllDates(dates);\r\n setDate(dates[0]?.date);\r\n }\r\n })\r\n .catch(error => toast.error(error.message));\r\n setLoading(false);\r\n };\r\n\r\n const doGetTimes = async isMounted => {\r\n setLoading(true);\r\n await getTimes(build, date)\r\n .then(timesApi => {\r\n if (isMounted) {\r\n if (timesApi.times.length === 0) {\r\n throw new Error(\"Você já passou do horário para hoje\")\r\n }\r\n setTimes(timesApi);\r\n const timeNow = timesApi?.times[0]?.time;\r\n const timeLast = timesApi?.times[timesApi.times.length - 1]?.time;\r\n const minHourDefault = \"08:00\";\r\n const maxHourDefault = \"17:00\";\r\n const hourFromWithInterval = moment(timeLast, 'hh:mm').add(timesApi.interval, 'minutes').format('HH:mm');\r\n\r\n setHourFrom(timeNow > minHourDefault ? timeNow : minHourDefault);\r\n if (timeLast > maxHourDefault) {\r\n setHourTo(maxHourDefault)\r\n return;\r\n }\r\n setHourTo(hourFromWithInterval)\r\n }\r\n })\r\n .catch(error => {\r\n setTimes(\"\");\r\n toast.error(error.message)\r\n });\r\n setLoading(false);\r\n };\r\n\r\n const doGetTypes = async isMounted => {\r\n const offset = (moment().utcOffset() / 60);\r\n\r\n const splitedFrom = hourFrom.split(':');\r\n const splitedTo = hourTo.split(':');\r\n const hoursFrom = (Number(splitedFrom[0]) - offset) * 60 * 60 * 1000;\r\n const minutesFrom = Number(splitedFrom[1]) * 60 * 1000;\r\n const hoursTo = (Number(splitedTo[0]) - offset) * 60 * 60 * 1000;\r\n const minutesTo = Number(splitedTo[1]) * 60 * 1000;\r\n const UTCDateFrom = new Date(\r\n Date.parse(date) + (hoursFrom + minutesFrom),\r\n ).toISOString();\r\n const UTCDateTo = new Date(\r\n Date.parse(date) + (hoursTo + minutesTo),\r\n ).toISOString();\r\n setDateFrom(UTCDateFrom);\r\n setDateTo(UTCDateTo);\r\n setLoading(true);\r\n await getPositionTypes(build)\r\n .then(typesIn => (isMounted ? setTypes(typesIn) : null))\r\n .catch(error => toast.error(error.message));\r\n setLoading(false);\r\n };\r\n\r\n const doGetPositions = async isMounted => {\r\n setLoading(true);\r\n await getPositions(build, type.code, dateFrom, dateTo, filteredPerson)\r\n .then(positionsIn => (isMounted ? setPositions(positionsIn) : null))\r\n .catch(error => toast.error(error.message));\r\n setLoading(false);\r\n };\r\n\r\n const doGetSchedules = async (positionId) => {\r\n const initialDate = moment.utc(dateFrom).startOf('day').format();\r\n const nextDayFromDateTo = addDaysToCurrentDate(dateTo, 1);\r\n const finalDate = moment.utc(nextDayFromDateTo).startOf('day').format();\r\n setLoading(true);\r\n\r\n await getSchedules(initialDate, finalDate, positionId)\r\n .then(schedules => (setSchedules(schedules)))\r\n .catch(error => toast.error(error.message))\r\n .finally(setLoading(false));\r\n };\r\n\r\n useEffect(() => {\r\n refDate?.current?.scrollIntoView();\r\n if (date) {\r\n setType('');\r\n setPosition('');\r\n setHourTo('');\r\n setHourFrom('');\r\n setSchedules([]);\r\n }\r\n }, [build]);\r\n\r\n useEffect(() => {\r\n refHour?.current?.scrollIntoView();\r\n if (build) {\r\n setHourFrom(0);\r\n setHourTo(0);\r\n setType('');\r\n setPosition('');\r\n setSchedules([]);\r\n }\r\n }, [date]);\r\n\r\n useEffect(() => {\r\n refTypePosition?.current?.scrollIntoView();\r\n if (type) {\r\n setType('');\r\n setPosition('');\r\n setSchedules([]);\r\n }\r\n }, [hourTo, hourFrom]);\r\n\r\n useEffect(() => {\r\n refPosition?.current?.scrollIntoView();\r\n if (position) {\r\n setPosition('');\r\n setSchedules([]);\r\n }\r\n }, [type]);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n doGetBuildings(isMounted);\r\n }\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted && building && build) {\r\n setDate();\r\n setTimes(\"\");\r\n doGetDates(isMounted);\r\n }\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [build, building]);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted && date) {\r\n doGetTimes(isMounted);\r\n }\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [date]);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted && hourTo && hourFrom) {\r\n doGetTypes(isMounted);\r\n }\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [hourTo, hourFrom]);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n if (type) {\r\n doGetPositions(isMounted);\r\n }\r\n }\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [type, filteredPerson]);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n if (type) {\r\n setFilteredPerson('');\r\n inputFilterRef.current.value = '';\r\n setIsPositionsFiltered(false);\r\n }\r\n }\r\n return () => {\r\n isMounted = false;\r\n };\r\n }, [hourTo, hourFrom, type, date, build]);\r\n\r\n const disableSchedule = () => {\r\n let shouldDisable = false;\r\n schedules.forEach(schedule => {\r\n if (schedule.date_from === dateFrom || schedule.date_to === dateTo)\r\n shouldDisable = true;\r\n });\r\n return shouldDisable;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n setShowModal(val)}\r\n setOption={op => op}\r\n buildingId={build}\r\n positionType={type.code}\r\n positionId={position.id}\r\n dateFrom={dateFrom}\r\n dateTo={dateTo}\r\n type={type.code}\r\n date={date}\r\n hourFrom={hourFrom}\r\n hourTo={hourTo}\r\n position={position.description}\r\n mode=\"agendamento\"\r\n positionCode={position.code}\r\n description={inputDescription?.current?.value}\r\n note={textNotes?.current?.value}\r\n />\r\n )}\r\n\r\n {showMap && (\r\n setShowMap(val)}\r\n buildingId={build}\r\n positionType={type.code}\r\n dateFrom={dateFrom}\r\n dateTo={dateTo}\r\n setPosition={(position) => {\r\n setPosition(position)\r\n doGetSchedules(position.id)\r\n }}\r\n />\r\n )}\r\n\r\n \r\n {building.length === 0 ? (\r\n Nenhuma data disponível. \r\n ) : (\r\n \r\n {t(\"scheduleYourPlace\")} \r\n {t(\"selectABuilding\")} \r\n \r\n {building.map(buildValue => {\r\n return (\r\n \r\n {\r\n setBuild(buildValue.id);\r\n }}\r\n >\r\n \r\n \r\n {buildValue.description}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n )}\r\n\r\n {build !== '' && (\r\n \r\n {t(\"selectADate\")} \r\n \r\n \r\n {allDates.map(dateValue => {\r\n return (\r\n \r\n setDate(dateValue.date)}\r\n />\r\n
\r\n );\r\n })}\r\n \r\n \r\n \r\n )}\r\n\r\n {date && times && (\r\n \r\n {t(\"selectATime\")} \r\n \r\n \r\n \r\n )}\r\n {hourTo && hourFrom && (\r\n \r\n {types.length === 0 ?\r\n (Nenhum tipo disponível. )\r\n : (\r\n <>{t(\"selectAType\")} \r\n \r\n {types.map(typeValue => {\r\n return (\r\n \r\n {\r\n setType(typeValue);\r\n }}\r\n >\r\n \r\n \r\n {typeValue.description}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n )\r\n }\r\n\r\n \r\n )}\r\n\r\n {type !== '' && (\r\n <>\r\n \r\n \r\n setShowMap(true)}>\r\n {t(\"showMap\")} \r\n \r\n \r\n\r\n \r\n {type.code === 'parking_space'\r\n ? t(\"selectAVacancy\")\r\n : type.code === 'room'\r\n ? t(\"selectARoom\")\r\n : t(\"selectAPosition\")}\r\n \r\n\r\n {t(\"selectedText\")} {t(\"positionWord\")} : {position.code} }\r\n\r\n {\r\n setPosition(position)\r\n doGetSchedules(position.id)\r\n }}\r\n position={position}\r\n isPositionsFiltered={isPositionsFiltered}\r\n />\r\n \r\n \r\n )}\r\n {\r\n schedules.length > 0 && (\r\n <>\r\n {t(\"scheduledTimes\")} \r\n \r\n \r\n { schedules.map(schedule => {\r\n return (\r\n \r\n \r\n {schedule.customer_name}\r\n \r\n \r\n {`${t(\"fromTimePicker\")} ${moment(schedule.date_from).local().format('HH:mm')}`}\r\n \r\n \r\n {`${t(\"toTimePicker\")} ${moment(schedule.date_to).local().format('HH:mm')}`}\r\n \r\n \r\n )\r\n })}\r\n \r\n
\r\n \r\n )}\r\n {position !== '' && (\r\n <>\r\n {type.description_allowed && (\r\n \r\n setShowModal(!showModal)} disabled={disableSchedule()}>\r\n {t(\"scheduleButton\")} \r\n \r\n \r\n )}\r\n\r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n\r\n
{t(\"allRightText\")} \r\n
\r\n \r\n {t(\"schedulingOfText\")}\r\n {schedule.type === 'parking_space' ? t(\"vacancyWord\") : schedule.type === 'room' ? t(\"roomWord\") : t(\"positionWord\")}\r\n {schedule.positionCode} \r\n {t(\"inBuilding\")}\r\n {schedule.building} {t(\"hasBeenConfirmedFor\")}\r\n {Moment(schedule.date).tz(Moment.tz.guess()).format('DD/MM')} , {t(\"fromTimePicker\").toLowerCase()}\r\n {schedule.hourFrom} {t(\"toTimePicker\").toLowerCase()}\r\n {schedule.hourTo}. \r\n \r\n\r\n \r\n history.push('/home')}\r\n >\r\n {t(\"homeTabBar\")} \r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Resume;\r\n","export default __webpack_public_path__ + \"static/media/backgroundChat.4069aa9b.png\";","import styled from 'styled-components';\r\nimport BackgroundChat from '../../../assets/images/backgroundChat.png';\r\n\r\nexport const ContainerMain = styled.div`\r\n height: 100vh;\r\n position: relative;\r\n width: 100vw;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n`;\r\n\r\nexport const Header = styled.header`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 20px 0;\r\n height: 50px;\r\n background-color: #FFFFFF;\r\n font-size: 3rem;\r\n`;\r\n\r\nexport const ButtonOpacity = styled.button`\r\n width: 80px;\r\n height: 50px;\r\n background: #fff;\r\n transition: ease-in .2s;\r\n &:hover{\r\n opacity: 0.8;\r\n }\r\n`;\r\n\r\nexport const ScrollDiv = styled.h3`\r\n overflow: auto;\r\n`;\r\n\r\nexport const Name = styled.h3`\r\n font-family: Roboto;\r\n font-size: 1rem;\r\n font-weight: 300;\r\n color: #14213D;\r\n max-width: 50vw;\r\n`;\r\n\r\nexport const ContainerMessages = styled.div`\r\n background-color: rgba(250px, 15px, 42px, 0.1);\r\n overflow: auto;\r\n padding: 3rem 10px;\r\n height: 80vh;\r\n background-image: url(${BackgroundChat});\r\n display: flex;\r\n flex-direction: column;\r\n word-break: break-all;\r\n \r\n\r\n .BalloomGray{\r\n border-bottom-left-radius: 0;\r\n background-color: #FFFFFF;\r\n max-width: 45vw;\r\n align-self: flex-start;\r\n border-radius: 15px;\r\n margin: 10px 0;\r\n padding: 10px 10px;\r\n padding-right: 15px;\r\n margin-left: 15px;\r\n border-radius: 15px 15px 15px 0;\r\n h4{\r\n margin-left: auto;\r\n }\r\n }\r\n\r\n .BalloomOrange{\r\n background-color: #FA9F2A;\r\n max-width: 45vw;\r\n align-self: flex-end;\r\n border-radius: 15px 15px 0 15px;\r\n padding: 10px 10px 10px 15px;\r\n margin: 10px 0;\r\n margin-right: 15px;\r\n overflow: hidden;\r\n margin-left: auto;\r\n h4{\r\n margin-left: auto;\r\n }\r\n }\r\n\r\n\r\n @media(max-width:500px){\r\n padding: 2rem 0;\r\n .BalloomGray{\r\n margin-left: 5px;\r\n }\r\n .BalloomOrange{\r\n margin-right: 5px;\r\n }\r\n }\r\n \r\n`;\r\n\r\nexport const TodayContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 5px;\r\n`;\r\n\r\nexport const TextToday = styled.h3`\r\n background-color: rgba(0, 0, 0, 0.3);\r\n text-align: center;\r\n border-radius: 25px;\r\n padding: 8px 2rem;\r\n margin: 20px;\r\n color: #FFFFFF;\r\n`;\r\n\r\nexport const Message = styled.div`\r\n color: #14213D;\r\n font-family: Roboto;\r\n font-size: 1rem;\r\n font-weight: 300;\r\n`;\r\n\r\nexport const ContainerTimeCheck = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n align-self: flex-end;\r\n margin-top: 5px;\r\n`;\r\n\r\nexport const Hour = styled.h4`\r\n color: #14213D;\r\n font-family: Roboto;\r\n font-size: 12px;\r\n font-weight: 300;\r\n`;\r\n\r\nexport const ButtonContainer = styled.button`\r\n background-color: #FA9F2A;\r\n height: 50px;\r\n width: 50px;\r\n margin: 10px 0;\r\n border-radius: 50%;\r\n \r\n transition: ease-in .2s;\r\n &:hover{\r\n opacity: 0.8;\r\n }\r\n`;\r\n\r\nexport const InputText = styled.textarea`\r\n border-radius: 19px;\r\n border: 0.5px solid #C4C4C4;\r\n width: 75vw;\r\n height: 100%;\r\n color: #14213D;\r\n font-family: Roboto;\r\n font-size: 1rem;\r\n padding: 20px 20px;\r\n &:focus::placeholder{\r\n color: #ffffff;\r\n }\r\n`;\r\n\r\nexport const ContainerFooter = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n background-color: #FFFFFF;\r\n flex: 1;\r\n padding: 10px 0;\r\n height: 10vh;\r\n`;\r\n\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { ButtonContainer, ButtonOpacity, ContainerFooter, ContainerMain, ContainerMessages, ContainerTimeCheck, Header, Hour, InputText, Message, Name, ScrollDiv, TextToday, TodayContainer } from './style';\r\nimport { getUser, getUserToken } from '../../../utils/auth';\r\nimport moment from 'moment-timezone';\r\nimport SockJS from 'sockjs-client';\r\nimport { API_CHAT } from '../../../api/helper/api_urls';\r\nimport { getChatMessages, getChats } from '../../../api/chats'\r\nimport { toast } from 'react-toastify';\r\nimport { FiArrowLeft, FiCheck, FiSend } from 'react-icons/fi';\r\nimport { useHistory } from 'react-router-dom';\r\nimport LoaderSpinner from '../../../components/LoaderSpinner';\r\n\r\nvar stompClient = null;\r\nvar onerror = false;\r\n\r\nconst Chat = (props) => {\r\n const orderId = props.location.state.orderId;\r\n const namePro = props.location.state.namePro;\r\n const idPro = props.location.state.idPro;\r\n const [chat, setChat] = useState({});\r\n const history = useHistory();\r\n const userId = getUser().customer.id;\r\n const [message, setMessage] = useState('');\r\n const [messages, setMessages] = useState([]);\r\n const [newMessage, setNewMessage] = useState({});\r\n const [loading, setLoading] = useState(false);\r\n const [roomId, setRoomId] = useState(0);\r\n const [isConnected, setIsConnected] = useState(false);\r\n const [error, setError] = useState(false);\r\n const [reconect, setReconect] = useState(false);\r\n\r\n let hasMessage = false;\r\n\r\n const messagesEndRef = useRef(null);\r\n const messageReplyRef = useRef(null);\r\n\r\n const connect = () => {\r\n const Stomp = require(\"stompjs\");\r\n let sockJS = new SockJS(`${API_CHAT}/ws`);\r\n stompClient = Stomp.over(sockJS);\r\n stompClient.connect({}, onConnected, onError);\r\n };\r\n\r\n const onConnected = () => {\r\n setError(false);\r\n setIsConnected(true);\r\n stompClient.subscribe(\r\n `/user/${roomId}_${chat.recipient_id ? chat.recipient_id : ''}_${chat.recipient_type}_${userId}_customer/queue/messages`,\r\n onMessageReceived\r\n );\r\n };\r\n\r\n const onError = (error) => {\r\n if (onerror === true) {\r\n onerror = false;\r\n setReconect(true);\r\n } else {\r\n setError(true);\r\n onerror = true;\r\n }\r\n };\r\n\r\n const onMessageReceived = async (msg) => {\r\n\r\n const notification = JSON.parse(msg.body);\r\n\r\n if (notification.content === null && msg) {\r\n stompClient.disconnect();\r\n setRoomId(notification.room_id);\r\n\r\n setTimeout(() => {\r\n getMessages(notification.room_id);\r\n }, 1000);\r\n } else {\r\n const confirm = {\r\n token: getUserToken(),\r\n consumer: \"customer\",\r\n message_id: notification.id,\r\n }\r\n\r\n await stompClient.send(\"/app/chat/delivered\", {}, JSON.stringify(confirm));\r\n\r\n setMessages(oldArray => [...oldArray, notification]);\r\n }\r\n };\r\n\r\n const sendMessage = (msg) => {\r\n if (msg.trim() !== \"\") {\r\n var message = {\r\n recipient_id: chat.recipient_id,\r\n recipient_type: chat.recipient_type,\r\n subject_id: chat.recipient_type === 'posher' ? null : orderId,\r\n subject_type: chat.recipient_type === 'posher' ? null : 'order',\r\n content: msg,\r\n token: getUserToken(),\r\n consumer: \"customer\",\r\n room_id: roomId,\r\n };\r\n stompClient.send(\"/app/chat\", {}, JSON.stringify(message));\r\n\r\n message.direction = \"send\";\r\n\r\n setMessages(oldArray => [...oldArray, message]);\r\n }\r\n };\r\n\r\n const getMessages = async (id) => {\r\n setLoading(true);\r\n\r\n try {\r\n await getChatMessages(id).then(newMessages => {\r\n setMessages(newMessages);\r\n newMessages.forEach((message) => {\r\n if (!message.delivered && message.direction === 'reply' && !hasMessage) {\r\n setNewMessage(message);\r\n messageReplyRef.current?.scrollIntoView();\r\n hasMessage = true;\r\n }\r\n })\r\n if (!hasMessage) {\r\n messagesEndRef.current.scrollIntoView();\r\n }\r\n });\r\n } catch (error) {\r\n toast.error(error.message, 5000);\r\n\r\n } finally {\r\n setLoading(false);\r\n }\r\n }\r\n\r\n const getChat = async () => {\r\n try {\r\n setLoading(true);\r\n\r\n await getChats(idPro, orderId)\r\n .then(val => {\r\n setChat(val);\r\n setRoomId(val.id);\r\n if ((val.id === 0 && !val.recipient_id) || (val.id === 0 && val.recipient_id)) {\r\n connect();\r\n getMessages(val.id);\r\n }\r\n });\r\n\r\n } catch (error) {\r\n toast.error(error.message, 5000);\r\n } finally {\r\n setLoading(false);\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n messagesEndRef.current.scrollIntoView();\r\n }, [messages])\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (error === true && isMounted) {\r\n connect();\r\n setError(false);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, [error]);\r\n\r\n useEffect(() => {\r\n\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n getChat();\r\n }\r\n\r\n return () => {\r\n isMounted = false;\r\n\r\n if (isConnected) {\r\n stompClient.disconnect();\r\n }\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (roomId > 0) {\r\n connect();\r\n getMessages(roomId);\r\n }\r\n }, [roomId]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n {\r\n try {\r\n stompClient.disconnect();\r\n } catch (error) {\r\n setIsConnected(false)\r\n } \r\n finally {\r\n history.goBack();\r\n }\r\n }}>\r\n \r\n {namePro} \r\n\r\n
\r\n \r\n\r\n \r\n \r\n {messages.length > 0 &&\r\n <>\r\n {messages.map((message, index) => {\r\n let todayDay = new Date(Date.parse(message.created_at));\r\n let lastDay = new Date(Date.parse(messages[index > 0 ? index - 1 : index].created_at));\r\n let today = new Date();\r\n\r\n return (\r\n \r\n {((todayDay.getDate() > lastDay.getDate() && todayDay.getDate() !== today.getDate()) || messages[0] === message) &&\r\n
\r\n {moment(message.created_at).tz('America/Sao_Paulo').format('DD/MM/YYYY')} \r\n \r\n }\r\n {(todayDay.getDate() > lastDay.getDate() && todayDay.getDate() === today.getDate()) &&\r\n
\r\n Hoje \r\n \r\n }\r\n
\r\n\r\n {message.content} \r\n \r\n {moment(message.created_at).tz('America/Sao_Paulo').format('HH:mm')} \r\n\r\n {message.direction !== 'reply' &&\r\n <>\r\n \r\n
\r\n
\r\n \r\n\r\n \r\n\r\n \r\n setMessage(text.target.value)}\r\n />\r\n\r\n { message !== '' && sendMessage(message); setMessage('') }}\r\n >\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nexport default Chat;","import {\r\n API_BASE,\r\n API_VERSION,\r\n CUSTOMERS,\r\n TYPES,\r\n VACCINATIONS,\r\n} from \"./helper/api_urls\";\r\nimport { fetchWithTimeout, header } from \"./helper/request\";\r\nimport { getSectionsCatchErrors } from \"./getSectionsCatchErrors\";\r\n\r\nconst getVaccinationsTypes = async () => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_BASE}${API_VERSION}${CUSTOMERS}${VACCINATIONS}${TYPES}`,\r\n get_bearer\r\n );\r\n\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n } else {\r\n throw new Error(\r\n \"erro na chamada getVaccinationsTypes: \" + response.status\r\n );\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, \"Erro ao buscar os tipos das vacinações\");\r\n }\r\n }\r\n};\r\n\r\nconst getVaccinations = async () => {\r\n let validationError = false;\r\n try {\r\n const { get_bearer } = header();\r\n const response = await fetchWithTimeout(\r\n `${API_BASE}${API_VERSION}${CUSTOMERS}${VACCINATIONS}`,\r\n get_bearer\r\n );\r\n if (response.ok) {\r\n const responseJson = response.data;\r\n return responseJson;\r\n } else if (response.status === 404) {\r\n validationError = true;\r\n throw new Error(\"Nenhum registro encontrado\");\r\n } else {\r\n throw new Error(\"erro na chamada getVaccinations: \" + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, \"Erro ao buscar as vacinações\");\r\n }\r\n }\r\n};\r\n\r\nconst registerVaccination = async (type_id, date, picture_file_content) => {\r\n let validationError = false;\r\n try {\r\n let data = {\r\n type_id: type_id,\r\n date: date,\r\n picture_file_content: picture_file_content,\r\n };\r\n const { post_bearer } = header(data);\r\n const response = await fetchWithTimeout(\r\n `${API_BASE}${API_VERSION}${CUSTOMERS}${VACCINATIONS}`,\r\n post_bearer\r\n );\r\n\r\n if (response.ok) {\r\n return;\r\n }\r\n\r\n if (response.status === 400) {\r\n validationError = true;\r\n const errorJson = response.data;\r\n throw new Error(errorJson.message);\r\n } else {\r\n throw new Error(\"erro na chamada getVaccinations: \" + response.status);\r\n }\r\n } catch (error) {\r\n if (validationError) {\r\n throw error;\r\n } else {\r\n getSectionsCatchErrors(error, \"Erro ao enviar vacinação.\");\r\n }\r\n }\r\n};\r\n\r\nexport { getVaccinationsTypes, getVaccinations, registerVaccination };\r\n","import styled from \"styled-components\";\r\n\r\nexport const Container = styled.div`\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n }\r\n\r\n @media (max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .container-pack {\r\n padding-bottom: 80px;\r\n }\r\n }\r\n`;\r\n\r\nexport const PageContainer = styled.div`\r\n padding-top: 5vh;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 1080px !important;\r\n min-height: 100vh;\r\n margin: auto;\r\n box-sizing: border-box;\r\n padding-bottom: 10vh;\r\n position: relative;\r\n`;\r\n\r\nexport const ButtonAddVaccination = styled.button`\r\n margin: 2rem 0 5rem 0;\r\n background: #fa9f2a;\r\n padding: 1rem 3rem 1rem 3rem;\r\n border-radius: 18px;\r\n transition: ease-in-out 0.2s;\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n`;\r\n\r\nexport const VaccinationContainer = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n background-color: #ffffff;\r\n border-radius: 18px;\r\n padding: 20px 30px;\r\n margin-bottom: 30px;\r\n width: 60%;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);\r\n border-left: 2px solid #fa9f2a;\r\n transition: ease-in 0.2s;\r\n @media (max-width: 600px) {\r\n text-align: center;\r\n width: 90%;\r\n align-items: center;\r\n flex-direction: column;\r\n }\r\n &:hover {\r\n transform: scale(1.05);\r\n }\r\n`;\r\n\r\nexport const VaccinationDate = styled.h3`\r\n color: #fa9f2a;\r\n`;\r\n\r\nexport const VaccinationType = styled.h3`\r\n color: #707070;\r\n`;\r\n\r\nexport const NotFound = styled.h4`\r\n color: #14213d;\r\n font-family: \"Roboto\", sans-serif;\r\n font-size: 1.2rem;\r\n font-weight: 300;\r\n text-align: center;\r\n padding: 2rem;\r\n`;\r\n\r\nexport const Label = styled.label`\r\n color: #000;\r\n margin: 2rem 0 1rem 0;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const TableView = styled.tbody`\r\n border-radius: 0.5rem;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n color: #000;\r\n border: 1px solid #c4c4c4;\r\n width: 30vw;\r\n\r\n @media (max-width: 700px) {\r\n width: 70vw;\r\n }\r\n\r\n @media (max-width: 500px) {\r\n width: 90vw;\r\n }\r\n`;\r\n\r\nexport const TableRow = styled.tr`\r\n border-bottom: 0.1px solid #c4c4d4;\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n padding: 1rem;\r\n color: ${(props) =>\r\n props.clicked && !props.disabled ? \"#FA9F2A\" : \"#000\"};\r\n transition: ease-in 0.2s;\r\n &:hover {\r\n color: #fff;\r\n background: #fa9f2a;\r\n }\r\n opacity: ${(props) => props.disabled && \"0.4\"};\r\n cursor: ${(props) => props.disabled && \"auto\"};\r\n`;\r\n\r\nexport const TableInfoScheduled = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin-right: auto;\r\n gap: 0.1rem;\r\n margin-right: auto;\r\n margin-left: auto;\r\n text-align: center;\r\n p {\r\n font-size: 0.9rem;\r\n }\r\n`;\r\n","import { useEffect } from \"react\";\r\nimport { toast } from \"react-toastify\";\r\nimport { getVaccinationsTypes } from \"../../../../../api/vaccinations\";\r\nimport { TableInfoScheduled, TableRow, TableView } from \"./styles\";\r\n\r\nexport default function TableTypes({ types, setTypes, type, setType }) {\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n async function getAllVaccinationsTypes() {\r\n await getVaccinationsTypes()\r\n .then((res) => {\r\n if (isMounted) {\r\n setTypes(res);\r\n }\r\n })\r\n .catch((err) => toast.error(err.message));\r\n }\r\n getAllVaccinationsTypes();\r\n\r\n return () => (isMounted = false);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n {types.map((typeVaccination) => {\r\n return (\r\n {\r\n setType(typeVaccination);\r\n }}\r\n clicked={typeVaccination === type}\r\n >\r\n \r\n {typeVaccination.description}\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n );\r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const ModalContainer = styled.div``;\r\n\r\nexport const HeaderContainer = styled.div`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: #f7f7f7;\r\n`;\r\n\r\nexport const HeaderModal = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 20px 20px 0 0;\r\n padding: 10px 30px;\r\n text-align: left;\r\n font-size: 1.5rem;\r\n color: #000000;\r\n`;\r\n\r\nexport const HeaderTitle = styled.span`\r\n font-size: 0.8rem;\r\n`;\r\n\r\nexport const HeaderSubtitle = styled.span`\r\n font-weight: 700;\r\n font-size: 1.1rem;\r\n`;\r\n\r\nexport const BodyModal = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n overflow-y: scroll;\r\n overflow-x: hidden;\r\n height: 70vh;\r\n padding-bottom: 3rem;\r\n`;\r\n\r\nexport const Input = styled.input`\r\n background: #cfcfcf;\r\n color: #000000;\r\n padding: 1rem 1.2rem;\r\n border-radius: 1rem;\r\n`;\r\n\r\nexport const InputFile = styled.input`\r\n display: none;\r\n`;\r\n\r\nexport const FileContainer = styled.div`\r\n label {\r\n background: #fa9f2a;\r\n color: #F3F3F3;\r\n padding: 1rem 2rem;\r\n border-radius: 1rem;\r\n display: block;\r\n cursor: pointer;\r\n transition: 0.3s ease-in;\r\n }\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n`;\r\n\r\nexport const ContainerFooterModal = styled.div`\r\n width: 100%;\r\n`;\r\n\r\nexport const CloseModal = styled.button`\r\n width: 50%;\r\n padding: 1rem;\r\n color: #fa9f2a;\r\n background-color: #FFFFFF;\r\n font-size: 1rem;\r\n`;\r\n\r\nexport const SendModal = styled.button`\r\n width: 50%;\r\n padding: 1rem;\r\n font-size: 1rem;\r\n background-color: ${(props) => (props.disabled ? \"#CFCFCF\" : \"#FA9F2A\")};\r\n`;\r\n\r\nexport const Warning = styled.span`\r\n margin-bottom: 0.2rem;\r\n color: #e63946;\r\n`;\r\n","export const uploadImage = async (\r\n e,\r\n setPictureFileContent,\r\n setSendFileOpen\r\n) => {\r\n const file = e.target.files[0];\r\n const base64 = await convertBase64(file);\r\n setSendFileOpen(false);\r\n setPictureFileContent(base64);\r\n};\r\n\r\nconst convertBase64 = (file) => {\r\n return new Promise((resolve, reject) => {\r\n const fileReader = new FileReader();\r\n fileReader.readAsDataURL(file);\r\n\r\n fileReader.onload = () => {\r\n resolve(fileReader.result);\r\n };\r\n\r\n fileReader.onerror = (error) => {\r\n reject(error);\r\n };\r\n });\r\n};\r\n","import React, { useState } from \"react\";\r\nimport Modal from \"react-modal\";\r\nimport { toast } from \"react-toastify\";\r\nimport moment from \"moment\";\r\nimport { registerVaccination } from \"../../../../api/vaccinations\";\r\nimport LoaderSpinner from \"../../../../components/LoaderSpinner\";\r\nimport TableTypes from \"../components/TableTypes\";\r\nimport {\r\n ModalContainer,\r\n HeaderContainer,\r\n HeaderModal,\r\n HeaderTitle,\r\n HeaderSubtitle,\r\n BodyModal,\r\n ContainerFooterModal,\r\n CloseModal,\r\n SendModal,\r\n Input,\r\n FileContainer,\r\n InputFile,\r\n Warning,\r\n} from \"./styles\";\r\nimport \"./style.css\";\r\nimport { uploadImage } from \"../utils/convertBase64\";\r\nimport { Label } from \"../styles\";\r\n\r\nconst ModalNewVaccination = ({\r\n showVaccinationModal,\r\n setShowVaccinationModal,\r\n}) => {\r\n const [loading, setLoading] = useState(false);\r\n const [vaccinationDate, setVaccinationDate] = useState();\r\n const [type, setType] = useState({});\r\n const [types, setTypes] = useState([]);\r\n const [pictureFileContent, setPictureFileContent] = useState(null);\r\n const [sendFileOpen, setSendFileOpen] = useState(true);\r\n\r\n const handleCreateVaccination = async () => {\r\n setLoading(true);\r\n const date = moment(vaccinationDate).tz(\"UTC\").format(\"YYYY-MM-DD\");\r\n await registerVaccination(type.id, date, pictureFileContent)\r\n .then(() => {\r\n toast.success(\"Vacina registrada!\");\r\n setShowVaccinationModal(false);\r\n })\r\n .catch((err) => toast.error(err.message))\r\n .finally(() => {\r\n setLoading(false);\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n setShowVaccinationModal(!showVaccinationModal)\r\n }\r\n className=\"vaccination\"\r\n overlayClassName=\"modal-overlay\"\r\n ariaHideApp={false}\r\n >\r\n \r\n \r\n adicionar \r\n VACINA \r\n \r\n \r\n\r\n \r\n Data de vacinação: \r\n setVaccinationDate(e.target.value)}\r\n />\r\n Tipo de vacinação: \r\n Foto do comprovante: \r\n {sendFileOpen && !pictureFileContent && (\r\n foto necessária \r\n )}\r\n \r\n \r\n {pictureFileContent\r\n ? \"enviar outra foto\"\r\n : \"enviar foto\"}\r\n \r\n {\r\n uploadImage(\r\n e,\r\n setPictureFileContent,\r\n setSendFileOpen\r\n );\r\n }}\r\n />\r\n \r\n \r\n\r\n \r\n \r\n enviar\r\n \r\n \r\n setShowVaccinationModal(!showVaccinationModal)\r\n }\r\n >\r\n fechar\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default ModalNewVaccination;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { toast } from \"react-toastify\";\r\nimport { getVaccinations } from \"../../../api/vaccinations\";\r\nimport Footer from \"../../../components/Footer\";\r\nimport Header from \"../../../components/Header\";\r\nimport TabButton from \"../../../components/TabButton\";\r\nimport {\r\n ButtonAddVaccination,\r\n Container,\r\n PageContainer,\r\n VaccinationContainer,\r\n VaccinationDate,\r\n VaccinationType,\r\n NotFound,\r\n} from \"./styles\";\r\nimport ModalNewVaccination from \"./ModalNewVaccination\";\r\nimport LoaderSpinner from \"../../../components/LoaderSpinner\";\r\nimport moment from \"moment\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport { getUser } from \"../../../utils/auth\";\r\n\r\nconst Vaccination = () => {\r\n const history = useHistory();\r\n\r\n if (!getUser()?.company?.customer_vaccination_enabled) {\r\n history.replace(\"/home\");\r\n }\r\n\r\n const [loading, setLoading] = useState(false);\r\n const [showVaccinationModal, setShowVaccinationModal] = useState(false);\r\n const [vaccinations, setVaccinations] = useState([]);\r\n\r\n\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n if (isMounted) {\r\n setLoading(true);\r\n async function getAllVaccinations() {\r\n await getVaccinations()\r\n .then((res) => setVaccinations(res))\r\n .catch((err) => toast.error(err.message))\r\n .finally(() => setLoading(false));\r\n }\r\n getAllVaccinations();\r\n }\r\n return () => (isMounted = false);\r\n }, [showVaccinationModal]);\r\n\r\n return (\r\n \r\n {showVaccinationModal && (\r\n \r\n {!vaccinations ? (\r\n \r\n Nenhuma vacina encontrada! Registre uma nova vacina\r\n clicando no botão adicionar vacinação .\r\n \r\n ) : (\r\n vaccinations?.map((vaccination) => (\r\n \r\n \r\n {moment(vaccination.date).format(\"DD/MM/YYYY\")}\r\n \r\n \r\n {vaccination.typeDescription}\r\n \r\n \r\n ))\r\n )}\r\n \r\n setShowVaccinationModal(!showVaccinationModal)\r\n }\r\n >\r\n adicionar vacinação\r\n \r\n\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Vaccination;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Container = styled.div`\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n }\r\n\r\n @media (max-width: 960px) {\r\n .footer-service-list .line-separator {\r\n display: none;\r\n }\r\n\r\n .container-pack {\r\n padding-bottom: 80px;\r\n }\r\n }\r\n`;\r\n\r\nexport const PageContainer = styled.div`\r\n padding-top: 5vh;\r\n background-color: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n width: 100%;\r\n max-width: 1080px !important;\r\n min-height: 100vh;\r\n margin: auto;\r\n box-sizing: border-box;\r\n padding-bottom: 10vh;\r\n position: relative;\r\n`;\r\n\r\n\r\n\r\nexport const NotFound = styled.h4`\r\n color: #14213d;\r\n font-family: \"Roboto\", sans-serif;\r\n font-size: 1.2rem;\r\n font-weight: 300;\r\n text-align: center;\r\n padding: 2rem;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const MessageContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n background-color: #ffffff;\r\n border-radius: 18px;\r\n margin-bottom: 30px;\r\n width: 60%;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.3);\r\n transition: ease-in 0.2s;\r\n word-break: break-all;\r\n cursor: pointer;\r\n @media (max-width: 750px) {\r\n width: 95%;\r\n }\r\n &:hover {\r\n transform: scale(1.05);\r\n box-shadow: 5px 5px 6px 5px rgba(0, 0, 0, 0.3);\r\n }\r\n`;\r\n\r\nexport const MessageTitle = styled.h3`\r\n text-align: center;\r\n font-size: 1.8rem;\r\n color: #fa9f2a;\r\n padding: 30px 20px;\r\n @media (max-width: 600px) {\r\n font-size: 1.5rem;\r\n }\r\n`;\r\n\r\nexport const MessageHeader = styled.span`\r\n background-color: #fa9f2a;\r\n border-radius: 18px 18px 0 0;\r\n width: 100%;\r\n padding: 0.3rem 0;\r\n text-align: center;\r\n`;\r\n","import { useState } from \"react\";\r\nimport { MessageContainer, MessageHeader, MessageTitle } from \"./styles\";\r\nimport ModalNextMessages from \"../../../../../components/Modals/ModalNextMessages\";\r\n\r\nimport moment from \"moment\";\r\n\r\nexport default function MessageCard({ message }) {\r\n const [modalOpen, setModalOpen] = useState(false);\r\n\r\n return (\r\n <>\r\n {\r\n setModalOpen(!modalOpen);\r\n }}\r\n >\r\n {modalOpen && (\r\n setModalOpen(val)}\r\n />\r\n )}\r\n \r\n {moment(message.valid_from).format(\"DD/MM/YYYY\")}\r\n \r\n {message.title} \r\n \r\n \r\n );\r\n}\r\n","import { Container, NotFound, PageContainer } from \"./styles\";\r\nimport LoaderSpinner from \"../../../components/LoaderSpinner\";\r\nimport Header from \"../../../components/Header\";\r\nimport Footer from \"../../../components/Footer\";\r\nimport TabButton from \"../../../components/TabButton\";\r\nimport { useEffect } from \"react\";\r\nimport { getMessagesViewed } from \"../../../api/messages\";\r\nimport { useState } from \"react\";\r\nimport { toast } from \"react-toastify\";\r\nimport MessageCard from \"./components/MessageCard\";\r\n\r\nconst Messages = () => {\r\n const [loading, setLoading] = useState(true);\r\n const [messages, setMessages] = useState([]);\r\n\r\n useEffect(() => {\r\n async function getMessages() {\r\n await getMessagesViewed()\r\n .then((res) => {\r\n setMessages(res);\r\n })\r\n .catch((err) => toast.error(err.message))\r\n .finally(() => setLoading(false));\r\n }\r\n getMessages();\r\n }, []);\r\n\r\n return (\r\n <>\r\n \r\n \r\n {messages.length === 0 ? (\r\n Nenhuma mensagem encontrada. \r\n ) : (\r\n <>\r\n {messages.map((message) => (\r\n \r\n \r\n \r\n );\r\n};\r\nexport default Messages;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Container = styled.aside`\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-evenly;\r\n text-align: center;\r\n padding: 2rem;\r\n\r\n img {\r\n width: 15rem;\r\n }\r\n\r\n @media (max-width: 860px) {\r\n flex-direction: column;\r\n }\r\n`;\r\n\r\nexport const InfoWrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n width: 30%;\r\n\r\n @media (max-width: 860px) {\r\n width: 80%;\r\n }\r\n`;\r\n\r\nexport const DescriptionCard = styled.h2`\r\n color: #717171;\r\n margin-top: 2rem;\r\n`;\r\n\r\nexport const ButtonRedirect = styled.button`\r\n margin-top: 2rem;\r\n color: #FFFFFF;\r\n background: #fa9f2a;\r\n border-radius: 1rem;\r\n padding: 1rem 2rem;\r\n transition: ease-in 0.2s;\r\n font-weight: bold;\r\n font-size: 1.2rem;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n`;\r\n","import React from \"react\";\r\n\r\nimport {\r\n Container,\r\n InfoWrapper,\r\n DescriptionCard,\r\n ButtonRedirect,\r\n} from \"./styles\";\r\nimport logo from \"../../assets/Logo.svg\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nexport function NotFound() {\r\n const history = useHistory();\r\n\r\n function handleRedirectHome() {\r\n history.replace(\"/home\");\r\n }\r\n\r\n return (\r\n \r\n \r\n A página requisitada não foi encontrada. \r\n handleRedirectHome()}>\r\n Voltar para o início\r\n \r\n \r\n \r\n );\r\n}\r\n","import styled, { keyframes } from \"styled-components\";\r\n\r\nconst appear = keyframes`\r\n 0% {\r\n opacity: 0;\r\n }\r\n\r\n 30% {\r\n opacity: 1;\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n width: 100vw;\r\n height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n animation: ${appear} 1.8s linear alternate;\r\n`;\r\n\r\nexport const LogoImage = styled.img`\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n`;","import React, { useEffect } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nimport { Container, LogoImage } from \"./styles\";\r\n\r\nexport function SplashLogo({ location }) {\r\n const history = useHistory();\r\n const image_url = location.state.image_url;\r\n\r\n useEffect(() => {\r\n setTimeout(() => {\r\n history.replace(\"/home\", \"splashShowed\");\r\n }, 2000);\r\n }, []);\r\n\r\n return (\r\n \r\n \r\n );\r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const Title = styled.h1`\r\n color: #14213d;\r\n text-align: center;\r\n background: #fff;\r\n border-radius: 22px;\r\n overflow: hidden;\r\n opacity: 1;\r\n padding: 14px;\r\n width: 400px;\r\n font-size: 1.4rem;\r\n text-transform: uppercase;\r\n border: 1px solid #F7F7F7;\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n\r\n @media (max-width: 920px) {\r\n width: 20rem;\r\n font-size: 1.2rem;\r\n }\r\n\r\n @media (max-width: 560px) {\r\n font-size: 1rem;\r\n }\r\n`;\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n max-width: 1080px !important;\r\n display: flex;\r\n align-items: center;\r\n align-self: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n position: relative;\r\n max-height: 200px;\r\n background-color: #C4C4C4;\r\n\r\n .title {\r\n position: absolute;\r\n bottom: -25px;\r\n left: 0;\r\n right: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n }\r\n\r\n .image-service-list {\r\n max-width: 1080px;\r\n max-height: 200px;\r\n width: auto;\r\n height: auto;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid #F7F7F7;\r\n }\r\n\r\n .image-service-list .service-banner {\r\n width: 1080px;\r\n }\r\n\r\n .online-view {\r\n position: absolute;\r\n top: 20px;\r\n left: 30px;\r\n background-color: #14213D;\r\n border-radius: 20px;\r\n width: 100px;\r\n height: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .online-view .online-text {\r\n margin-left: 5px;\r\n }\r\n\r\n @media(max-width: 1080px) {\r\n .image-service-list .service-banner {\r\n max-width: 100%;\r\n }\r\n }\r\n\r\n @media(max-width: 640px) {\r\n .image-service-list {\r\n height: 150px;\r\n }\r\n\r\n .online-view {\r\n top: 10px;\r\n left: 10px;\r\n width: 80px;\r\n height: 25px;\r\n font-size: 0.8rem;\r\n }\r\n }\r\n\r\n @media(max-width: 375px) {\r\n .image-service-list {\r\n height: 120px;\r\n }\r\n }\r\n`;\r\n","import React from \"react\";\r\nimport { FiGlobe } from \"react-icons/fi\";\r\nimport { Container, Title } from \"./styles\";\r\n\r\nconst TimeClockBanner = ({ bannerUrl, title, serviceType, isUrl }) => {\r\n return (\r\n \r\n \r\n\r\n \r\n
{title} \r\n \r\n\r\n {\"online\" === serviceType && (\r\n \r\n online \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default TimeClockBanner;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Container = styled.h3`\r\n background-color: #fff;\r\n border-radius: 1rem;\r\n padding: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n max-width: 1080px !important;\r\n padding-top: 5rem;\r\n padding-bottom: 20rem;\r\n z-index: -1;\r\n\r\n .background-body {\r\n background-color: #fff;\r\n width: 100%;\r\n min-height: 100vh;\r\n position: relative;\r\n }\r\n\r\n .notFound {\r\n color: #14213d;\r\n font-size: 1.4rem;\r\n text-align: center;\r\n }\r\n\r\n .footer-service-list {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 0;\r\n }\r\n`;\r\n\r\nexport const ContainerNoFlex = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 2rem;\r\n width: 50vw;\r\n\r\n & + & {\r\n margin-top: 3rem;\r\n }\r\n @media (max-width: 660px) {\r\n width: 80vw;\r\n }\r\n`;\r\n\r\nexport const Text = styled.h2`\r\n text-align: center;\r\n color: #707070;\r\n font-size: 1.1rem;\r\n`;\r\n\r\nexport const ContainerDate = styled.div`\r\n width: 50vw;\r\n padding: 0 10px;\r\n display: flex;\r\n justify-content: space-around;\r\n align-items: center;\r\n @media (max-width: 1280px) {\r\n width: 70vw;\r\n }\r\n @media (max-width: 700px) {\r\n width: 90vw;\r\n }\r\n`;\r\n\r\nexport const DateArrowRight = styled.img`\r\n width: 0.5rem;\r\n`;\r\n\r\nexport const DateArrowLeft = styled.img`\r\n width: 0.5rem;\r\n`;\r\n\r\nexport const DatesView = styled.div`\r\n width: 40vw;\r\n padding: 1rem;\r\n border-radius: 1rem;\r\n display: flex;\r\n overflow-x: scroll;\r\n justify-content: flex-start;\r\n background: #f1f1f1;\r\n @media (max-width: 1280px) {\r\n width: 50vw;\r\n }\r\n @media (max-width: 700px) {\r\n width: 70vw;\r\n }\r\n`;\r\n\r\nexport const TypesView = styled.div`\r\n display: flex;\r\n overflow-x: scroll;\r\n justify-content: flex-start;\r\n text-align: center;\r\n width: 85%;\r\n ::-webkit-scrollbar-track {\r\n background: #fff;\r\n }\r\n`;\r\n\r\nexport const ContainerHour = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 2rem;\r\n margin-top: -20px;\r\n`;\r\n\r\nexport const SelectView = styled.div`\r\n border-radius: 1rem;\r\n border-width: 1px;\r\n border-color: #c4c4c4;\r\n margin-top: 10px;\r\n text-align: center;\r\n width: 50vw;\r\n margin-bottom: 2rem;\r\n select {\r\n width: 15rem;\r\n padding: 1rem 1rem;\r\n border-radius: 1rem;\r\n option {\r\n padding: 1rem;\r\n }\r\n }\r\n`;\r\n\r\nexport const ViewBox = styled.div`\r\n margin: 0 10px;\r\n align-items: center;\r\n &:first-child {\r\n margin-left: auto;\r\n }\r\n &:last-child {\r\n margin-right: auto;\r\n }\r\n`;\r\n\r\nexport const ButtonImg = styled.img`\r\n width: 90px;\r\n height: 90px;\r\n border-radius: 18px;\r\n background-color: #fff;\r\n border: 2px solid\r\n ${(props) => (props.label === props.type ? \"#FA9F2A\" : \"#C4C4C4\")};\r\n`;\r\n\r\nexport const ButtonView = styled.div`\r\n display: flex;\r\n`;\r\n\r\nexport const ButtonText = styled.span`\r\n font-size: 13px;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n margin: 0 5px;\r\n flex: 1;\r\n flex-wrap: wrap;\r\n width: 0.8px;\r\n text-align: center;\r\n color: ${(props) => (props.label === props.type ? \"#FA9F2A\" : \"#14213D\")};\r\n`;\r\n\r\nexport const NotFound = styled.span`\r\n text-align: center;\r\n color: #14213d;\r\n`;\r\n\r\nexport const ButtonCheck = styled.button`\r\n display: flex;\r\n border-radius: 20px;\r\n width: 200px;\r\n height: 42px;\r\n font-size: 1.2rem;\r\n background-color: #fa9f2a;\r\n align-items: center;\r\n justify-content: center;\r\n align-self: center;\r\n`;\r\n\r\nexport const TextCheck = styled.h3`\r\n color: #fff;\r\n font-family: \"Roboto\";\r\n font-size: 1rem;\r\n font-weight: 300;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const ButtonOrange = styled.button`\r\n background-color: #fa9f2a;\r\n justify-content: center;\r\n width: 7rem;\r\n align-self: flex-end;\r\n height: 100%;\r\n border-top-right-radius: 1rem;\r\n border-bottom-right-radius: 1rem;\r\n overflow: hidden;\r\n font-size: 1.1rem;\r\n @media (max-width: 720px) {\r\n width: 6rem;\r\n }\r\n`;\r\n\r\nexport const SelectDaysContainer = styled.div`\r\n display: flex;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n\r\n @media(max-width: 700px){\r\n gap: 0.6rem;\r\n }\r\n`;\r\n\r\nexport const ButtonSelectDays = styled.button`\r\n background-color: ${({ selected }) => (selected ? \"#FA9F2A\" : \"#FFFFFF\")};\r\n color: ${({ selected }) => (selected ? \"#FFFFFF\" : \"#FA9F2A\")};\r\n border: 1px solid #fa9f2a;\r\n\r\n justify-content: center;\r\n width: 7rem;\r\n align-self: flex-end;\r\n height: 2rem;\r\n border-radius: 1rem;\r\n overflow: hidden;\r\n font-size: 1.1rem;\r\n\r\n transition: filter ease-in 0.22s;\r\n\r\n @media (max-width: 720px) {\r\n width: 6rem;\r\n }\r\n\r\n &:hover {\r\n filter: brightness(0.9);\r\n }\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const ContainerAbout = styled.div`\r\n display: flex;\r\n align-items: center;\r\n padding-left: 2rem;\r\n justify-content: flex-start;\r\n\r\n div {\r\n display: flex;\r\n }\r\n\r\n @media (max-width: 720px) {\r\n padding-left: 0.5rem;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const ContainerButtonInfo = styled.div`\r\n display: flex;\r\n align-self: center;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n background-color: #ffffff;\r\n border-radius: 18px;\r\n width: 800px;\r\n padding-bottom: 0px;\r\n margin-bottom: 20px;\r\n\r\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\r\n transition: ease-in 0.2s;\r\n height: 4rem;\r\n\r\n position: relative;\r\n\r\n @media (max-width: 820px) {\r\n width: 90vw;\r\n }\r\n @media (max-width: 760px) {\r\n height: 9rem;\r\n }\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const ContainerButtonOrange = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-end;\r\n text-align: center;\r\n\r\n height: 100%;\r\n position: absolute;\r\n`;","import styled from \"styled-components\";\r\n\r\nexport const ContainerOpacity = styled.div`\r\n cursor: pointer;\r\n transition: ease-in 0.2s;\r\n display: flex;\r\n justify-content: flex-end;\r\n height: 100%;\r\n\r\n &:hover {\r\n opacity: 0.6;\r\n }\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const ContainerTimeClockInfo = styled.div`\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n margin-top: 5px;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const TextAbout = styled.h3`\r\n color: #707070;\r\n font-size: 14px;\r\n\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n padding-right: 1rem;\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\nexport const TextAboutEmphasis = styled.h3`\r\n color: #14213d;\r\n font-size: 14px;\r\n margin-left: 5px;\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n\r\n display: flex;\r\n gap: 2rem;\r\n align-items: center;\r\n width: 25rem;\r\n\r\n @media (max-width: 720px) {\r\n justify-content: flex-start;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n width: 70vw;\r\n font-size: 12px;\r\n }\r\n`;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { FiCalendar, FiClock } from \"react-icons/fi\";\r\nimport { getTimeDiff } from \"../../utils/getTimeDiff\";\r\n\r\nimport { ButtonOrange } from \"../ButtonOrange\";\r\nimport { ContainerAbout } from \"../ContainerAbout\";\r\nimport { ContainerButtonInfo } from \"../ContainerButtonInfo\";\r\nimport { ContainerButtonOrange } from \"../ContainerButtonOrange\";\r\nimport { ContainerOpacity } from \"../ContainerOpacity\";\r\nimport { ContainerTimeClockInfo } from \"../ContainerTimeClockInfo\";\r\nimport { TextAbout } from \"../TextAbout\";\r\nimport { TextAboutEmphasis } from \"../TextAboutEmphasis\";\r\n\r\nexport function CardHistoryTimeClock({\r\n timeClock,\r\n handleOpenModal,\r\n actualCheckin,\r\n}) {\r\n const [actualTime, setActualTime] = useState(timeClock.total_time);\r\n\r\n useEffect(() => {\r\n let interval;\r\n if (timeClock.state === \"in_progress\") {\r\n interval = setInterval(() => {\r\n getTimeDiff(setActualTime, actualCheckin?.started_at);\r\n }, 1000);\r\n }\r\n return () => {\r\n clearInterval(interval);\r\n };\r\n }, [actualCheckin]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n {timeClock.started_at} \r\n {timeClock.finished_at} \r\n \r\n
\r\n \r\n \r\n \r\n \r\n\r\n {timeClock.state === \"in_progress\" && (\r\n handleOpenModal()}>\r\n \r\n cancelar \r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n","\r\nimport styled from \"styled-components\";\r\n\r\nexport const PageInfoWhatToDo = styled.h4`\r\n color: #14213D;\r\n font-size: 1.2rem;\r\n font-weight: 700;\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n`;","import { t } from \"i18next\";\r\nimport moment from \"moment\";\r\nimport { useEffect, useState } from \"react\";\r\nimport {\r\n getTimeClockCheckinCurrent,\r\n getTimeClockHistory,\r\n} from \"../../../../../../api/time_clock\";\r\n\r\nimport { ButtonSelectDays, SelectDaysContainer } from \"../ButtonOrange\";\r\nimport { CardHistoryTimeClock } from \"../CardHistoryTimeClock\";\r\nimport { PageInfoWhatToDo } from \"../PageInfoWhatToDo\";\r\n\r\nexport function HistoryTimeList({ handleOpenModal, loading, setLoading }) {\r\n const [timeClockHistoryList, setTimeClockHistoryList] = useState([]);\r\n const [actualCheckin, setActualCheckin] = useState(null);\r\n const [daysSelected, setDaysSelected] = useState(7);\r\n\r\n const doGetHistory = async (isMounted) => {\r\n await getTimeClockHistory(daysSelected)\r\n .then((currentHistory) => {\r\n if (isMounted) {\r\n setTimeClockHistoryList(\r\n currentHistory.map((timeClock) => {\r\n return {\r\n ...timeClock,\r\n started_at: moment(timeClock.started_at)\r\n .tz(\"America/Sao_Paulo\")\r\n .format(\"DD/MM/YYYY - HH:mm:ss\"),\r\n finished_at: !timeClock.finished_at\r\n ? \"Em andamento\"\r\n : timeClock.started_at - timeClock.finished_at === 0\r\n ? moment(timeClock.finished_at)\r\n .tz(\"America/Sao_Paulo\")\r\n .format(\"HH:mm:ss\")\r\n : moment(timeClock.finished_at)\r\n .tz(\"America/Sao_Paulo\")\r\n .format(\"DD/MM/YYYY - HH:mm:ss\"),\r\n };\r\n })\r\n );\r\n }\r\n })\r\n .catch(() => setTimeClockHistoryList([]))\r\n .finally(() => setLoading(false));\r\n };\r\n\r\n function handleChangeSelecetedDays(numberOfDays) {\r\n setLoading(true);\r\n setDaysSelected(numberOfDays);\r\n }\r\n\r\n const doGetChecked = async (isMounted) => {\r\n await getTimeClockCheckinCurrent()\r\n .then((currentCheckin) => {\r\n if (isMounted) {\r\n setActualCheckin(currentCheckin);\r\n }\r\n })\r\n .catch(() => setActualCheckin(\"\"));\r\n };\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n doGetChecked(isMounted);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, []);\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n if (isMounted) {\r\n doGetHistory(isMounted);\r\n }\r\n\r\n return () => (isMounted = false);\r\n }, [loading, daysSelected]);\r\n\r\n return timeClockHistoryList.length === 0 ? (\r\n {t(\"noCheckinAvailable\")} \r\n ) : (\r\n <>\r\n \r\n {t(\"historyFromLastDays\")} {daysSelected} {t(\"daysWord\")}\r\n \r\n \r\n handleChangeSelecetedDays(7)}\r\n selected={daysSelected === 7}\r\n >\r\n 7 {t(\"daysWord\")}\r\n \r\n handleChangeSelecetedDays(15)}\r\n selected={daysSelected === 15}\r\n >\r\n 15 {t(\"daysWord\")}\r\n \r\n handleChangeSelecetedDays(30)}\r\n selected={daysSelected === 30}\r\n >\r\n 30 {t(\"daysWord\")}\r\n \r\n \r\n\r\n {!loading &&\r\n timeClockHistoryList.map((timeClock) => {\r\n return (\r\n \r\n \r\n\r\n {modalType && (\r\n \r\n \r\n\r\n \r\n {job_day_id ? (\r\n
\r\n
\r\n
\r\n\r\n
Tudo certo! \r\n
\r\n ) : (\r\n <>\r\n
\r\n
\r\n\r\n
Recebemos sua solicitação \r\n \r\n )}\r\n\r\n
\r\n
\r\n \r\n {job_day_id\r\n ? `Seu pedido de ${service?.name} com o ${professional?.name\r\n } foi confirmado para ${dayOfWeek} ${Moment(scheduled_date)\r\n .tz(\"America/Sao_Paulo\")\r\n .format(\"DD/MM\")}`\r\n : `Sua solicitação de ${service?.name\r\n } para ${dayOfWeek} ${Moment(scheduled_date).format(\r\n \"DD/MM\"\r\n )} está aguardando confirmação.`}\r\n \r\n \r\n\r\n
\r\n \r\n E AGORA? \r\n
\r\n \r\n\r\n
\r\n
1 \r\n
\r\n
\r\n
\r\n\r\n
\r\n Enviamos{\" \"}\r\n {!!job_day_id\r\n ? \"todas as informações do agendamento para seu email.\"\r\n : \"um email com um resumo do seu pedido\"}\r\n \r\n
\r\n
\r\n\r\n
\r\n
2 \r\n\r\n
\r\n
\r\n
\r\n\r\n
\r\n {job_day_id\r\n ? `No horário combinado se dirija ao local do serviço (${address_description}). O profissional estará te aguardando.`\r\n : \"Enviaremos em breve um email com a confirmação do horário e profissional para seu serviço.\"}\r\n \r\n
\r\n
\r\n\r\n {!job_day_id && (\r\n
\r\n
3 \r\n
\r\n
\r\n
\r\n\r\n
\r\n No horário agendado o profissional fará seu atendimento.\r\n \r\n
\r\n
\r\n )}\r\n\r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ConfirmedPayment;\r\n","import {\r\n API_BASE,\r\n API_VERSION,\r\n CUSTOMER_ORDERS,\r\n FEEDBACK,\r\n} from \"../../helper/api_urls\";\r\nimport { validateGetResponse } from \"../../helper/validateGetResponse\";\r\nimport { validatePutResponse } from \"../../helper/validatePutResponse\";\r\n\r\nconst putSendClientFeedback = async (order_id, positive) => {\r\n try {\r\n const putUrl = `${API_BASE}${API_VERSION}${CUSTOMER_ORDERS}/${order_id}${FEEDBACK}`;\r\n\r\n const body = {\r\n positive,\r\n };\r\n return await validatePutResponse(putUrl, \"Erro ao dar o feedback\", body);\r\n } catch (error) {\r\n throw error;\r\n }\r\n};\r\n\r\nconst getOrderToGiveFeedback = async (order_id) => {\r\n try {\r\n const getUrl = `${API_BASE}${API_VERSION}${CUSTOMER_ORDERS}/${order_id}`;\r\n\r\n return await validateGetResponse(\r\n getUrl,\r\n \"Erro ao pegar informações do pedido para dar feedback\"\r\n );\r\n } catch (error) {\r\n throw error;\r\n }\r\n};\r\n\r\nexport { putSendClientFeedback, getOrderToGiveFeedback };\r\n","import styled from \"styled-components\";\r\n\r\nexport const ButtonsFeedback = styled.section`\r\n display: flex;\r\n align-items: center;\r\n gap: 5vw;\r\n\r\n button {\r\n background: #e63946;\r\n border-radius: 1rem;\r\n height: 5rem;\r\n width: 19rem;\r\n color: white;\r\n\r\n &.positive {\r\n height: 6rem;\r\n width: 20rem;\r\n background: #2a9d8f;\r\n }\r\n\r\n transition: 0.2s ease-in;\r\n &:hover {\r\n filter: brightness(0.9);\r\n }\r\n }\r\n\r\n div {\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n &:hover {\r\n animation: animate 2s infinite;\r\n }\r\n }\r\n\r\n @keyframes animate {\r\n from {\r\n transform: rotate(0deg);\r\n }\r\n 50% {\r\n transform: rotate(15deg);\r\n }\r\n\r\n 80% {\r\n transform: rotate(-15deg);\r\n }\r\n\r\n 100% {\r\n transform: rotate(0deg);\r\n }\r\n }\r\n\r\n @media (max-width: 630px) {\r\n flex-direction: column;\r\n }\r\n`;\r\n","import { AiOutlineLike, AiOutlineDislike } from \"react-icons/ai\";\r\nimport { toast } from \"react-toastify\";\r\nimport { useState } from \"react\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nimport { putSendClientFeedback } from \"../../../../../../api/requests/orders/putFeedbackClientApi\";\r\n\r\nimport { ButtonsFeedback } from \"./styles\";\r\nimport LoaderSpinner from \"../../../../../../components/LoaderSpinner\";\r\n\r\nexport function ButtonFeedbackContainer({ order_id }) {\r\n const [loading, setLoading] = useState(false);\r\n const history = useHistory();\r\n\r\n async function handleGiveFeedback(feedback) {\r\n setLoading(true);\r\n await putSendClientFeedback(order_id, feedback)\r\n .then(() => {\r\n toast.success(\"Feedback enviado com sucesso\");\r\n })\r\n .catch((error) => toast.error(error.message))\r\n .finally(() => {\r\n setTimeout(() => {\r\n setLoading(false);\r\n history.replace(\"/home\");\r\n }, 2000);\r\n });\r\n }\r\n\r\n return loading ? (\r\n \r\n handleGiveFeedback(true)}\r\n >\r\n \r\n \r\n handleGiveFeedback(false)}>\r\n \r\n \r\n \r\n );\r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const OrderFeedbackContainer = styled.div`\r\n height: 100vh;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n\r\n gap: 6vh;\r\n padding: 2rem;\r\n\r\n img {\r\n width: 15rem;\r\n }\r\n\r\n h1, h2 {\r\n color: #14213d;\r\n }\r\n`;\r\n","import { useState, useEffect } from \"react\";\r\nimport { useLocation, useHistory } from \"react-router-dom\";\r\nimport { toast } from \"react-toastify\";\r\nimport moment from \"moment\";\r\n\r\nimport { getOrderToGiveFeedback } from \"../../../../api/requests/orders/putFeedbackClientApi\";\r\nimport LoaderSpinner from \"../../../../components/LoaderSpinner\";\r\nimport { ButtonFeedbackContainer } from \"./components/ButtonFeedbackContainer\";\r\n\r\nimport { OrderFeedbackContainer } from \"./styles\";\r\n\r\nimport logo from \"../../../../assets/Logo.svg\";\r\n\r\nexport function OrderFeedback() {\r\n const [order, setOrder] = useState({});\r\n const [loading, setLoading] = useState(true);\r\n const history = useHistory();\r\n\r\n const query = new URLSearchParams(useLocation().search);\r\n const order_id = query.get(\"orderId\");\r\n\r\n useEffect(() => {\r\n let isMounted = true;\r\n\r\n async function doGetOrderToFeedback() {\r\n await getOrderToGiveFeedback(order_id)\r\n .then((res) => {\r\n if (isMounted) {\r\n res.time = moment(res.scheduled_date).format(\"DD/MM\");\r\n setOrder(res);\r\n }\r\n })\r\n .catch((error) => {\r\n toast.error(error.message);\r\n setTimeout(() => {\r\n history.replace(\"/home\");\r\n }, 2000);\r\n })\r\n .finally(() => {\r\n sessionStorage.removeItem(\"deepLink\");\r\n if (isMounted) {\r\n setLoading(false);\r\n }\r\n });\r\n }\r\n doGetOrderToFeedback();\r\n\r\n return () => (isMounted = false);\r\n }, [order_id, history]);\r\n\r\n return (\r\n \r\n \r\n E aí, gostou do(a) {order?.service?.name} que você fez no dia{\" \"}\r\n {order?.time} com a POSHER?\r\n \r\n Envie seu feedback agora para a empresa! \r\n \r\n );\r\n}\r\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n .content-body-signaturePlan {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n padding-bottom: 200px;\n }\n\n .signaturePlan-container {\n display: flex;\n margin: 10px 0;\n border: 1px solid #F2F2F2;\n box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);\n width: 800px;\n padding: 10px;\n border-radius: 20px;\n position: relative;\n }\n\n .signaturePlan-image {\n width: 100px;\n height: 100px;\n border-radius: 20px;\n }\n\n .content-signaturePlan {\n margin-left: 20px;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n color: #14213D;\n }\n\n .title-signaturePlan {\n font-weight: 700;\n font-size: 1.2rem;\n width: 550px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .description-signaturePlan {\n font-size: 1rem;\n width: 550px;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n color: #B7B7B7;\n margin: 5px 0;\n }\n\n .button-more {\n background: none;\n color: #FA9F2A;\n text-decoration: underline;\n font-size: 1.1rem;\n margin-top: 5px;\n transition: .2s color;\n }\n\n .price-signaturePlan {\n border: 1px solid #14213D;\n color: #14213D;\n position: absolute;\n top: 0;\n right: 0;\n border-radius: 20px 20px 0 20px;\n padding: 5px 15px;\n font-size: 1rem;\n }\n\n .divisor-signaturePlan {\n border: 1px solid #F2F2F2;\n width: 70%;\n margin: 20px 0;\n }\n\n .total-signaturePlan {\n color: #14213D;\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 20px;\n }\n\n .button-pay-disabled {\n font-size: 1.2rem;\n border-radius: 20px;\n margin-top: 10px;\n padding: 20px 230px;\n background-color: #CFCFCF;\n }\n\n .button-pay {\n font-size: 1.2rem;\n border-radius: 20px;\n margin-top: 10px;\n padding: 20px 230px;\n background-color: #FA9F2A;\n transition: .2s background;\n }\n\n .button-more:hover {\n color: #E6860B;\n }\n\n .button-pay:hover {\n background-color: #E6860B; \n }\n\n .footer-service-list {\n position: absolute;\n bottom: 30px;\n left: 0;\n }\n\n @media(max-width: 960px) {\n .content-body-signaturePlan {\n padding-bottom: 100px;\n }\n\n .footer-service-list .line-separator {\n display: none;\n }\n }\n\n @media(max-width: 890px) {\n .signaturePlan-container {\n width: 600px;\n }\n\n .description-signaturePlan,\n .title-signaturePlan {\n width: 350px;\n }\n\n .button-pay,\n .button-pay-disabled {\n padding: 15px 150px;\n }\n }\n\n @media(max-width: 630px) {\n .signaturePlan-container {\n width: 500px;\n }\n\n .description-signaturePlan,\n .title-signaturePlan {\n width: 270px;\n }\n\n .button-pay,\n .button-pay-disabled {\n padding: 15px 130px;\n margin-top: 5px;\n }\n }\n\n @media(max-width: 520px) {\n .signaturePlan-container {\n width: 400px;\n }\n\n .signaturePlan-image {\n width: 80px;\n height: 80px;\n }\n\n .title-signaturePlan {\n font-size: 1rem;\n }\n\n .description-signaturePlan {\n font-size: 0.9rem;\n }\n\n .description-signaturePlan,\n .title-signaturePlan {\n width: 200px;\n }\n\n .button-more {\n font-size: 0.9rem;\n }\n\n .price-signaturePlan {\n font-size: 0.9rem;\n }\n\n .button-pay,\n .button-pay-disabled {\n padding: 15px 130px;\n margin-top: 5px;\n }\n }\n\n @media(max-width: 450px) {\n .button-pay,\n .button-pay-disabled {\n padding: 15px 100px;\n margin-top: 5px;\n font-size: 1rem;\n }\n }\n\n @media(max-width: 425px) {\n .signaturePlan-container {\n width: 350px;\n }\n\n .title-signaturePlan {\n font-size: 0.9rem;\n }\n\n .description-signaturePlan {\n font-size: 0.75rem;\n }\n\n .description-signaturePlan,\n .title-signaturePlan {\n width: 150px;\n }\n\n .button-more {\n font-size: 0.85rem;\n margin-top: 10px;\n }\n\n .price-signaturePlan {\n font-size: 0.9rem;\n padding: 3px 8px;\n }\n }\n\n @media(max-width: 375px) {\n .signaturePlan-container {\n width: 300px;\n padding: 5px;\n }\n\n .description-signaturePlan,\n .title-signaturePlan {\n width: 110px;\n }\n }\n`;","import React, { useState } from 'react';\nimport PaymentView from '../../ServiceOrder/components/PaymentView';\nimport { formatCurrencyBRL } from '../../../utils/utils';\nimport ServiceBanner from '../../ServiceOrder/components/ServiceBanner';\nimport { toast } from 'react-toastify';\nimport { useHistory } from 'react-router-dom';\nimport { Container } from './styles';\nimport Header from '../../../components/Header';\nimport LoaderSpinner from '../../../components/LoaderSpinner';\nimport ModalMoreInformation from '../../../components/Modals/ModalMoreInformation';\nimport TabButton from '../../../components/TabButton';\nimport Footer from '../../../components/Footer';\nimport { postSignatureContract } from '../../../api/requests/orders/signature/signaturePlanApi';\n\nconst SignatureCheckout = ({ location }) => {\n const navigation = useHistory();\n const { signaturePlan } = location.state;\n const [modalVisible, setModalVisible] = useState(false);\n const [methodPayment, setMethodPayment] = useState({});\n const [loading, setLoading] = useState(false);\n\n const subscriptionPayment = async () => {\n try {\n setLoading(true);\n\n await postSignatureContract(signaturePlan.id, methodPayment.method, methodPayment.card);\n\n setLoading(false);\n\n navigation.push('/signatureCompletedOrder', { signaturePlan: signaturePlan });\n } catch (error) {\n setLoading(false);\n toast.error(error.message);\n }\n }\n\n return (\n \n \n setModalVisible(val)}\n title={signaturePlan?.name}\n body={signaturePlan?.description}\n />\n\n \n
\n
\n\n
\n
\n\n
\n {signaturePlan.name} \n {signaturePlan.description} \n\n setModalVisible(true)}\n className=\"button-more\"\n >\n + informações \n \n
\n\n
\n R$ {formatCurrencyBRL(signaturePlan.price).substring(2)} \n
\n
\n\n
\n\n
PAGAMENTO \n\n
\n\n
\n concluir compra \n \n \n\n
\n
\n );\n}\n\nexport default SignatureCheckout;","import styled from 'styled-components';\nimport imgSrc from '../../../assets/images/bg-complete-order-light.jpg';\n\nexport const Container = styled.div`\n .background-body {\n background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${imgSrc});\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n .container-all-right {\n margin-bottom: 40px;\n }\n\n .all-right {\n display: flex;\n background-color: #50B041;\n width: 90px;\n height: 90px;\n border-radius: 60px;\n align-items: center;\n justify-content: center;\n margin: 78px auto 20px;\n }\n\n .text-all-right {\n text-align: center;\n color: #fff;\n font-size: 1.2rem;\n font-weight: 700;\n text-align: center;\n }\n\n .message {\n width: 100%;\n font-size: 1.3rem;\n padding: 0 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-bottom: 40px;\n }\n\n .message-now {\n background: #14213d;\n border-radius: 20px;\n padding: 20px 0;\n width: 500px;\n text-align: center;\n font-size: 1.1rem;\n }\n\n .body-message {\n display: flex;\n align-items: center;\n background-color: #fff;\n color: #14213D;\n margin: 15px 0;\n border-radius: 20px;\n width: 800px;\n height: 100px;\n }\n\n .id-message {\n background-color: #14213D;\n color: #fff;\n height: 100px;\n padding: 0 20px;\n border-radius: 19px 0 0 19px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 15px;\n font-weight: 700;\n font-size: 1.2rem;\n }\n\n .message-text {\n display: flex;\n align-items: center;\n }\n\n .text {\n font-size: 1rem;\n margin-left: 10px;\n }\n\n .container-messages {\n margin: 20px 0 100px;\n }\n\n @media(max-width: 840px) {\n .message-now {\n width: 400px;\n }\n \n .body-message {\n width: 600px;\n }\n }\n\n @media(max-width: 640px) {\n .all-right {\n width: 80px;\n height: 80px;\n margin-top: 50px;\n }\n\n .all-right svg {\n width: 40px;\n }\n\n .message {\n font-size: 1.1rem;\n }\n \n .message-now {\n width: 300px;\n padding: 15px 0;\n }\n \n .body-message {\n width: 500px;\n height: 90px;\n }\n\n .id-message {\n height: 90px;\n }\n\n .text {\n font-size: 0.9rem;\n }\n }\n\n @media(max-width: 520px) {\n .all-right {\n width: 70px;\n height: 70px;\n margin-top: 50px;\n }\n\n .all-right svg {\n width: 40px;\n }\n\n .message {\n font-size: 1.1rem;\n }\n \n .message-now {\n width: 250px;\n padding: 10px 0;\n font-size: 1rem;\n }\n \n .body-message {\n width: 400px;\n height: 90px;\n }\n\n .id-message {\n height: 90px;\n }\n\n .text {\n font-size: 0.8rem;\n }\n\n .container-messages {\n margin: 10px 0 80px; \n }\n }\n\n @media(max-width: 405px) {\n .message {\n font-size: 1.1rem;\n }\n \n .message-now {\n width: 250px;\n padding: 10px 0;\n font-size: 1rem;\n }\n \n .body-message {\n width: 350px;\n height: 90px;\n }\n\n .id-message {\n height: 90px;\n margin-right: 5px;\n }\n\n .text {\n font-size: 0.8rem;\n margin-left: 5px;\n }\n\n .body-message svg {\n width: 30px;\n }\n }\n\n @media(max-width: 360px) {\n .message {\n font-size: 1.1rem;\n }\n \n .message-now {\n width: 250px;\n padding: 10px 0;\n font-size: 1rem;\n }\n \n .body-message {\n width: 300px;\n height: 90px;\n padding-right: 10px;\n }\n\n .id-message {\n height: 90px;\n padding: 0 12px;\n margin-right: 5px;\n }\n\n .text {\n font-size: 0.8rem;\n margin-left: 5px;\n }\n\n .body-message svg {\n width: 30px;\n }\n }\n`;","import React from 'react';\nimport { FiCheck, FiDollarSign, FiMail } from 'react-icons/fi';\nimport { Container } from './styles';\nimport Header from '../../../components/Header';\nimport TabButton from '../../../components/TabButton';\n\nconst SignatureCompletedOrder = () => {\n return (\n \n \n\n \n
\n
\n
\n\n
Tudo certo :) \n
\n\n
Sua compra foi concluída \n\n
\n E AGORA? \n
\n\n
\n
\n
\n 1 \n
\n
\n Acabamos de enviar um recibo da compra para seu email. \n
\n
\n\n
\n
\n 2 \n
\n
\n Se você usou cartão de crédito, sua assinatura já está disponível. Caso seja boleto aguarde até 2 dias para confirmação. \n
\n
\n
\n
\n );\n}\n\nexport default SignatureCompletedOrder;","import styled from \"styled-components\";\n\nexport const Container = styled.div`\n .footer-service-list {\n position: absolute;\n bottom: 0;\n left: 0;\n }\n\n @media (max-width: 960px) {\n .footer-service-list .line-separator {\n display: none;\n }\n\n .container-pack {\n padding-bottom: 80px;\n }\n }\n`;\n\nexport const PageContainer = styled.div`\n align-items: center;\n background-color: #fff;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n margin: auto;\n max-width: 1080px !important;\n min-height: 100vh;\n padding-bottom: 10vh;\n padding-top: 5vh;\n position: relative;\n width: 100%;\n \n`;\n\nexport const NotFound = styled.h4`\n color: #14213d;\n font-family: \"Roboto\", sans-serif;\n font-size: 1.2rem;\n font-weight: 300;\n text-align: center;\n padding: 2rem;\n`;\n\n\nexport const SubscriptionCardContainer = styled.section`\n align-items: center;\n border: 1px solid #F7F7F7;\n border-radius: 1rem;\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n padding: 1rem;\n margin: 0.1rem;\n transition: ease-in 0.3s;\n\n aside {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n\n button {\n background: none;\n color: #fa9f2a;\n text-decoration: underline;\n }\n\n span {\n text-align: center;\n color: #e63946;\n }\n }\n \n img {\n border-radius: 1rem;\n height: 6.25rem;\n width: 6.25rem;\n margin-bottom: 1.5rem;\n }\n \n article {\n display: flex;\n flex-direction: column;\n gap: 0.4rem;\n max-width: 60vw;\n padding: 0.5rem 1rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n \n span {\n color: #707070;\n font-size: 0.9rem;\n\n b {\n color: #14213D;\n font-weight: 700;\n font-size: 1.2rem;\n }\n }\n\n @media(min-width: 1000px){\n max-width: 40vw;\n }\n }\n\n &:hover {\n transform: scale(1.05);\n }\n\n @media(min-width: 600px){\n flex-direction: row;\n align-items: flex-start;\n\n img {\n margin-bottom: 0rem;\n }\n }\n\n`;","import React from \"react\"\nimport { SubscriptionCardContainer } from \"../styles\"\n\nconst SubscriptionCard = ({ subscription, setShowModalCancel, setSelectedCard }) => {\n const { subscription_plan } = subscription\n\n function handleCancelSubscription(item) {\n setShowModalCancel(prevState => !prevState)\n setSelectedCard(item)\n }\n\n return (\n \n \n handleCancelSubscription(subscription)}>cancelar : Renovação cancelada }\n \n \n {subscription_plan.name} Situação: {subscription.state_name} \n Valor: {subscription.amount_paid} \n Pago em: {subscription.paid_at} \n \n \n )\n}\n\nexport default SubscriptionCard\n","import React from 'react';\nimport Modal from 'react-modal';\nimport { toast } from 'react-toastify';\nimport { cancelSignaturePlan } from '../../../../../api/requests/orders/signature/signaturePlanApi';\nimport './styles.css';\n\nconst ModalCancelSubscription = ({ showModalCancel, setShowModalCancel, subscription_name, subscription_id }) => {\n \n const handleCloseModal = () => {\n setShowModalCancel(prevState => !prevState);\n }\n\n const handleCancelSubscription = async () => {\n try {\n await cancelSignaturePlan(subscription_id)\n toast.success('Cancelamento realizado com sucesso')\n } catch(error) {\n toast.error(error.message)\n } finally {\n handleCloseModal()\n }\n }\n\n return (\n \n
handleCloseModal()}\n overlayClassName=\"modal-overlay\"\n className=\"modal-content cancel-order\"\n ariaHideApp={false}\n >\n \n confirmar \n cancelamento \n
\n\n \n Confirmar cancelamento do {subscription_name}? \n A assinatura poderá ser utilizada até a data de validade e não será renovada. \n
\n\n \n handleCancelSubscription()}>\n sim, confirmar \n \n handleCloseModal(false)}>\n não \n \n
\n \n \n \n {!subscriptions.length ? (\n \n Nenhuma assinatura encontrada!\n \n ) : (\n subscriptions?.map((subscription) => (\n \n \n );\n};\n\nexport default Subscriptions;\n","import Bowser from 'bowser'\n\nconst validBrowserVersions = {\n firefox: '>25.0',\n edge: '>15.0',\n chrome: '>45.0',\n safari: '>7.1',\n opera: '>32.0'\n}\n\nconst validMobileBrowserVersions = {\n firefox: '>95.0',\n edge: '>15.0',\n chrome: '>96.0',\n safari: '>15.1',\n opera: '>64.0'\n}\n\nfunction browserDetect(setIsValidBrowser) {\n const browser = Bowser.getParser(window.navigator.userAgent)\n\n if (browser.getPlatform().type === 'desktop') {\n setIsValidBrowser(browser.satisfies(validBrowserVersions))\n\n } else if (browser.getPlatform().type === 'mobile' || 'tablet') {\n setIsValidBrowser(browser.satisfies(validMobileBrowserVersions))\n\n } else {\n setIsValidBrowser(false)\n }\n}\n\nexport default browserDetect;","import styled from 'styled-components';\n\nexport const Container = styled.aside`\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n padding: 2rem;\n\n img{\n width: 8rem;\n }\n\n`;\n\nexport const DescriptionCard = styled.h2`\n color: #717171;\n margin-top: 5rem;\n width: 55%;\n\n @media(max-width: 800px) {\n width: 100%;\n }\n`;","import React from 'react';\nimport { Container, DescriptionCard } from './styles';\nimport logo from '../../../assets/Logo.svg';\n\nconst BrowserDetectCard = () => {\n\n return (\n \n Olá! Por favor, atualize o seu navegador para a versão mais recente para ter uma melhor experiência em nosso site. \n \n );\n}\n\nexport default BrowserDetectCard;","import { getSectionsCatchErrors } from \"../getSectionsCatchErrors\";\nimport { fetchWithTimeout, header } from \"./request\";\n\nexport const validatePostResponse = async (postUrl, errorMessage, body) => {\n const { post_bearer } = header(body);\n let isValidation = false;\n try {\n const response = await fetchWithTimeout(`${postUrl}`, post_bearer);\n\n if (response.status === 400) {\n const responseJson = response.data;\n\n isValidation = true;\n\n throw new Error(responseJson.message);\n } else {\n if (response.status !== 200) {\n const data = response.data;\n throw new Error(data.message + \" \" + response.status);\n }\n }\n\n return response.data;\n\n } catch (error) {\n if (isValidation) throw error;\n getSectionsCatchErrors(error, errorMessage);\n }\n};\n\nexport const validatePostResponseBasic = async (postUrl, errorMessage, body) => {\n const { post } = header(body);\n let isValidation = false;\n try {\n const response = await fetchWithTimeout(`${postUrl}`, post);\n\n if (response.status === 400) {\n const responseJson = response.data;\n\n isValidation = true;\n\n throw new Error(responseJson.message);\n } else {\n if (response.status !== 200) {\n const data = response.data;\n throw new Error(data.message + \" \" + response.status);\n }\n }\n\n return response.data;\n\n } catch (error) {\n if (isValidation) throw error;\n getSectionsCatchErrors(error, errorMessage);\n }\n};","import { API_BASE, API_VERSION, CUSTOMERS, ONE_USE_TOKENS, ORDERS } from \"./helper/api_urls\";\nimport { validateGetResponseBasic } from './helper/validateGetResponse';\nimport { validatePostResponseBasic } from \"./helper/validatePostResponse\";\n\nconst getOneUseTokenOrder = async (token, email) => {\n const getUrl = `${API_BASE}${API_VERSION}${CUSTOMERS}${ONE_USE_TOKENS}/${token}?email=${email}`;\n\n return await validateGetResponseBasic(\n getUrl,\n 'Erro ao consultar os dados do pedido',\n );\n};\n\nconst postOneUseTokenOrder = async (data) => {\n const postUrl = `${API_BASE}${API_VERSION}${CUSTOMERS}${ORDERS}/${data.orderType}`;\n const body = {\n hour_begin: data.hourBegin,\n job_day_id: data.jobDayId,\n payment_method: data.paymentMethod,\n service_id: data.serviceId,\n one_use_token: data.token\n };\n\n return await validatePostResponseBasic(\n postUrl,\n 'Erro ao realizar criação do pedido',\n body\n );\n}\n\nexport {\n getOneUseTokenOrder,\n postOneUseTokenOrder\n};\n\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n z-index: 5;\n width: 100vw;\n border: 1px solid #d9d9d9;\n \n .header {\n background-color: #f7f7f7;\n box-shadow: inset 0 -1px 0 #dcdcdc;\n z-index: 5;\n }\n\n .title-tag {\n display: none;\n position: absolute;\n top: 40px;\n left: -12px;\n background: #f9f9f9;\n border: 1px solid #d9d9d9;\n border-radius: 10px;\n padding: 0 12px;\n height: 30px;\n align-items: center;\n justify-content: center;\n z-index: 5;\n }\n\n`;\n\nexport const HeaderContainer = styled.header`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 20px 0;\n width: 100%;\n max-width: 1080px !important;\n margin: auto;\n \n .logo > img {\n width: 30px;\n }\n\n .enter {\n position: relative;\n background: none;\n }\n\n .enter > svg {\n stroke: #FA9F2A;\n }\n\n .enter:hover > .title-tag {\n display: flex;\n }\n\n .title-tag > span {\n font-size: 12px;\n color: #14213D;\n }\n\n @media(max-width: 970px) {\n .logo {\n margin: 0 20px;\n }\n \n .enter {\n position: relative;\n background: none;\n margin-right: 40px;\n }\n }\n`;","import React, { useEffect } from \"react\";\nimport { FiLogIn } from \"react-icons/fi\";\nimport { Link } from \"react-router-dom\";\nimport Logo from \"../../assets/Logo.svg\";\nimport {\n Container,\n HeaderContainer\n} from \"./styles\";\n\n\nconst HeaderSimple = () => {\n\n useEffect(() => {\n const header = document.getElementById(\"header\");\n const sticky = header.offsetTop;\n const scrollCallBack = window.addEventListener(\"scroll\", () => {\n if (window.pageYOffset > sticky) {\n header.classList.add(\"sticky\");\n } else {\n header.classList.remove(\"sticky\");\n }\n });\n\n return () => {\n window.removeEventListener(\"scroll\", scrollCallBack);\n };\n }, []);\n\n return (\n \n \n \n );\n};\n\nexport default HeaderSimple;\n","import styled from \"styled-components\";\nimport imgSrc from \"../../../../assets/images/bg-complete-order-light.jpg\";\n\nexport const BackgroundImage = styled.div`\n .background-body {\n background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${imgSrc});\n background-repeat: no-repeat;\n background-size: cover;\n background-position: center;\n }\n\n .yellow-clock-view {\n display: flex;\n background-color: #ffff00;\n width: 90px;\n height: 90px;\n border-radius: 60px;\n align-items: center;\n justify-content: center;\n margin: 78px auto 30px;\n }\n\n .green-check-view {\n display: flex;\n background-color: #50B041;\n width: 90px;\n height: 90px;\n border-radius: 60px;\n align-items: center;\n justify-content: center;\n margin: 78px auto 30px;\n }\n\n .text-pix {\n text-align: center;\n color: #fff;\n font-size: 1.2rem;\n font-weight: 700;\n }\n\n .text-message {\n width: 100%;\n padding: 0 20px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .text-ok {\n text-align: center;\n color: #fff;\n font-size: 1.2rem;\n font-weight: 700;\n text-align: center;\n }\n\n .info-tags {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n }\n\n .one-click-banner,\n .one-two-banner {\n display: flex;\n align-items: center;\n background-color: #fff;\n width: 550px;\n border-radius: 20px;\n margin-bottom: 10px;\n justify-content: flex-start;\n height: 100px;\n }\n\n .icon-one-click,\n .one-two-number-text {\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #14213D;\n font-size: 1.2rem;\n height: 100px;\n padding: 0 25px;\n border-radius: 19px 0 0 19px;\n font-weight: 700;\n }\n\n .icon-one-click {\n background-color: #FA9F2A;\n padding: 0 15px;\n }\n\n .mail-clock-view {\n display: flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n margin: 0 10px;\n }\n\n .info-one-two-text {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .one-two-text {\n font-size: 1rem;\n margin: 0 15px;\n color: #707070;\n padding-right: 10px;\n text-align: left;\n }\n\n .avaliable-now {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 60px 0;\n }\n\n .qr-code {\n margin: 20px 0 0;\n background-color: #FFF;\n width: 550px;\n border-radius: 18px;\n display: flex;\n justify-content: center;\n padding: 20px 0;\n align-self: center;\n align-items: center;\n }\n\n @media(max-width: 960px) {\n .background-body {\n padding-bottom: 60px;\n }\n }\n\n @media(max-width: 900px) {\n .green-check-view,\n .yellow-clock-view {\n width: 70px;\n height: 70px;\n }\n\n .green-check-view > svg,\n .yellow-clock-view > svg {\n width: 40px;\n }\n\n .text-ok,\n .text-pix {\n font-size: 1.1rem;\n }\n\n .pix-code-view {\n width: 450px;\n height: 50px;\n }\n\n .qr-code {\n width: 450px;\n }\n\n .copy-text,\n .pix-code-text {\n font-size: 1rem;\n }\n\n .one-click-banner,\n .one-two-banner {\n width: 450px;\n }\n }\n\n @media(max-width: 490px) {\n .green-check-view,\n .yellow-clock-view {\n width: 60px;\n height: 60px;\n }\n\n .green-check-view > svg,\n .yellow-clock-view > svg {\n width: 40px;\n }\n\n .text-ok,\n .text-pix {\n font-size: 1rem;\n }\n\n .pix-code-view {\n width: 350px;\n height: 50px;\n }\n\n .qr-code {\n width: 350px;\n }\n\n .one-click-banner,\n .one-two-banner {\n width: 350px;\n height: 80px;\n }\n\n .icon-one-click,\n .one-two-number-text {\n height: 80px;\n padding: 0 15px;\n }\n\n .icon-one-click {\n padding: 0 4px;\n }\n\n .one-two-text {\n font-size: 0.9rem;\n margin: 0 10px;\n }\n }\n\n @media(max-width: 375px) {\n .green-check-view,\n .yellow-clock-view {\n width: 50px;\n height: 50px;\n }\n\n .green-check-view > svg,\n .yellow-clock-view > svg {\n width: 30px;\n }\n\n .text-ok,\n .text-pix {\n font-size: 0.9rem;\n }\n\n .pix-code-view {\n width: 300px;\n height: 50px;\n }\n\n .qr-code {\n width: 300px;\n }\n\n .one-click-banner,\n .one-two-banner {\n width: 300px;\n height: 80px;\n }\n\n .one-two-text {\n font-size: 0.85rem;\n margin: 0 5px;\n }\n }\n`;\n\nexport const InfoView = styled.div`\n margin-bottom: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n .info-text {\n margin-top: 1rem;\n text-align: center;\n color: #fff;\n font-size: 1.1rem;\n width: 600px;\n }\n\n .info-text span {\n font-weight: 700;\n }\n\n @media(max-width: 900px) {\n .info-text {\n width: 450px;\n font-size: 1rem;\n }\n }\n\n @media(max-width: 490px) {\n .info-text {\n width: 350px;\n font-size: 0.95rem;\n }\n }\n\n @media(max-width: 375px) {\n .info-text {\n width: 300px;\n font-size: 0.9rem;\n }\n }\n`;\n\nexport const AndNowBanner = styled.div`\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n\n .and-now-banner {\n background: #14213d;\n border-radius: 20px;\n padding: 20px 0;\n width: 500px;\n text-align: center;\n font-size: 1.1rem;\n }\n\n @media (max-width: 900px) {\n .and-now-banner {\n width: 400px;\n padding: 15px 0;\n font-size: 1rem;\n }\n }\n\n @media(max-width: 490px) {\n .and-now-banner {\n width: 300px;\n padding: 15px 0;\n font-size: 0.9rem;\n }\n }\n\n @media(max-width: 375px) {\n .and-now-banner {\n width: 250px;\n padding: 15px 0;\n font-size: 0.85rem;\n }\n }\n`;\n","import Moment from \"moment-timezone\";\nimport React, { useEffect, useState } from 'react';\nimport { FiCalendar, FiCheck, FiClock, FiMail, FiSend } from \"react-icons/fi\";\nimport { useHistory, useLocation } from \"react-router-dom\";\nimport { toast } from 'react-toastify';\nimport { getOneUseTokenOrder, postOneUseTokenOrder } from \"../../../../api/one_use_token\";\nimport HeaderSimple from \"../../../../components/HeaderSimple\";\nimport LoaderSpinner from \"../../../../components/LoaderSpinner\";\nimport { getDayName } from '../../../../utils/utils';\nimport { AndNowBanner, BackgroundImage, InfoView } from './styles';\n\n\nfunction useQuery() {\n let { search } = useLocation();\n\n search = search.replace('%26', '&');\n\n return React.useMemo(() => new URLSearchParams(search), [search]);\n}\n\nconst OneUseTokenOrder = () => {\n\n let query = useQuery();\n const token = query.get(\"token\")\n const email = query.get(\"email\")\n const [loading, setLoading] = useState(false)\n const [orderContent, setOrderContent] = useState([])\n const [dayOfWeek, setDayOfWeek] = useState('')\n const [time, setTime] = useState('')\n const [minute, setMinute] = useState('')\n const [waitingList, setWaitingList] = useState('')\n const [attendanceLocale, setAttendanceLocale] = useState('')\n const [isOrderCreated, setIsOrderCreated] = useState(false)\n const navigation = useHistory();\n\n const doOneUseTokenOrder = async () => {\n\n try {\n setLoading(true);\n\n let getResponse = await doGetOrder()\n let postResponse = await doCreateOrder(getResponse)\n\n if (postResponse.id) {\n setAttendanceLocale(postResponse.attendance_locale)\n setIsOrderCreated(true)\n }\n\n setLoading(false)\n } catch (error) {\n toast.error(error.message)\n setLoading(false)\n navigation.push(\"/home\");\n }\n }\n\n const doGetOrder = async () => {\n const orderData = await getOneUseTokenOrder(token, email);\n setOrderContent(orderData?.content)\n doFormatOrderContent(orderData?.content)\n return orderData\n }\n\n const doCreateOrder = async (orderData) => {\n const data = {\n hourBegin: orderData?.content?.slots[0].begin_at,\n jobDayId: orderData?.content?.job_day_id,\n paymentMethod: \"cash\",\n serviceId: orderData?.content?.service_offer?.service_id,\n token: orderData?.token,\n orderType: orderData?.content?.service_offer?.order_type\n }\n const response = await postOneUseTokenOrder(data)\n\n return response\n }\n\n const doFormatOrderContent = (orderContent) => {\n setTime(Moment(orderContent.slots[0].begin_at).tz(\"America/Sao_Paulo\").format(\"HH\"));\n setMinute(Moment(orderContent.slots[0].begin_at).tz(\"America/Sao_Paulo\").format(\"mm\"));\n setDayOfWeek(getDayName(orderContent.slots[0].begin_at));\n setWaitingList(time === \"00\" && minute === \"00\");\n }\n\n useEffect(() => {\n doOneUseTokenOrder()\n }, [])\n\n\n return (\n\n <>\n \n \n
\n
\n
\n\n
Tudo certo! \n
\n\n\n\n {(\"online\" === orderContent?.service_offer?.service_type) && (\n
\n
\n \n Sua solicitação para participar da {orderContent?.service_offer?.title} foi confirmada para {dayOfWeek} {Moment(orderContent?.slots[0].begin_at).tz(\"America/Sao_Paulo\").format(\" DD/MM\")}\n\n {!waitingList &&\n \n {' '} às {Moment(orderContent?.slots[0].begin_at).tz(\"America/Sao_Paulo\").format(\"HH:mm\")}.\n \n }\n\n {waitingList &&\n para a lista de encaixe. \n }\n\n \n \n\n
\n \n Olha como é fácil acessar seu serviço: \n
\n \n\n
\n
1 \n\n
\n
\n
\n
\n Geramos um link para sua sessão.\n \n
\n\n
\n\n
\n
2 \n\n
\n
\n
\n
\n Esse link já está disponível no seu email, calendário e no seu app POSHER\n \n
\n\n
\n\n
\n
3 \n
\n
\n
\n No horário da sessão, clique no link em um desses locais e boa sessão!\n \n
\n
\n )}\n\n {(\"presential\" === orderContent?.service_offer?.service_type || \"both\" === orderContent?.service_offer?.service_type) && (\n
\n
\n \n Seu pedido de {orderContent?.service_offer?.title} foi confirmado para {dayOfWeek} {Moment(orderContent?.slots[0].begin_at).tz(\"America/Sao_Paulo\").format(\" DD/MM\")} \n\n {!waitingList && (\n às {Moment(orderContent?.slots[0].begin_at).tz(\"America/Sao_Paulo\").format(\"HH:mm\")}. \n )}\n\n {waitingList && (\n para a lista de encaixe. \n )}\n\n \n \n\n\n\n
\n \n E AGORA? \n
\n \n\n
\n
1 \n
\n
\n
\n\n
\n Enviamos todas as informações do agendamento para seu email.\n \n
\n\n
\n\n
\n
2 \n
\n
\n
\n\n
\n No horário combinado se dirija ao local do serviço {attendanceLocale}. O profissional estará te aguardando\n \n
\n
\n\n
\n )}\n
\n }\n \n )\n}\n\nexport default OneUseTokenOrder","import { API_BASE, API_VERSION, CONFIRM, PRIZE_CAMPAIGNS, RAFFLE } from \"./helper/api_urls\";\nimport { validateGetResponseBasic } from \"./helper/validateGetResponse\";\nimport { validatePutResponseBasic } from \"./helper/validatePutResponse\";\n\n\nconst getScratchPrize = async (campaignId, customerCpf) => {\n try {\n const getUrl = `${API_BASE}${API_VERSION}${PRIZE_CAMPAIGNS}/${campaignId}${RAFFLE}?customer_cpf=${customerCpf}`\n return await validateGetResponseBasic(\n getUrl,\n \"Erro ao consultar prêmio\"\n )\n } catch (error) {\n throw error\n }\n}\n\nconst confirmScratchPrize = async (campaignId, itemId, customerCpf) => {\n try {\n const putUrl = `${API_BASE}${API_VERSION}${PRIZE_CAMPAIGNS}/${campaignId}/${itemId}${CONFIRM}?customer_cpf=${customerCpf}`\n return await validatePutResponseBasic(\n putUrl,\n \"Erro ao confirmar prêmio\"\n )\n } catch (error) {\n throw error\n }\n}\n\nexport {\n getScratchPrize,\n confirmScratchPrize\n};\n","export default __webpack_public_path__ + \"static/media/Logo-Posher-Prize.0a49e59e.png\";","import styled from \"styled-components\";\nimport { COLORS } from \"../../utils/colors\";\n\ndocument.body.style.backgroundColor = \"#F4F0F4\"; \n\nexport const Container = styled.aside`\n height: 80vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n background-color: ${COLORS.background};\n color: #14213D;\n font-family: 'Roboto';\n font-weight: 'normal';\n font-size: 13;\n flex-direction: column;\n gap: 1rem;\n\n .text-title {\n color: #14213D;\n font-size: 1.4rem;\n font-weight: 700;\n display: flex;\n justify-content: center;\n bottom: 10px;\n text-align: center;\n margin-bottom: 30px;\n }\n\n .text-info {\n color: #14213D;\n font-size: 1.2rem;\n display: flex;\n justify-content: center;\n width: 700px;\n text-align: center;\n align-self: center;\n margin-bottom: 30px;\n }\n\n @media (max-width: 700px) {\n .text-info {\n left: 203px;\n width: 300px;\n }\n\n .text-title {\n left: 3px\n }\n }\n`\n\nexport const Input = styled.div`\n margin: 20px 0;\n position: relative;\n width: 600px;\n align-items: center;\n\n input {\n width: 600px;\n padding: 5px 50px;\n text-align: center;\n background-color: #FFF;\n border: 1px solid #CFCFCF;\n border-radius: 20px;\n height: 50px;\n font-size: 1rem;\n color: #707070;\n }\n\n @media (max-width: 700px) {\n input {\n position: relative;\n width: 300px;\n left: 150px;\n }\n }\n`\n\nexport const Button = styled.div`\n .button-disabled,\n .button-actived {\n background-color: #FA9F2A;\n width: 450px;\n padding: 15px 0;\n font-size: 1rem;\n margin-bottom: 10px;\n align-items: center;\n border-radius: 20px;\n box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);\n }\n\n .button-disabled {\n background-color: #707070;\n }\n\n @media (max-width: 700px) {\n .button-disabled,\n .button-actived {\n width: 300px;\n }\n }\n`\n\nexport const ScratchCardContainer = styled.div`\n display: flex;\n flex-direction: column;\n\n .image-container {\n cursor: pointer;\n align-self: center;\n\n canvas {\n border: solid;\n border-width: 3px;\n border-radius: 20px;\n border-color: #FA9F2A;\n }\n \n\n @media (max-width: 700px) {\n left: 155px;\n }\n\n @media (max-width: 400px) {\n left: 195px;\n }\n }\n\n .text-container {\n position: relative;\n width: 430px;\n height: 180px;\n top: 40px;\n left: 147px;\n font-size: 2rem;\n vertical-align: middle;\n align-items: center;\n text-align: center;\n display: table-cell;\n overflow: hidden;\n\n span {\n width: 100%;\n overflow: hidden;\n }\n \n @media (max-width: 700px) {\n left: 5px;\n top: 15px;\n }\n \n @media (max-width: 400px) {\n left: 5px;\n top: -5px;\n }\n }\n`","import React, { useEffect, useState } from 'react';\nimport { Helmet } from \"react-helmet\";\nimport InputMask from 'react-input-mask';\nimport { Dimensions } from 'react-native';\nimport { useHistory, useLocation } from 'react-router-dom';\nimport ScratchCardComponent from 'react-scratchcard';\nimport { toast } from 'react-toastify';\nimport { confirmScratchPrize, getScratchPrize } from '../../api/prizes';\nimport logo from \"../../assets/Logo-Posher-Prize.png\";\nimport HeaderSimple from '../../components/HeaderSimple';\nimport LoaderSpinner from '../../components/LoaderSpinner';\nimport { Button, Container, Input, ScratchCardContainer } from \"./styles\";\n\nconst ScratchCard = () => {\n let query = useQuery();\n const campaignId = query.get(\"campaign_id\");\n const [customerCpf, setCustomerCpf] = useState('');\n const [prize, setPrize] = useState('');\n const [scratchMore, setScratchMore] = useState(false);\n const [scratchComplete, setScratchComplete] = useState(false);\n const [loading, setLoading] = useState(false);\n\n const navigation = useHistory()\n\n function useQuery() {\n let { search } = useLocation();\n\n search = search.replace('%26', '&');\n\n return React.useMemo(() => new URLSearchParams(search), [search]);\n }\n\n const screenWidth = Dimensions.get(\"screen\").width;\n const width = screenWidth > 700 ? 720 : screenWidth > 400 ? 380 : 300\n const height = screenWidth > 700 ? width / 2.4 : screenWidth > 400 ? width / 2.4 : 150;\n\n\n const settings = {\n width: width,\n height: height,\n image: logo,\n finishPercent: 60,\n onComplete: () => confirmPrize()\n };\n\n const getPrize = async () => {\n setLoading(true)\n try {\n const response = await getScratchPrize(campaignId, customerCpf)\n setPrize(response)\n } catch (error) {\n toast.error(error.message)\n setCustomerCpf('')\n }\n setLoading(false)\n }\n\n const confirmPrize = async () => {\n setLoading(true)\n try {\n await confirmScratchPrize(campaignId, prize.id, customerCpf)\n toast.success(\"Prêmio resgatado com sucesso!\")\n } catch (error) {\n toast.error(error.message)\n }\n setScratchComplete(true)\n setLoading(false)\n }\n\n useEffect(() => {\n if (scratchMore) {\n setTimeout(() => {\n setScratchMore(!scratchMore)\n }, 2000)\n }\n }, [scratchMore])\n\n useEffect(() => {\n if (prize) {\n var canvas = document.getElementsByClassName(\"ScratchCard__Canvas\")[0];\n\n var ctx = canvas.getContext(\"2d\");\n var img = new Image();\n img.onload = function () {\n ctx.globalCompositeOperation = \"xor\"\n ctx.drawImage(img, 0, 0);\n ctx.globalCompositeOperation = \"and\"\n ctx.drawImage(img, 0, 0, width, height);\n };\n img.src = logo;\n }\n }, [prize])\n\n useEffect(() => {\n if (!campaignId) {\n navigation.push('/home')\n }\n }, [])\n\n return (\n \n
\n \n
\n
\n
\n {prize ?\n \n {prize.campaign_name} \n {!scratchComplete &&\n \n Pressione e arraste o {screenWidth > 700 ? \"o mouse\" : \"o dedo na tela\"} para raspar a imagem abaixo até poder visualizar seu prêmio!\n \n }\n {(scratchMore && !scratchComplete) &&\n \n continue raspando\n \n }\n {scratchComplete &&\n Parabéns {prize.customer_name}, você ganhou: \n }\n { setScratchMore(true) }} className=\"image-container\">\n
\n {!prize.image_url &&\n \n
\n \n {prize.name}\n \n
\n
\n
\n
\n
\n
\n
\n :\n <>\n \n Digite seu CPF\n \n setCustomerCpf(e.target.value)}\n />\n \n \n \n confirmar \n \n \n \n\n }\n \n
\r\n isAuthenticated() ? (\r\n \r\n // \r\n // )\r\n // }\r\n\r\n return (\r\n \r\n {!isValidBrowser && \r\n {user || userRef.current === true || logged ? (\r\n \r\n {user || userRef.current === true || logged ? (\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? (\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? (\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? (\r\n \r\n\r\n {/* \r\n {user || userRef.current === true || logged ? (\r\n */}\r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n {/* Schedule */}\r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n {/* 🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒 Time Clock 🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒🕒 */}\r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n {/* */}\r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n {user || userRef.current === true || logged ? undefined : undefined}\r\n \r\n\r\n \r\n );\r\n}\r\n","export const isAuthenticated = () => {\r\n const userIsLogged = localStorage.getItem(\"posher_logged_user\");\r\n\r\n if (userIsLogged && !!userIsLogged) {\r\n return true;\r\n }\r\n\r\n return false;\r\n};\r\n\r\nexport const hasParams = (location) => {\r\n if (location && location.state) {\r\n return true;\r\n }\r\n\r\n return false;\r\n};\r\n","import React from 'react';\r\nimport CookieConsent from \"react-cookie-consent\";\r\n\r\nconst AcceptCookies = () => {\r\n\r\n return (\r\n \r\n Este site utiliza cookies para uma melhor experiência.{\" \"}\r\n Política de privacidade \r\n \r\n );\r\n}\r\n\r\nexport default AcceptCookies;","import React, { useEffect, useState } from 'react';\r\nimport { GlobalStyle } from './styles/global';\r\nimport { onSignIn, onSignOut, refreshUUID } from './utils/auth';\r\nimport { refreshToken } from './api/login';\r\nimport { getTermsConditions } from './api/customer';\r\nimport { ContextProvider } from './hooks/context';\r\nimport \"@brainhubeu/react-carousel/lib/style.css\";\r\nimport * as Sentry from '@sentry/react';\r\n\r\nimport { BrowserRouter } from 'react-router-dom';\r\nimport { toast, ToastContainer } from 'react-toastify';\r\nimport { Routes } from './routes';\r\n\r\nimport AcceptCookies from './components/AceptCookies';\r\n\r\nimport Modal from 'react-modal';\r\n\r\nModal.setAppElement(\"#root\");\r\n\r\nexport function App() {\r\n const [state, setState] = useState({ checkedSignIn: false, signedIn: false });\r\n\r\n const logout = async () => {\r\n onSignOut();\r\n }\r\n\r\n Sentry.init({\r\n dsn: 'https://9212c9bff4a44ce9a3b615fcb85dc5b3@o325506.ingest.sentry.io/5725947',\r\n autoSessionTracking: true,\r\n environment: process.env.REACT_APP_CUSTOMER_WEB_ENVIRONMENT\r\n });\r\n\r\n const doRefreshToken = async () => {\r\n try {\r\n let data = await refreshToken();\r\n\r\n if (data.success) {\r\n onSignIn(data.user);\r\n\r\n await getTermsConditions(doVerifyTermsAcceptance);\r\n\r\n if (data.user.customer.invalid_email) {\r\n sessionStorage.setItem('invalid_email', true);\r\n }\r\n\r\n } else {\r\n logout();\r\n }\r\n\r\n } catch (error) {\r\n toast.error(error.message)\r\n }\r\n }\r\n\r\n const doVerifyTermsAcceptance = async (terms) => {\r\n if (!terms.acceptance_token) {\r\n logout();\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n const res = localStorage.getItem('posher_logged_user');\r\n if (res !== null) {\r\n onSignIn(JSON.parse(res));\r\n }\r\n setState({ checkedSignIn: true, signedIn: res !== null });\r\n }, []); \r\n\r\n\r\n if (state.checkedSignIn) {\r\n refreshUUID();\r\n\r\n if (state.signedIn) {\r\n doRefreshToken();\r\n }\r\n\r\n return (\r\n\r\n \r\n \r\n \r\n \r\n );\r\n } else {\r\n return null;\r\n }\r\n}\r\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import { AppRegistry } from \"react-native\";\r\nimport { App } from './App';\r\nimport reportWebVitals from './reportWebVitals';\r\nimport './i18n';\r\n\r\n// ReactDOM.render(\r\n// \r\n// ,\r\n// document.getElementById('root')\r\n// );\r\n\r\nAppRegistry.registerComponent(\"App\", () => App);\r\n\r\nAppRegistry.runApplication(\"App\", {\r\n initialProps: {},\r\n rootTag: document.getElementById(\"root\")\r\n});\r\n\r\n\r\n// If you want to start measuring performance in your app, pass a function\r\n// to log results (for example: reportWebVitals(console.log))\r\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\r\nreportWebVitals();\r\n"],"sourceRoot":""}