\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tsetOpenModalImage(false)\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{image({}, true)}\r\n\t\t\t\t\t \r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\r\n\r\n\t) : (\r\n\t\t\r\n {actions.map((actionsMappedItem, index) => {\r\n const {\r\n label,\r\n handleClick,\r\n classes\r\n } = actionsMappedItem\r\n\r\n const key = `modal-item-${index}-${new Date().getTime()}`\r\n\r\n return \r\n })}\r\n
: null}\r\n { title }
\r\n}\r\n","import styled from 'styled-components'\r\n\r\nimport { DefaultButton, DefaultInput, DefaultSpan } from '../../components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n padding: 1rem;\r\n box-sizing: border-box;\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > .close-button {\r\n flex: 1;\r\n align-self: flex-end;\r\n margin-bottom: 1.25rem;\r\n font-weight: bold;\r\n position: absolute;\r\n right: -.65rem;\r\n\t\ttop: -1.75rem;\r\n\t\tleft: auto;\r\n\t\tcursor: pointer;\r\n\r\n\t\t.custom-icon svg {\r\n\t\t\theight: 1.25rem;\r\n \twidth: 1.25rem;\r\n\r\n\t\t\tpath {\r\n\t\t\t\tfill: #fff;\r\n\t\t\t\topacity: .6;\r\n\t\t\t}\r\n\t\t}\r\n }\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tpadding: 2rem;\r\n\t}\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n opacity: 1;\r\n transition: all .25s ease-in;\r\n font-size: .875rem;\r\n\tmin-width: 17rem;\r\n\tmax-width: 17rem;\r\n\tflex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-height: 100%;\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n\r\n\t> h3 {\r\n\t\tmax-width: 100%;\r\n\t\tmin-width: 100%;\r\n\t\tpadding-right: 0;\r\n text-align: center;\r\n\t}\r\n\r\n > p {\r\n font-size: 1.125rem;\r\n margin-bottom: 2.5rem;\r\n }\r\n\r\n\t> .notification {\r\n\t\tpadding: 0;\r\n\t}\r\n\r\n @media (min-width: 23rem) {\r\n > h3 {\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n`\r\n\r\n\r\nexport const Div = styled.div`\r\n flex: 1;\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1.125rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n margin-bottom: 1rem;\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n min-height: 100%;\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const PostalWarning = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n font-size: .875rem;\r\n color: red;\r\n font-weight: bold;\r\n`\r\n\r\nexport const CEPForm = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin: 0;\r\n max-width: 100%;\r\n\tflex-direction: column;\r\n\tmin-width: 100%;\r\n\tjustify-content: center;\r\n\r\n button {\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.buttonColorPrimary) || '#000' };\r\n border: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.buttonColorSecondary) || '#000' };\r\n border-radius: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.buttonColorSecondary) || '#000' };;\r\n font-weight: 700;\r\n padding: 1rem;\r\n font-size: 1.25rem;\r\n text-align: center;\r\n cursor: pointer;\r\n max-height: 3rem;\r\n min-height: 3rem;\r\n max-width: 4rem;\r\n min-width: 4rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n :hover {\r\n opacity: .9;\r\n }\r\n }\r\n\r\n\t> .fields {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n\t\tmin-width: 100%;\r\n\t\tmax-width: 100%;\r\n\r\n\t\t> div {\r\n\t\t\tmax-width: calc(100% - 5rem);\r\n\t\t\tmin-width: calc(100% - 5rem);\r\n\t\t}\r\n\t}\r\n\r\n @media (min-width: 20rem) {\r\n > .fields {\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n }\r\n }\r\n\r\n\t@media (min-width: 23rem) {\r\n\t\t> .notification {\r\n\t\t\t> p {\r\n\t\t\t\tfont-weight: normal;\r\n\t\t\t\tmargin-bottom: .5rem;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t> .fields {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: row;\r\n\t\t\tmin-width: 100%;\r\n\t\t\talign-items: flex-start;\r\n\r\n > div {\r\n max-width: unset;\r\n }\r\n\r\n\t\t\t> * {\r\n\t\t\t\tflex: 1;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\t> .fields {\r\n\t\t\t> div {\r\n\t\t\t\tmax-width: unset;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const PostalCodeInputContainer = styled.div`\r\n position: relative;\r\n margin: 0 0 1rem 0;\r\n flex: 1;\r\n display: flex;\r\n\r\n span {\r\n position: absolute;\r\n left: 1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n height: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n font-size: 1rem;\r\n padding: 0 1rem 0 0;\r\n border-right: .0625rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000' };\r\n font-weight: 600;\r\n }\r\n\r\n input {\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#EFEFEF' };\r\n\t\tborder: .0625rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000' };\r\n height: 3rem;\r\n border-radius: .7rem;\r\n max-width: 100%;\r\n\t\tmin-width: 100%;\r\n font-size: 1rem;\r\n outline: none;\r\n color: rgba(0, 0, 0, .6);\r\n padding: 0 0 0 5rem;\r\n -moz-appearance: textfield;\r\n box-sizing: border-box;\r\n\t\ttransition: all .2s ease-in;\r\n\r\n ::-webkit-outer-spin-button,\r\n ::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n ::placeholder {\r\n opacity: .3;\r\n }\r\n\r\n\t\t&:focus {\r\n\t\t\toutline: 0;\r\n\t\t\tbox-shadow: 0 0 0 1px ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t\t}\r\n }\r\n\r\n @media (min-width: 20rem) {\r\n margin: 0 1rem 1rem 0;\r\n }\r\n\r\n @media (min-width: 23rem) {\r\n\t\tmargin: 0 1rem 0 0;\r\n min-width: 16rem;\r\n }\r\n`\r\n\r\nexport const Span = styled(DefaultSpan)``\r\n\r\nexport const Button = styled(DefaultButton)``\r\n\r\nexport const Input = styled(DefaultInput)``\r\n\r\nexport const CloseButton = styled.button`\r\n background: none;\r\n border: 0 none;\r\n font-size: 1.125rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n`\r\nexport const Paragraph = styled.div`\r\n font-size: 14px;\r\n text-align: center;\r\n font-weight: bold;\r\n color: ${(props) => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || \"#000\"};\r\n margin: 1rem 0;\r\n`\r\n","import React, {\r\n\tuseState,\r\n\tuseCallback,\r\n\tuseEffect\r\n} from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { setNotification } from '../../../redux/actions/main'\r\nimport { GetContent, pipe } from '../../../domain/helpers'\r\nimport { addressActions } from '../../../state'\r\nimport { CustomIcon, CustomLoading } from '../../components'\r\nimport {\r\n\tButton,\r\n\tCEPForm,\r\n\tCloseButton,\r\n\tContentWrapper,\r\n\tH3,\r\n\tInput,\r\n\tLoadingWrapper,\r\n\tPostalCodeInputContainer,\r\n\tPostalWarning,\r\n\tSpan,\r\n\tWrapper,\r\n\tParagraph\r\n} from './styles'\r\nimport { ALTERNATIVE_STYLE_MULTI_STORE, MULTI_STORE } from '../../../config'\r\n\r\nconst Context = React.createContext({})\r\n\r\nexport function PostalCodeInput({\r\n\tlabel,\r\n\tvalue = '',\r\n\tonChange\r\n}) {\r\n\treturn\r\n\t\t\t{warningPostalCode && warningPostalCode.type === 'warning' && O CEP digitado é inválido! }\r\n\t\t\t{errorPostalCode && errorPostalCode.type === 'error' && Tente outro endereço ou volte para o cardápio! }\r\n\t\t
\r\n\t\t\r\n\t\t\t
\r\n\t{ALTERNATIVE_STYLE_MULTI_STORE === \"true\" ? `Informe seu CEP, por favor` : title ? title : `Onde deseja receber seu pedido?`}
\r\n\r\n\t\t\t{MULTI_STORE === \"true\" && ALTERNATIVE_STYLE_MULTI_STORE === \"true\" &&\r\n\t\t\t\t\r\n\t\t\t{warningPostalCode && warningPostalCode.type === 'warning' && O CEP digitado é inválido! }\r\n\t\t\t{errorPostalCode && errorPostalCode.type === 'error' && Tente outro endereço ou volte para o cardápio! }\r\n\t\t
\r\n\t\t\r\n\t\t\t {\r\n\t\t\t\tconst {\r\n\t\t\t\t\tvalue\r\n\t\t\t\t} = event.target\r\n\r\n\t\t\t\tsetPostalCode(value)\r\n\t\t\t}} value={postalCodeValue} />\r\n\t\t\t\r\n\t\t
\r\n\tOnde deseja receber seu pedido?
\r\n\r\n\t\t\tEndereço
\r\n\t\t\tMeus cartões
\r\n\t\t\t{!newCard && }\r\n\t\tPAGAMENTO ONLINE
\r\n\t\t\t\t\t\tVocê ainda não possui nenhum cartão cadastrado!
\r\n\r\n\t\t\t\t\t\tPAGAMENTO NA ENTREGA
\r\n\t\t\t\t\t{context && context.header && context.header.title}
\r\n\t\t {\r\n\t\t\t\t\tif (contentOverlayMotion) {\r\n\t\t\t\t\t\tsetContentOverlayMotion(false)\r\n\t\t\t\t\t\tsetCVVReady(false)\r\n\t\t\t\t\t\tsetNewPaymentReady(false)\r\n\t\t\t\t\t\tsetCard(null)\r\n\t\t\t\t\t\tsetLoading(false)\r\n\t\t\t\t\t\tsetLoaded(false)\r\n\t\t\t\t\t}\r\n\t\t\t\t}} />\r\n\r\n\t\t\t\t{CVVReady ? \r\n\t\t \r\n}\r\n\r\nCVV.propTypes = {\r\n\tcvv: PropTypes.string,\r\n\thandleCVV: PropTypes.func,\r\n\thandleNext: PropTypes.func\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tfont-family: ${props => props.theme.newFontFamily};\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tpadding-top: 1.875rem;\r\n\tflex: 1;\r\n`\r\n\r\nexport const ListWrapper = styled.ul`\r\n list-style: inside none;\r\n margin: 0;\r\n padding: 0;\r\n min-width: 100%;\r\n flex: 0;\r\n display: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n`\r\n\r\nexport const ListItemWrapper = styled.li`\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#CCC' };\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' } .063rem solid;\r\n border-radius: .625rem;\r\n margin-bottom: 1.25rem;\r\n flex: 1;\r\n min-width: 100%;\r\n display: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n &.selected {\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#CCC' } .063rem solid;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' };\r\n\r\n > button {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' };\r\n }\r\n }\r\n\r\n > button {\r\n flex: 1;\r\n min-width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n > img {\r\n margin-right: .625rem;\r\n height: 1.25rem;\r\n width: auto;\r\n }\r\n }\r\n`\r\n\r\nexport const Image = styled.img``\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n`\r\n\r\nexport const Span = styled.span``\r\n\r\nexport const Button = styled.button`\r\n background: none;\r\n border: 0;\r\n padding: .625rem;\r\n margin: 0;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#333' };\r\n font-size: 1.25rem;\r\n line-height: 1.25rem;\r\n padding: 0;\r\n margin: 0;\r\n\tmargin-bottom: 1.25rem;\r\n min-width: 100%;\r\n`\r\n","import React from 'react'\r\n\r\nimport { getCardBrandImageByPaymentTypeAndId } from '../../../infra/utils'\r\n\r\nimport {\r\n Wrapper,\r\n ListWrapper,\r\n ListItemWrapper,\r\n Image,\r\n Paragraph,\r\n Span,\r\n Button,\r\n H1\r\n} from './styles'\r\n\r\nfunction ListItem(props) {\r\n const {\r\n number,\r\n brand,\r\n brandName,\r\n paymentType,\r\n brandId,\r\n handleCard\r\n } = props\r\n\r\n const newProps = Object.assign({}, props)\r\n\r\n delete newProps.id\r\n delete newProps.number\r\n delete newProps.brand\r\n delete newProps.brandName\r\n delete newProps.brandId\r\n delete newProps.cvv\r\n\r\n return \r\n \r\n \r\n}\r\n\r\nexport function List(props) {\r\n const {\r\n data,\r\n selectedCard,\r\n handleCard\r\n } = props\r\n\r\n\treturn \r\n\t\t{ data && data.length ? <>\r\n \r\n { data.map((mappedItem, index) => {\r\n const key = `payment-list-item-${index}`\r\n \r\n const stringfiedCard = JSON.stringify(mappedItem)\r\n\r\n return {\r\n return handleCard(mappedItem)\r\n } } />\r\n }) } \r\n : <>\r\n Nenhum cartão cadastrado. \r\n }\r\n\t \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n\r\n\t> p {\r\n\t\tmargin: 0;\r\n\t\tmargin-bottom: 1.25rem;\r\n\r\n\t\t&:last-child {\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const ContentWrapper = styled.form`\r\n min-width: 100%;\r\n max-width: 100%;\r\n flex: 1;\r\n display: flex;\r\n flex: 0;\r\n align-items: center;\r\n height: 100%;\r\n flex-wrap: wrap;\r\n flex: 1;\r\n align-content: flex-start;\r\n position: relative;\r\n padding: 1.5rem;\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n font-size: 1.25rem;\r\n padding: 0;\r\n margin: 0;\r\n\tmargin-bottom: 1.25rem;\r\n\tflex: 1;\r\n\ttext-align: center;\r\n\r\n @media (min-width: 60rem) {\r\n width: 100%;\r\n flex: 1 0 100%;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff'};\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: .938rem;\r\n font-size: .875rem;\r\n font-weight: bold;\r\n flex: 1;\r\n max-height: 3.75rem;\r\n min-height: 3.75rem;\r\n line-height: 3.75rem;\r\n padding: 0;\r\n margin: 0;\r\n font-size: 1rem;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n`\r\n\r\nexport const Input = styled.input`\r\n\tborder: 0 none;\r\n\tborder-bottom: #E1E1E1 .063rem solid;\r\n\tfont-size: 1.125rem;\r\n\ttext-align: center;\r\n\theight: 1.875rem;\r\n\tmin-height: 1.875rem;\r\n\tmax-height: 1.875rem;\r\n\tline-height: 1.875rem;\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n\tmargin: 0 auto;\r\n\tflex: 1;\r\n\tmargin-bottom: 1.25rem;\r\n\tmin-width: 50%;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start;\r\n\talign-items: center;\r\n`\r\n\r\nexport const FormFieldCardNumber = styled.div`\r\n flex: 1;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0 1rem 1rem 0;\r\n }\r\n`\r\n\r\nexport const FormFieldCardName = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldCPF = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldValidity = styled.div`\r\n flex: 1 0 calc(50% - .5rem);\r\n width: calc(50% - .5rem);\r\n margin: 0 1rem 1rem 0;\r\n`\r\n\r\nexport const FormFieldBirth = styled.div`\r\n flex: 1 0 calc(50% - .5rem);\r\n width: calc(50% - .5rem);\r\n margin: 0 1rem 1rem 0;\r\n`\r\n\r\nexport const FormFieldCVV = styled.div`\r\n flex: 1 0 calc(50% - .5rem);\r\n width: calc(50% - .5rem);\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldCPFNote = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormActionContainer = styled.div`\r\n bottom: 1.5rem;\r\n position: absolute;\r\n right: 1.5rem;\r\n left: 1.5rem;\r\n`\r\n","import React, {\r\n\tuseState\r\n} from 'react'\r\n\r\nimport LoadingGIF from '../../assets/ipiranga-loading.gif'\r\nimport { InputRounded } from '../../components'\r\n\r\nimport {\r\n\tWrapper,\r\n\tContentWrapper,\r\n\tLoadingWrapper,\r\n\tLoadingImage,\r\n\tH1,\r\n\tButton,\r\n\tFormFieldCPF,\r\n\tFormFieldCPFNote,\r\n\tFormFieldBirth,\r\n\tFormFieldCVV,\r\n\tFormFieldCardName,\r\n\tFormFieldCardNumber,\r\n\tFormFieldValidity,\r\n\tFormActionContainer\r\n} from './styles'\r\n\r\nimport { maskCard, maskCpf, maskDate, maskBirth, maskCardExpirationDate } from '../../../domain/helpers'\r\n\r\nexport function NewCard(props) {\r\n\tconst {\r\n\t\tcardBrandTicket,\r\n\t\tnumber,\r\n\t\tname,\r\n\t\tdate,\r\n\t\tCVV,\r\n\t\tCPF,\r\n\t\tbirth,\r\n\t\thandleNumber,\r\n\t\thandleName,\r\n\t\thandleDate,\r\n\t\thandleBirth,\r\n\t\thandleCPF,\r\n\t\thandleBrandId,\r\n\t\thandleCVV,\r\n\t\thandleNext: propsHandleNext\r\n\t} = props\r\n\r\n\tconst [loading, setLoading] = useState(false)\r\n\r\n\tasync function handleNext() {\r\n\t\tsetLoading(true)\r\n\r\n\t\tawait propsHandleNext()\r\n\r\n\t\tsetLoading(false)\r\n\t}\r\n\r\n\treturn \r\n\t\t{loading && \r\n\t\t\t }\r\n\r\n\t\t{!loading && \r\n\t\t\t\r\n\t\t\t\t {\r\n\t\t\t\t\tconst { value } = event.target\r\n\r\n\t\t\t\t\thandleNumber(maskCard(value))\r\n\r\n\t\t\t\t\tif (value.length === 19) {\r\n\t\t\t\t\t\thandleBrandId(value)\r\n\t\t\t\t\t}\r\n\t\t\t\t}} />\r\n\t\t\t \r\n\t\t\t{number && number.length === 19 ? <>\r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\tconst { value } = event.target\r\n\r\n\t\t\t\t\t\t\thandleName(value)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tconst { value } = event.target\r\n\r\n\t\t\t\t\t\thandleCPF(maskCpf(value))\r\n\t\t\t\t\t}} />\r\n\t\t\t\t \r\n\t\t\t\t{cardBrandTicket ? <>\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tconst { value } = event.target\r\n\r\n\t\t\t\t\t\thandleBirth(maskBirth(value))\r\n\t\t\t\t\t}} />\r\n\t\t\t\t \r\n\t\t\t\t : <>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tconst { value } = event.target\r\n\r\n\t\t\t\t\t\t\t\thandleDate(maskCardExpirationDate(value))\r\n\t\t\t\t\t\t\t}} \r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t \r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tconst { keyCode } = event\r\n\r\n\t\t\t\t\t\tif (!(\r\n\t\t\t\t\t\t\t(keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) ||\r\n\t\t\t\t\t\t\tkeyCode === 8 ||\r\n\t\t\t\t\t\t\tkeyCode === 9 ||\r\n\t\t\t\t\t\t\tkeyCode === 46 ||\r\n\t\t\t\t\t\t\tkeyCode === 37 ||\r\n\t\t\t\t\t\t\tkeyCode === 39\r\n\t\t\t\t\t\t)) {\r\n\t\t\t\t\t\t\tevent.preventDefault()\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}} onChange={(event) => {\r\n\t\t\t\t\t\tconst { value } = event.target\r\n\r\n\t\t\t\t\t\thandleCVV(value)\r\n\t\t\t\t\t}} />\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t \r\n\t\t }\r\n\t \r\n}\r\n","import styled from 'styled-components'\r\n\r\nimport { fadeIn } from '../../components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin-top: 0;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n position: relative;\r\n background: #fff;\r\n\r\n ${fadeIn}\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n &#stores-list-loading {\r\n justify-content: center;\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n min-width: calc(100% - 2.5rem);\r\n max-width: calc(100% - 2.5rem);\r\n flex: 1;\r\n }\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n padding: 1.25rem;\r\n box-sizing: border-box;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n flex: 1;\r\n flex-direction: column;\r\n min-width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n padding: 1.25rem;\r\n position: relative;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n position: relative;\r\n\r\n ${fadeIn}\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n padding: 0;\r\n\r\n &#stores-list-search {\r\n margin-bottom: 1.875rem;\r\n }\r\n }\r\n\t\r\n\t@media (min-width: 60rem){\r\n\t\tpadding: 0 1.25rem 1.25rem 1.25rem;\r\n\t}\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n\tmargin: 0;\r\n\tpadding: 1rem 0;\r\n\tfont-size: 1rem;\r\n\tline-height: 1.25rem;\r\n\tfont-weight: bold;\r\n\tmin-width: 100%;\r\n\ttext-transform: none;\r\n\ttext-align: center;\r\n\tpadding-bottom: 1.25rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\ttext-align: left;\r\n\t\tfont-size: 1.25rem;\r\n\t\ttext-transform: uppercase;\r\n padding: 1rem 0;\r\n margin: 1rem 1rem 0 1rem;\r\n min-width: calc(100% - 2rem);\r\n\t}\r\n\r\n\t@media (max-width:40rem){\r\n\t\tborder-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n\t}\r\n`\r\nexport const CartHeaderWrapper = styled.header`\r\n width: 100%;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n }\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\nexport const CloseButton = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n`\r\nexport const H2 = styled.h2`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1.125rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333' };\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n padding-bottom: 1.25rem;\r\n`\r\n","var _path, _path2, _path3, _path4, _path5, _path6;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconCoupon = function SvgIconCoupon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 34,\n height: 30,\n viewBox: \"0 0 34 30\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M27.993 4.60003L25.778 0.742032C25.6816 0.573399 25.5528 0.42551 25.399 0.306887C25.2452 0.188264 25.0694 0.101254 24.8819 0.050871C24.6943 0.000488315 24.4986 -0.0122706 24.306 0.0133296C24.1135 0.0389298 23.9279 0.102383 23.76 0.200032L0.739005 13.562C0.399483 13.7603 0.15216 14.0848 0.0509941 14.4647C-0.0501713 14.8447 0.00303286 15.2492 0.199004 15.59L2.41401 19.447C2.74999 19.2521 3.1212 19.1257 3.50627 19.0748C3.89134 19.024 4.28267 19.0498 4.65771 19.1509C5.03275 19.2519 5.3841 19.4261 5.69153 19.6635C5.99896 19.9009 6.25639 20.1967 6.449 20.534C6.84105 21.2159 6.94731 22.0252 6.74457 22.7852C6.54184 23.5452 6.04659 24.194 5.367 24.59L7.58201 28.448C7.67831 28.6166 7.80701 28.7645 7.9607 28.8831C8.11439 29.0018 8.29003 29.0888 8.47751 29.1393C8.66498 29.1898 8.86059 29.2026 9.05307 29.1772C9.24555 29.1518 9.43108 29.0885 9.59901 28.991L32.62 15.629C32.9595 15.4308 33.2069 15.1063 33.308 14.7263C33.4092 14.3464 33.356 13.9419 33.16 13.601L30.945 9.74403C30.609 9.93892 30.2378 10.0654 29.8527 10.1162C29.4677 10.1671 29.0763 10.1412 28.7013 10.0402C28.3263 9.93915 27.9749 9.76493 27.6675 9.52755C27.3601 9.29017 27.1026 8.99432 26.91 8.65703C26.5177 7.97494 26.4114 7.16529 26.6144 6.40507C26.8173 5.64484 27.313 4.99588 27.993 4.60003V4.60003ZM30.279 11.55L31.879 14.342L26.763 17.311L26.394 16.668C26.3459 16.5838 26.2816 16.5098 26.2048 16.4505C26.128 16.3912 26.0403 16.3476 25.9466 16.3224C25.8529 16.2971 25.7551 16.2906 25.6589 16.3032C25.5627 16.3159 25.47 16.3474 25.386 16.396C25.2162 16.4951 25.0924 16.6573 25.0416 16.8472C24.9909 17.0371 25.0172 17.2395 25.115 17.41L25.484 18.053L8.86101 27.7L7.26101 24.909C7.85552 24.2067 8.21944 23.3384 8.30335 22.422C8.38726 21.5056 8.18708 20.5857 7.73001 19.787C7.27387 18.9913 6.58191 18.3567 5.74969 17.9711C4.91746 17.5854 3.98603 17.4676 3.08401 17.634L1.48401 14.842L18.1 5.20003L18.469 5.84303C18.5171 5.9273 18.5814 6.00122 18.6582 6.06055C18.735 6.11987 18.8227 6.16342 18.9164 6.1887C19.0101 6.21398 19.1079 6.22049 19.2041 6.20784C19.3003 6.1952 19.393 6.16366 19.477 6.11503C19.6469 6.01599 19.7706 5.85374 19.8212 5.66374C19.8718 5.47373 19.8451 5.27143 19.747 5.10103L19.378 4.45803L24.5 1.48503L26.1 4.27603C25.5052 4.97825 25.1411 5.8466 25.0572 6.76302C24.9733 7.67944 25.1736 8.59947 25.631 9.39803C26.0873 10.1942 26.7795 10.829 27.6122 11.2146C28.4448 11.6003 29.3767 11.7179 30.279 11.551V11.55Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M22.804 11.8969C22.6341 11.996 22.5104 12.1582 22.4598 12.3482C22.4092 12.5382 22.4359 12.7405 22.534 12.9109L23.272 14.1969C23.3201 14.2812 23.3844 14.3551 23.4612 14.4145C23.538 14.4738 23.6257 14.5173 23.7194 14.5426C23.8131 14.5679 23.9109 14.5744 24.0071 14.5618C24.1033 14.5491 24.196 14.5176 24.28 14.4689C24.4498 14.3699 24.5736 14.2077 24.6244 14.0178C24.6752 13.8278 24.6488 13.6255 24.551 13.4549L23.812 12.1689C23.7639 12.0847 23.6996 12.0107 23.6228 11.9514C23.546 11.8921 23.4583 11.8485 23.3646 11.8233C23.2709 11.798 23.1731 11.7915 23.0769 11.8041C22.9807 11.8168 22.888 11.8483 22.804 11.8969Z\",\n fill: \"#F27C25\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.219 7.39596C20.0491 7.495 19.9254 7.65725 19.8748 7.84726C19.8242 8.03726 19.8509 8.23957 19.949 8.40996L20.687 9.69596C20.7352 9.78026 20.7996 9.85421 20.8765 9.91354C20.9534 9.97288 21.0412 10.0164 21.135 10.0417C21.2287 10.067 21.3266 10.0735 21.4228 10.0608C21.5191 10.0482 21.612 10.0166 21.696 9.96796C21.8657 9.86874 21.9892 9.70649 22.0398 9.51656C22.0904 9.32664 22.0639 9.12442 21.966 8.95396L21.227 7.66796C21.1789 7.5837 21.1146 7.50977 21.0378 7.45045C20.961 7.39113 20.8733 7.34757 20.7796 7.32229C20.6859 7.29701 20.5881 7.29051 20.4919 7.30315C20.3957 7.31579 20.303 7.34734 20.219 7.39596Z\",\n fill: \"#F27C25\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.122 10.5081C13.9257 10.5086 13.7375 10.587 13.599 10.7262C13.4604 10.8653 13.3827 11.0537 13.383 11.2501V20.9081C13.383 21.1043 13.4608 21.2926 13.5993 21.4317C13.7378 21.5707 13.9257 21.6493 14.122 21.6501C14.2517 21.6498 14.379 21.6153 14.491 21.5501C14.6034 21.4846 14.6967 21.3907 14.7614 21.2779C14.8262 21.165 14.8602 21.0372 14.86 20.9071V11.2541C14.8608 11.1565 14.8423 11.0598 14.8056 10.9695C14.7689 10.8791 14.7147 10.7969 14.6461 10.7276C14.5775 10.6583 14.4959 10.6032 14.406 10.5655C14.316 10.5278 14.2195 10.5083 14.122 10.5081V10.5081Z\",\n fill: \"#F27C25\"\n })), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.24 15.029L11.871 14.386C11.7264 14.1332 11.5333 13.9115 11.3027 13.7336C11.0722 13.5556 10.8087 13.425 10.5276 13.3492C10.2464 13.2734 9.95301 13.2539 9.66426 13.2917C9.37552 13.3296 9.09711 13.4242 8.84501 13.57C8.33586 13.8675 7.96492 14.3542 7.81301 14.9239C7.6611 15.4937 7.74053 16.1005 8.03401 16.612L8.40301 17.255C8.54771 17.5078 8.74095 17.7295 8.97161 17.9074C9.20228 18.0853 9.46583 18.2159 9.74711 18.2916C10.0284 18.3674 10.3219 18.3868 10.6107 18.3487C10.8995 18.3107 11.1779 18.216 11.43 18.07C11.9385 17.7721 12.3089 17.2856 12.4606 16.7161C12.6122 16.1466 12.533 15.5403 12.24 15.029V15.029ZM10.961 15.771C11.0589 15.9414 11.0854 16.1436 11.0348 16.3336C10.9842 16.5235 10.8607 16.6857 10.691 16.785C10.607 16.8335 10.5143 16.8649 10.4181 16.8775C10.3219 16.89 10.2242 16.8835 10.1305 16.8582C10.0369 16.833 9.94916 16.7895 9.87236 16.7302C9.79557 16.671 9.73122 16.5971 9.68301 16.513L9.31401 15.87C9.21696 15.6998 9.19078 15.4982 9.24111 15.3088C9.29145 15.1195 9.41426 14.9575 9.58301 14.858C9.66709 14.8095 9.75992 14.778 9.85617 14.7654C9.95243 14.7528 10.0502 14.7594 10.1439 14.7846C10.2377 14.8099 10.3255 14.8534 10.4024 14.9127C10.4793 14.9719 10.5437 15.0458 10.592 15.13L10.961 15.771Z\",\n fill: \"#F27C25\"\n })), _path6 || (_path6 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M16.815 14.088C16.3061 14.3857 15.9353 14.8724 15.7834 15.4421C15.6315 16.0118 15.7108 16.6185 16.004 17.13L16.373 17.773C16.5177 18.0257 16.7109 18.2473 16.9415 18.4252C17.1721 18.603 17.4355 18.7335 17.7167 18.8092C17.9978 18.885 18.2912 18.9044 18.5799 18.8664C18.8686 18.8285 19.147 18.7339 19.399 18.588C19.908 18.2904 20.2787 17.8037 20.4306 17.234C20.5825 16.6642 20.5032 16.0576 20.21 15.546L19.841 14.903C19.6963 14.6504 19.5031 14.4287 19.2725 14.2509C19.0419 14.0731 18.7785 13.9426 18.4973 13.8669C18.2162 13.7911 17.9228 13.7717 17.6341 13.8096C17.3454 13.8476 17.067 13.9422 16.815 14.088V14.088ZM18.932 16.288C19.0299 16.4585 19.0564 16.6607 19.0058 16.8506C18.9552 17.0406 18.8317 17.2028 18.662 17.302C18.578 17.3507 18.4852 17.3824 18.389 17.3951C18.2928 17.4078 18.195 17.4014 18.1012 17.3762C18.0074 17.351 17.9196 17.3076 17.8427 17.2483C17.7658 17.1891 17.7013 17.1153 17.653 17.031L17.284 16.388C17.1864 16.2175 17.16 16.0154 17.2106 15.8255C17.2611 15.6357 17.3845 15.4735 17.554 15.374C17.638 15.3253 17.7309 15.2936 17.8272 15.2809C17.9235 15.2681 18.0214 15.2746 18.1152 15.2999C18.209 15.3252 18.2968 15.3688 18.3737 15.4282C18.4506 15.4876 18.5149 15.5616 18.563 15.646L18.932 16.288Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconCoupon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_coupon.1f3fc216.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n height: 5.5rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n border: .1rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n border-radius: .8rem;\r\n padding: .75rem 1rem;\r\n background-color: #fff;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n\r\n @media (min-width: 60rem) {\r\n border-radius: 1rem;\r\n height: 5.5rem;\r\n padding: .75rem 1rem;\r\n }\r\n\r\n > * {\r\n box-sizing: border-box;\r\n pointer-events: none;\r\n }\r\n\r\n label {\r\n cursor: pointer;\r\n }\r\n`\r\n\r\nexport const CardSide = styled.div`\r\n flex: 0 1 3rem;\r\n height: 100%;\r\n padding: 0 1rem 0 0;\r\n margin: 0 1rem 0 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n border-right: .1rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n\r\n svg {\r\n width: 2.5rem;\r\n\r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const CardContent = styled.div`\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-wrap: wrap;\r\n overflow: hidden;\r\n height: 100%;\r\n justify-content: space-between;\r\n\r\n svg {\r\n width: 1.625rem;\r\n height: 1.625rem;\r\n align-self: center;\r\n cursor: pointer;\r\n\r\n g {\r\n stroke: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n }\r\n` \r\n\r\nexport const CuponDetails = styled.div`\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n flex: 1;\r\n max-width: calc(100% - 2.5rem);\r\n`\r\n\r\nexport const CuponCode = styled.label`\r\n font-weight: 600;\r\n font-size: 1.2rem;\r\n line-height: 1.2rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0 0 .5rem 0;\r\n min-height: 1.2rem;\r\n`\r\n\r\nexport const CuponDescription = styled.p`\r\n font-weight: 0;\r\n font-size: .8rem;\r\n line-height: .8rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\twhite-space: nowrap;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n`\r\n","import React from 'react'\r\n\r\nimport { ReactComponent as InfoIcon } from '../../assets/icons/icon_info.svg'\r\nimport { ReactComponent as CouponIcon } from '../../assets/icons/icon_coupon.svg'\r\n\r\nimport {\r\n Wrapper,\r\n CardSide,\r\n CardContent,\r\n CuponDetails,\r\n CuponCode,\r\n CuponDescription\r\n} from './styles'\r\n\r\nexport function Coupon(props) {\r\n const {\r\n\t\tid,\r\n code,\r\n\t\tquickDescription,\r\n description,\r\n value,\r\n\t\tminValue,\r\n\t\ttype,\r\n\t\ttypeValueModalityDelivery,\r\n\t\tvalueModalityDelivery,\r\n\t\tvalueMaxModalityDelivery,\r\n\t\tvalueMinModalityDelivery,\r\n handleClick\r\n } = props\r\n\r\n\tconst formattedValue = type === 1 ? `R$ ${value}` : `${value}%`\r\n\r\n return (\r\n {\r\n handleClick({\r\n\t\t\t\tid,\r\n code,\r\n\t\t\t\tquickDescription,\r\n description,\r\n value,\r\n minValue,\r\n\t\t\t\ttype,\r\n typeValueModalityDelivery,\r\n valueModalityDelivery,\r\n valueMaxModalityDelivery,\r\n valueMinModalityDelivery\r\n })\r\n }}>\r\n \r\n \r\n \r\n \r\n {code} \r\n\t\t\t\t\t{`Cupom de ${formattedValue} de desconto!`} \r\n {quickDescription} \r\n \r\n \r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\n\r\nimport { Wrapper as Coupon } from '../coupon/styles'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n width: 100%;\r\n height: auto;\r\n padding: 0 1rem;\r\n\r\n @media (min-width: 60rem) {\r\n padding: 0 2rem 2rem 2rem;\r\n }\r\n\r\n ${Coupon} {\r\n flex: 1;\r\n margin: 0 0 1.25rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n ${ props => props.mode === 'simple' ?\r\n `min-width: 100%;\r\n max-width: 100%;\r\n margin: 1rem 0 0;` :\r\n `flex: 0 1 calc(50% - .5rem);\r\n max-width: calc(50% - .5rem);\r\n margin: 0 0 1.25rem 0;\r\n min-width: unset;\r\n\r\n &:nth-child(2n + 1) {\r\n max-width: calc(50% - .775rem);\r\n margin: 0 1.25rem 1.75rem 0;\r\n min-width: unset;\r\n }`\r\n }\r\n }\r\n }\r\n`\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconCoupon = function SvgIconCoupon(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 208,\n height: 182,\n viewBox: \"0 0 208 182\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9495\",\n \"data-name\": \"Grupo 9495\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5537\",\n \"data-name\": \"Caminho 5537\",\n d: \"M178.54,35.183,164.728,11.128a9.181,9.181,0,0,0-12.579-3.385L8.606,91.057A9.283,9.283,0,0,0,5.236,103.7l13.811,24.05a18.36,18.36,0,0,1,25.158,6.776,18.564,18.564,0,0,1-6.745,25.288l13.811,24.055a9.181,9.181,0,0,0,12.579,3.385L207.4,103.943a9.283,9.283,0,0,0,3.37-12.646l-13.812-24.05A18.36,18.36,0,0,1,171.8,60.471,18.564,18.564,0,0,1,178.54,35.183ZM192.793,78.52l10,17.41-31.9,18.512-2.3-4.009a4.591,4.591,0,0,0-6.287-1.7,4.645,4.645,0,0,0-1.69,6.323l2.3,4.009L59.249,179.239l-9.995-17.4A27.945,27.945,0,0,0,52.177,129.9a27.617,27.617,0,0,0-28.97-13.421l-10-17.41L116.877,38.9l2.3,4.009a4.591,4.591,0,0,0,6.287,1.7,4.639,4.639,0,0,0,1.685-6.323l-2.3-4.009,31.9-18.512,9.995,17.4A27.936,27.936,0,0,0,163.824,65.1,27.617,27.617,0,0,0,192.793,78.52Z\",\n transform: \"translate(-4 -6.5)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5538\",\n \"data-name\": \"Caminho 5538\",\n d: \"M33.216,21.263a4.606,4.606,0,0,0-1.692,6.3l4.623,7.995a4.623,4.623,0,0,0,8.013-4.614l-4.628-7.995A4.63,4.63,0,0,0,33.216,21.263Z\",\n transform: \"translate(108.939 52.936)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5539\",\n \"data-name\": \"Caminho 5539\",\n d: \"M30.117,15.867a4.606,4.606,0,0,0-1.692,6.3l4.623,7.995a4.623,4.623,0,0,0,8.013-4.614l-4.628-7.995A4.63,4.63,0,0,0,30.117,15.867Z\",\n transform: \"translate(95.929 30.264)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5540\",\n \"data-name\": \"Caminho 5540\",\n d: \"M24.675,19.1a4.621,4.621,0,0,0-4.628,4.614v60a4.625,4.625,0,0,0,9.251,0v-60A4.62,4.62,0,0,0,24.675,19.1Z\",\n transform: \"translate(63.38 46.557)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5541\",\n \"data-name\": \"Caminho 5541\",\n d: \"M41.478,33.333l-2.314-4A13.865,13.865,0,0,0,15.136,43.179l2.309,4A13.868,13.868,0,0,0,41.478,33.333Zm-8.013,4.614a4.621,4.621,0,0,1-8.008,4.614l-2.314-4a4.623,4.623,0,0,1,8.013-4.614Z\",\n transform: \"translate(34.926 60.395)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5542\",\n \"data-name\": \"Caminho 5542\",\n d: \"M29.769,24.887A13.843,13.843,0,0,0,24.692,43.8l2.314,4A13.867,13.867,0,0,0,51.034,33.949l-2.314-4A13.9,13.9,0,0,0,29.769,24.887ZM43.027,38.564a4.625,4.625,0,0,1-8.013,4.619l-2.314-4a4.623,4.623,0,0,1,8.013-4.614Z\",\n transform: \"translate(75.03 63)\",\n fill: \"#191750\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconCoupon, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_coupon.ff6f098f.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react'\r\n\r\nimport { Coupon } from '../coupon'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nexport function Content({\r\n data,\r\n handleCoupon,\r\n couponId,\r\n mode\r\n}) {\r\n return \r\n {data ? data.map((data, index) => {\r\n const key = `coupons-content-list-item-${index}}`\r\n\r\n const {\r\n\t\t\t\tid,\r\n code,\r\n\t\t\t\tquickDescription,\r\n description,\r\n value,\r\n\t\t\t\ttype,\r\n minValue,\r\n typeValueModalityDelivery,\r\n valueModalityDelivery,\r\n valueMaxModalityDelivery,\r\n valueMinModalityDelivery\r\n } = data\r\n\r\n return (\r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n padding: 0 2rem 2rem;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: center;\r\n\t${props => {\r\n if (props.modal) {\r\n return ``\r\n } else {\r\n return `margin-top: -60px;`\r\n }\r\n }}\r\n\r\n > div {\r\n flex: 1;\r\n\r\n &.header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 12.5rem;\r\n flex: 0;\r\n\r\n @media(min-width: 60rem){\r\n display: none;\r\n }\r\n\r\n > img {\r\n min-width: 4.375rem;\r\n max-width: 4.375rem;\r\n min-height: auto;\r\n max-height: unset;\r\n }\r\n\r\n svg {\r\n opacity: .2;\r\n\r\n g {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n g {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n path {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n &.icon-content {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 12.5rem;\r\n flex: 0;\r\n\r\n @media(min-width: 60rem){\r\n min-width: 40%;\r\n max-width: 40%;\r\n }\r\n\r\n @media(max-width: 60rem){\r\n display: none;\r\n }\r\n\r\n svg {\r\n opacity: .2;\r\n g {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n g {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n path {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n &.content {\r\n @media(min-width: 60rem){\r\n\r\n\t\t\t\t${props => {\r\n\t\t\t\t\tif (props.modal) {\r\n\t\t\t\t\t\treturn `min-width: 100%;\r\n\t\t\t\t\t\tmax-width: 100%;`\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\treturn `min-width: 60%;\r\n\t\t\t\t\t\tmax-width: 60%;`\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n }\r\n\r\n @media(max-width:60rem){\r\n text-align: center;\r\n }\r\n \r\n > h2 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n\r\n > p {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n &.footer {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 4.375rem;\r\n max-height: 4.375rem;\r\n }\r\n }\r\n\r\n @media(max-width:60rem){\r\n flex-direction: column;\r\n padding: 2rem;\r\n margin-top: 0px;\r\n }\r\n`\r\n","import React from 'react'\r\n\r\nimport { ReactComponent as IconCoupon } from '../../assets/icon_coupon.svg'\r\n\r\nimport {\r\n Div,\r\n DefaultParagraph as Paragraph,\r\n H2\r\n} from '../../components'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nexport function EmptyContent({\r\n data,\r\n\tmodal\r\n}) {\r\n const {\r\n content\r\n } = data\r\n\r\n return \r\n \r\n}\r\n","\r\nimport React, {\r\n useContext,\r\n useEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\n\r\nimport {\r\n coupon\r\n} from '../../../state'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../../domain/helpers'\r\n\r\nimport {\r\n Skeleton\r\n} from '../../'\r\n\r\nimport {\r\n ContentWrapper,\r\n LoadingWrapper,\r\n Wrapper,\r\n H1,\r\n CloseButton,\r\n\tCartHeaderWrapper,\r\n Paragraph\r\n} from './styles'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport { Content } from '../content'\r\nimport { EmptyContent } from '../empty-content'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nfunction CouponsListPage(props) {\r\n const {\r\n loading,\r\n registeredCoupons,\r\n\t\tmodal = false,\r\n fetchCoupons,\r\n handleCoupon,\r\n\t\thandleCloseCoupon,\r\n } = props\r\n\r\n const {\r\n sections,\r\n title,\r\n text\r\n } = useContext(Context)\r\n\r\n const registeredCouponsSection = sections && sections.filter(item => item.id === 'registered-coupons')[0]\r\n\r\n const registeredCouponsSelectedSectionName = registeredCoupons && registeredCoupons.length ? 'main-content' : 'empty-content'\r\n const registeredCouponsSelectedSection = (registeredCouponsSection && registeredCouponsSection.content && registeredCouponsSection.content.filter(item => item.id === registeredCouponsSelectedSectionName)[0]) || {}\r\n\r\n useEffect(() => {\r\n setTimeout(() => fetchCoupons(), 500)\r\n }, [\r\n fetchCoupons\r\n ])\r\n\r\n return \r\n {!!loading.includes('coupons') && \r\n }\r\n\r\n {!loading.includes('coupons') && <>\r\n\t\t\t\r\n\t\t\t\t {\r\n\t\t\t\t\tif(!handleCloseCoupon){\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\t\t\t\t\thandleCloseCoupon(false)\r\n\t\t\t\t}}>\r\n\t\t\t\t\t \r\n\t\t\t \r\n\t\t\t\r\n\t\t\t\t{registeredCoupons && registeredCoupons.length > 0 && {text} }\r\n\t\t\t\t{registeredCoupons && registeredCoupons.length ?\r\n\t\t\t\t\t }\r\n \r\n}\r\n\r\nCouponsListPage.propTypes = {\r\n loading: PropTypes.arrayOf(PropTypes.string),\r\n registeredCoupons: PropTypes.arrayOf(PropTypes.shape({})),\r\n\r\n fetchCoupons: PropTypes.func,\r\n\r\n handleCoupon: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n loading: state.loading.loading || [],\r\n registeredCoupons: (state.main.coupons && state.main.coupons.coupons) || { coupons: [] }\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchCoupons: coupon.fetchCoupons\r\n})\r\n\r\nexport const CouponsList = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'coupons' })\r\n)(CouponsListPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n margin: 0;\r\n max-width: 100%;\r\n min-width: 100%;\r\n padding: 0;\r\n animation: slideUp 1s;\r\n animation-fill-mode: forwards;\r\n top: 0;\r\n position: relative;\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n &.slide-down {\r\n animation: slideDown 1s;\r\n\r\n > div {\r\n > div {\r\n &.fixed {\r\n animation: finishButtonFadeOut .5s;\r\n }\r\n }\r\n }\r\n }\r\n\r\n > div {\r\n &#cart-list {\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'} .063rem solid;\r\n margin-bottom: 1.25rem;\r\n flex: none;\r\n }\r\n\r\n > div {\r\n &.fixed {\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#FF0'};\r\n padding: 1.25rem;\r\n position: fixed;\r\n top: calc(100% - 6.875rem);\r\n left: 0;\r\n width: 100%;\r\n box-shadow: 0 0 .625rem ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#999'};\r\n transform: translate(0, 0);\r\n animation: finishButtonFadeIn .5s;\r\n animation-delay: 1s;\r\n animation-fill-mode: forwards;\r\n opacity: 0;\r\n z-index: 1000;\r\n }\r\n }\r\n }\r\n\r\n @keyframes finishButtonFadeIn {\r\n 0% { opacity: 0; }\r\n 100% { opacity: 1; }\r\n }\r\n\r\n @keyframes finishButtonFadeOut {\r\n 0% { opacity: 1; }\r\n 100% { opacity: 0; }\r\n }\r\n`\r\n\r\nexport const AddressWrapper = styled.div`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#333'};\r\n display: flex;\r\n flex-direction: row;\r\n padding: 1.25rem;\r\n flex: 0;\r\n min-width: 100%;\r\n justify-content: flex-start;\r\n align-items: center;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.dividerColor) || '#CCC'} .063rem solid;\r\n\r\n > p {\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#333'};\r\n margin-right: .625rem;\r\n font-size: .938rem;\r\n line-height: 1.25rem;\r\n }\r\n\r\n > div {\r\n margin-right: .625rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#000'};\r\n\r\n > svg {\r\n width: 1rem;\r\n height: 1rem;\r\n\r\n * {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#000'};\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n margin: 0;\r\n padding: 0;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin: 0;\r\n padding: 1.25rem;\r\n font-size: 1.2rem;\r\n line-height: 1.2rem;\r\n font-weight: bold;\r\n margin-bottom: 1.25rem;\r\n text-align: center;\r\n border-bottom: #d2d2d2 .063rem solid;\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n opacity: 0;\r\n min-width: 100%;\r\n max-width: 100%;\r\n height: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n\r\n > div {\r\n\t\t&.notification {\r\n\t\t\t@media (min-width: 40rem) {\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tleft: 1rem;\r\n\t\t\t\ttop: 1rem;\r\n\t\t\t\tmin-width: calc(100% - 2rem);\r\n\t\t\t\tright: 1rem;\r\n\t\t\t\tz-index: 3;\r\n\t\t\t}\r\n\t\t}\r\n\r\n &#cart-address {\r\n padding: 1.25rem;\r\n border-bottom:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'} .063rem solid;\r\n display: flex;\r\n flex-direction: column;\r\n min-width: calc(100% - 2.5rem);\r\n \r\n }\r\n }\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const Div = styled.div``\r\n\r\nexport const H3 = styled.h3`\r\n font-size: 1.125rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: .1rem;\r\n min-width: 100%;\r\n display: flex;\r\n align-items: center;\r\n\r\n > button {\r\n display: flex;\r\n align-items: center;\r\n }\r\n`\r\n\r\nexport const OverlayWrapper = styled.div`\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 3;\r\n opacity: 0;\r\n\r\n &.motion {\r\n opacity: 1;\r\n pointer-events: unset;\r\n }\r\n\r\n > div:not(.background) {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 0;\r\n transform: translate(-50%, 0);\r\n z-index: 2;\r\n }\r\n\r\n > div.background {\r\n background: rgba(150, 150, 150, .5);\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n }\r\n`\r\n\r\nexport const CartHeaderWrapper = styled.header`\r\n width: 100%;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n }\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const CartFooterWrapper = styled.footer`\r\n display: flex;\r\n flex-direction: column;\r\n padding: 0;\r\n\tpadding-bottom: .5rem;\r\n font-size: 1.2rem;\r\n\r\n > div {\r\n svg {\r\n width: .65rem;\r\n margin: 0 .5rem 0 0;\r\n height: 1rem;\r\n box-sizing: border-box;\r\n \r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n\r\n > p{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n \r\n &#cart-address {\r\n padding: 1rem 1.5rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'} .063rem solid;\r\n display: flex;\r\n flex-direction: row;\r\n min-width: calc(100% - 1.5rem); \r\n margin-bottom: 1rem;\r\n\r\n > div {\r\n\t\t\t\t&.content-pickup{\r\n width: 100%;\r\n > p{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n }\r\n\r\n &.content{\r\n width: 80%;\r\n > p{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n }\r\n \r\n &.edit{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n\r\n svg {\r\n width: 1rem;\r\n }\r\n }\r\n }\r\n \r\n > p {\r\n display: flex;\r\n align-items: center;\r\n\r\n > svg {\r\n height: 35px;\r\n top: -2px;\r\n position: relative;\r\n }\r\n }\r\n }\r\n\r\n &#cart-scheduling-select {\r\n padding: .8rem 1.5rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'} .063rem solid;\r\n display: flex;\r\n flex-direction: row;\r\n margin-bottom: 1rem;\r\n justify-content: space-between;\r\n\r\n >h4{\r\n font-size: 1.125rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n \r\n > p {\r\n display: flex;\r\n align-items: center;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-weight: bold;\r\n\r\n > svg {\r\n height: 30px;\r\n top: -5px;\r\n position: relative;\r\n }\r\n }\r\n\r\n @media(min-width:60rem){\r\n display:none;\r\n }\r\n }\r\n\r\n &#cart-scheduling {\r\n padding: 1rem 1.5rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'} .063rem solid;\r\n display: flex;\r\n flex-direction: row;\r\n min-width: calc(100% - 1.5rem); \r\n margin-bottom: 1rem;\r\n \r\n > div {\r\n &.content{\r\n width: 80%;\r\n > p{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n }\r\n\r\n &.edit{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: end;\r\n \r\n svg {\r\n width: 1rem;\r\n }\r\n }\r\n }\r\n\r\n > p {\r\n display: flex;\r\n align-items: center;\r\n\r\n > svg {\r\n height: 30px;\r\n top: -5px;\r\n position: relative;\r\n }\r\n }\r\n\r\n @media(min-width:60rem){\r\n display:none;\r\n }\r\n }\r\n\r\n &.cart-cards {\r\n padding: 1.25rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'} .063rem solid;\r\n display: flex;\r\n flex-direction: column;\r\n \r\n > p{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n text-decoration-thickness: 1.5px;\r\n text-align: center;\r\n cursor: pointer;\r\n font-weight: 700;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n > button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n max-height: 2rem;\r\n min-height: 2rem;\r\n\r\n > svg {\r\n width: 1rem;\r\n margin: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n #finish-purchase-button {\r\n margin-top: 1.5rem;\r\n }\r\n`\r\n\r\nexport const ButtonIcon = styled.button`\r\n display: flex;\r\n align-items: center;\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n justify-content: center;\r\n color: #fff;\r\n padding: 1.5rem 1rem;\r\n border-radius: 15px;\r\n height: 3.5rem;\r\n position: relative;\r\n cursor: pointer;\r\n margin: 1rem;\r\n min-width: calc(100% - 2rem);\r\n max-width: calc(100% - 2rem);\r\n\r\n &:disabled {\r\n opacity: .5;\r\n cursor: default;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n }\r\n\r\n @media (min-width: 40rem) {\r\n margin: 0rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nexport const ButtonIconLabel = styled.span`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n margin: 0 2rem;\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0;\r\n }\r\n`\r\n\r\nexport const IconButtonContainer = styled.div`\r\n top: 50%;\r\n position: absolute;\r\n left: 1rem;\r\n margin: 0 .5rem 0 0;\r\n transform: translate(0, -50%);\r\n`\r\n\r\nexport const IconButtonCartsItemsAmount = styled.span`\r\n border: 2px solid #F9F9F9;\r\n border-radius: 50%;\r\n width: .1rem;\r\n height: .1rem;\r\n padding: .35rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: -5px;\r\n right: -15px;\r\n font-size: .55rem;\r\n`\r\n\r\nexport const Divider = styled.div`\r\n border-bottom: 1px solid #F9F9F9;\r\n`\r\n\r\nexport const EditButton = styled.button`\r\n background-color: transparent;\r\n cursor: pointer;\r\n min-height: 30px;\r\n max-height: 30px;\r\n //font-size: 1.5rem\r\n`\r\n\r\nexport const ContainerCoupon = styled.div`\r\n background: #fff;\r\n text-align: start;\r\n margin-bottom: 1rem;\r\n\r\n @media(min-width: 60rem){\r\n display:none;\r\n }\r\n`\r\n\r\nexport const BoxFreeShipping = styled.div`\r\n\tfont-family: 'Roboto';\r\n\tdisplay: inline-block;\r\n\tflex-direction: row;\r\n\tcolor: #737373;\r\n\tborder-radius: 4px;\r\n\tbackground: #fff;\r\n\tfont-size: 13px;\r\n\tpadding: 2px 2px;\r\n\tmargin-bottom: 30px;\r\n\tpadding: 8px;\r\n\tfont-weight: bold;\r\n\tdisplay: flex;\r\n\tgap: 5px;\r\n\talign-items: center;\r\n\tposition: relative;\r\n\t\r\n\tsvg {\r\n\t\twidth: 22px !important;\r\n\t\theight: 17px !important;\r\n\t\tmargin-right: 5px !important;\t\r\n\r\n\t\tpath {\r\n\t\t\tfill: #007141 !important;\r\n\t\t}\r\n\t}\t\r\n\r\n\tp {\r\n\t\t\tmargin: 0px;\r\n\t\t\tb {\r\n\t\t\t\tcolor: #007141;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t&::before {\r\n\t\tcontent: '';\r\n\t\tdisplay: block;\r\n\t\twidth: 95%;\r\n\t\theight: 4px;\r\n\t\tbackground-color: #D9D9D9;\r\n\t\tposition: absolute;\r\n\t\tbottom: -5px;\r\n\t\tborder-radius: 4px;\r\n\t}\r\n\r\n\r\n\t&::after {\r\n\t\tcontent: '';\r\n\t\tdisplay: block;\r\n\t\twidth: ${props => props.percent < 100 ? props.percent - 5 : 95 }%;\r\n\t\theight: 4px;\r\n\t\tbackground-color: #007141;\r\n\t\tposition: absolute;\r\n\t\tbottom: -5px;\r\n\t\ttransition: width 0.5s ease;\r\n\t\tborder-radius: 4px;\r\n\t}\r\n`;\r\n\r\n","import styled from 'styled-components'\r\n\r\nexport const LoadingContainer = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tpadding: 5rem;\r\n`\r\n\r\nexport const Dialog = styled.div`\r\n\tpadding: 1rem;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr;\r\n \tgrid-template-rows: auto 1fr;\r\n\trow-gap: 1.25rem;\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n \tmax-height: 50rem;\r\n \tcolor: #545454;\r\n\r\n\t@media (min-width: 768px) {\r\n\t\tpadding: 1.5rem;\r\n\t}\r\n`\r\n\r\nDialog.Header = styled.div`\r\n text-align: start;\r\n \tfont-size: 1.25rem;\r\n`\r\nDialog.Caption = styled.div`\r\n text-align: start;\r\n margin: 12px 0px;\r\n font-size: 14px;\r\n color: #909090;\r\n`\r\n\r\nDialog.Content = styled.div`\r\n overflow: hidden;\r\n overflow-y: auto; \r\n display: flex;\r\n flex-direction: column;\r\n row-gap: 1.25rem;\r\n padding: 0px 15px;\r\n margin: 0 -15px;\r\n`\r\n\r\nDialog.CloseButton = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n\tposition: absolute;\r\n\ttop: 0.75rem;\r\n right: 0.75rem;\r\n\tcursor: pointer;\r\n\r\n\t.custom-icon svg {\r\n\t\theight: 1.25rem;\r\n width: 1.25rem;\r\n opacity: .6;\r\n\r\n\t\tpath {\r\n\t\t\tfill: #000000;\r\n\t\t}\r\n\t}\r\n`\r\n\r\nDialog.Title = styled.span`\r\n\ttext-align: center;\r\n\tfont-size: 1.25rem;\r\n\tfont-weight: 700;\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n`\r\n\r\nexport const SelectButtonContainer = styled.div`\r\n\tdisplay: flex;\r\n\tgap: 15px;\t\t\r\n\tpadding: 0 0 15px 0;\r\n\toverflow-x: hidden;\r\n overflow-y: hidden;\r\n\r\n\t&:hover {\r\n\t\toverflow-x: auto;\r\n\t}\r\n\r\n\t&::-webkit-scrollbar-track {\r\n\t\tbackground-color: #F5F5F5;\r\n\t}\r\n\r\n\t&::-webkit-scrollbar {\r\n\t\twidth: 3px;\r\n\t\theight: 2px;\r\n\t\tbackground-color: #F5F5F5;\r\n\t}\r\n\r\n\t&::-webkit-scrollbar-thumb {\r\n\t\tbackground-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t\tborder: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t}\r\n\r\n\t&::-webkit-scrollbar-track {\r\n\t\t-webkit-box-shadow: none;\r\n\t\tbox-shadow: none;\r\n\t}\r\n\r\n`\r\n\r\nSelectButtonContainer.Title = styled.div`\r\n\tfont-size: 1.25rem;\r\n\tfont-weight: bold;\r\n\tmargin-bottom: 5px;\r\n`\r\n\r\nexport const SelectButton = styled.button`\r\n\tcursor: pointer;\r\n\tbackground: #fff;\r\n\tpadding: 5px 20px;\t\r\n\tborder-radius: 8px;\r\n\tborder: 1px solid #ccc;\r\n\tcolor: #ccc;\r\n\r\n\t&.active {\r\n\t\tborder: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t}\r\n`\r\n\r\nSelectButton.Title = styled.div`\r\n\tfont-size: 1rem;\r\n\tfont-weight: bold;\r\n`\r\n\r\nSelectButton.Date = styled.div`\r\n\tfont-size: ${({isRanged}) => isRanged ? '0.825rem' : '1.25rem;'} \r\n\tfont-weight: bold;\r\n`\r\n\r\nexport const ButtonAction = styled.button`\r\n\twidth: 100%;\r\n\tcursor: pointer;\r\n\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\tborder: none;\r\n\tpadding: 15px;\r\n\tcolor: #fff;\r\n\tborder-radius: 4px;\r\n\tfont-size: 0.875rem;\t\r\n\r\n\t&:disabled {\r\n\t\topacity: 0.5;\r\n\t\tcursor: not-allowed;\r\n\t}\r\n`","import React, { useEffect, useState } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport {\r\n\tfetchDeliveryDates as fetchDeliveryDatesAction,\r\n\tsetSelectedDeliveryDate as setSelectedDeliveryDateAction,\t\r\n} from '../../../../redux/actions/main';\r\nimport { pipe, GetContent } from '../../../../domain/helpers';\r\n\r\nimport {\r\n\tCustomIcon,\r\n\tCustomLoading,\t\r\n} from '../../../components';\r\n\r\nimport {\r\n\tButtonAction,\r\n\tDialog,\r\n\tLoadingContainer,\r\n\tSelectButton,\r\n\tSelectButtonContainer,\r\n} from './styles';\r\nimport { ENABLE_SCHEDULE_INTERVAL } from '../../../../config';\r\n\r\nconst Context = React.createContext({});\r\n\r\nfunction DeliveryDateSelecionComponent(props) {\r\n\tconst {\r\n\t\tfetchDeliveryDates,\r\n\t\tloading,\r\n\t\tclose,\r\n\t\tavaliableDates,\r\n\t\tsetSelectedDeliveryDate,\r\n\t\tselectedDeliveryDate,\r\n\t} = props;\r\n\r\n\t\r\n\r\n\tconst [dateSelected, setDateSelected] = useState(null);\r\n\tconst [hourSelected, setHourSelected] = useState(null);\r\n\r\n\tconst isLoading = loading && loading.includes('deliveryDates');\t\r\n\r\n\tuseEffect(() => {\r\n\t\tasync function getDeliveryDates() {\r\n\t\t\tawait fetchDeliveryDates();\r\n\t\t}\r\n\r\n\t\tgetDeliveryDates();\r\n\t}, [fetchDeliveryDates]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif(selectedDeliveryDate){\r\n\t\t\tconst selectedDate = avaliableDates?.dates?.find((item) => item.date == selectedDeliveryDate.date)\r\n\t\t\tsetDateSelected(avaliableDates?.dates?.indexOf(selectedDate))\r\n\r\n\t\t\tconst selectedHour = avaliableDates?.dates[dateSelected]?.hours?.find((item) => item.hour == selectedDeliveryDate.hour.time)\r\n\t\t\tsetHourSelected(avaliableDates?.dates[dateSelected]?.hours?.indexOf(selectedHour))\r\n\t\t}\r\n\t},[avaliableDates])\r\n\r\n\tif (isLoading) {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t \r\n\t\t);\r\n\t}\r\n\r\n\tconst getWeek = (date) => {\r\n\t\t// format segunda , terça, quarta, quinta, sexta, sabado, domingo in pt-br\r\n\t\treturn new Date(date).toLocaleDateString('pt-BR', {\r\n\t\t\tweekday: 'long',\r\n\t\t}).split('-')[0];\t\t\t\t\r\n\t}\r\n\r\n\tconst getDate = (date) => {\t\t\r\n\t\treturn new Date(date).toLocaleDateString('pt-BR', {\r\n\t\t\tday: '2-digit',\r\n\t\t\tmonth: '2-digit',\r\n\t\t});\r\n\t}\r\n\t\t\r\n\r\n\treturn (\r\n\t\t\r\n\t);\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tloading: state.loading.loading || [],\r\n\t\tavaliableDates: state.main.avaliableDates || [],\r\n\t};\r\n};\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tfetchDeliveryDates: fetchDeliveryDatesAction,\r\n\tsetSelectedDeliveryDate: setSelectedDeliveryDateAction,\r\n});\r\n\r\nexport const DeliveryDateSelecion = React.memo(\r\n\tpipe(\r\n\t\tGetConnection,\r\n\t\tGetContent({ context: Context, id: 'delivery-date-selection' })\r\n\t)(DeliveryDateSelecionComponent)\r\n);\r\n","import React, {\r\n\tuseEffect,\r\n\tuseState,\r\n} from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n\twithTheme\r\n} from 'styled-components'\r\nimport {\r\n\tDialog,\r\n\tSlide\r\n} from '@material-ui/core'\r\nimport { Helmet } from 'react-helmet'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n\tuseStoreSettings,\r\n\tusePhoneValidation\r\n} from '../hooks'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent,\r\n\tcaculateProductsQuantity,\r\n\tmaskCpf\r\n} from '../../domain/helpers'\r\n\r\nimport history from '../../history'\r\n\r\nimport { ReactComponent as LocationIcon } from './../assets/icons/icon_checkout_address.svg'\r\nimport { ReactComponent as EditIcon } from './../assets/icons/icon_edit_fill.svg'\r\nimport { ReactComponent as BasketIcon } from '../assets/icons/icon_basket.svg'\r\nimport { ReactComponent as MotoSvg } from '../assets/moto.svg'\r\n\r\nimport {\r\n\tCustomIcon,\r\n\tCustomLoading\r\n} from '../components'\r\n\r\nimport { Icon } from '../components/common'\r\n\r\nimport {\r\n\tuseCustomLayout,\r\n\tuseDeviceLayout\r\n} from '../hooks'\r\n\r\nimport {\r\n\tsetQuantity,\r\n\tsetSelectedDeliveryDate,\r\n\tsetCart,\r\n\tsetUserHistory,\r\n\tsetNotification,\r\n\tsetCVV,\r\n\tsetProductsRemoved,\r\n\thandleGTM,\r\n\thandlePixel\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tCVV\r\n} from '../payment'\r\n\r\n\r\nimport {\r\n\tList,\r\n\tCard,\r\n\tMinimumValue,\r\n\tCoupon\r\n} from '.'\r\n\r\nimport {\r\n\tloading,\r\n\tcart,\r\n\tcoupon,\r\n\torder,\r\n\taddressActions\r\n} from '../../state'\r\n\r\nimport {\r\n\tCouponsList\r\n} from '../coupons/simple'\r\n\r\nimport { calculateCartTotal } from '../../domain/helpers'\r\n\r\n\r\nimport {\r\n\tNotification,\r\n\tAddressPostalCode\r\n} from '../'\r\n\r\nimport {\r\n\tWrapper,\r\n\tAddressWrapper,\r\n\tParagraph,\r\n\tH1,\r\n\tCloseButton,\r\n\tContentWrapper,\r\n\tDiv,\r\n\tH3,\r\n\tOverlayWrapper,\r\n\tCartHeaderWrapper,\r\n\tCartFooterWrapper,\r\n\tButtonIcon,\r\n\tIconButtonContainer,\r\n\tButtonIconLabel,\r\n\tIconButtonCartsItemsAmount,\r\n\tEditButton,\r\n\tContainerCoupon,\r\n\tBoxFreeShipping\r\n} from './styles'\r\nimport { DeliveryDateSelecion } from '../order-confirmation/Details/DeliveryDateSelecion'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n\t\t\r\n\t\t\t{`${title} - Carrinho de compras`} \r\n\t\t\t\r\n\t\t\t\r\n\t\t \r\n\r\n\t\t{mode === 'simple' ? null : \r\n\t\t\t {\r\n\t\t\t\thistory.push(`/${URLParameters}`)\r\n\t\t\t}}>\r\n\t\t\t\t \r\n\r\n\t\t\t{login && login.status === true && address ? \r\n\t\t\t\t{address.main} \r\n\t\t\t : !orderLoading && }\r\n\r\n\t\t\r\n\t\t\t\r\n\r\n\t\t\t\r\n\t\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t{scheduling && (selectedDeliveryDate ?\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t)}\r\n\r\n\r\n\r\n\t\t\t\t{!viewCards && !pathName && !isMobile && handleGoToNext(products)}>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{caculateProductsQuantity(products)} \r\n\t\t\t\t\t\t \r\n\t\t\t\t\tFormas de pagamento \r\n\t\t\t\t }\r\n\r\n\r\n\t\t\t\t{viewCards && !pathName && !isMobile && goToConfirmation()}>\r\n\t\t\t\t\tContinuar \r\n\t\t\t\t }\r\n\r\n\t\t\t\t{(pathName && pathName === '/order-confirmation') && {\r\n\t\t\t\t\thandleFinish()\r\n\t\t\t\t}}>\r\n\t\t\t\t\t{loading.includes('payment') ?\r\n\t\t\t\t\t\t \r\n\t\t\t\t }\r\n\r\n\t\t\t\t{isMobile && {\r\n\t\t\t\t\thandleFinish()\r\n\t\t\t\t}}>\r\n\t\t\t\t\t{loading.includes('payment') ?\r\n\t\t\t\t\t\t \r\n\t\t\t\t }\r\n\t\t\t \r\n\r\n\t\t\t handleCloseDialogCoupons()}\r\n\t\t\t\taria-labelledby='coupons-list-dialog'\r\n\t\t\t\topen={visibleCoupons}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tfullWidth={true}\r\n\t\t\t>\r\n\t\t\t\t setDeliveryDateSelectionOpened(false)}\r\n\t\t\t\taria-labelledby='delivery-date-selection'\r\n\t\t\t\topen={deliveryDateSelectionOpened}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tPaperProps={{\r\n\t\t\t\t\tstyle: {\r\n\t\t\t\t\t\twidth: '25rem',\r\n\t\t\t\t\t\tborderRadius: '.75rem'\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n\t\t\t\tfullWidth={false}\r\n\t\t\t>\r\n\t\t\t\t setDeliveryDateSelectionOpened(false)}\r\n\t\t\t\t/>\r\n\t\t\t\r\n\r\n\t\t\t {\r\n\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t}}\r\n\t\t\t\tclassName='addresses-postal-code address-root-dialog'\r\n\t\t\t\taria-labelledby='addresses-postal-code-dialog'\r\n\t\t\t\topen={addressPostalCodeRequest}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tfullScreen={false}\r\n\t\t\t\tfullWidth={false}\r\n\t\t\t>\r\n\t\t\t\t\r\n\t\t\t\t
Informe o CVV do cartão selecionado
\r\n\r\n\t\t {\r\n\t\t\tconst { keyCode } = event\r\n\r\n\t\t\tif (!(\r\n\t\t\t\t(keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) ||\r\n\t\t\t\tkeyCode === 8 ||\r\n\t\t\t\tkeyCode === 9 || \r\n\t\t\t\tkeyCode === 46 || \r\n\t\t\t\tkeyCode === 37 || \r\n\t\t\t\tkeyCode === 39)) { \r\n\t\t\t\tevent.preventDefault()\r\n\t\t\t}\r\n\t\t} } onChange={ (event) => {\r\n\t\t\tconst { value } = event.target\r\n\r\n\t\t\thandleCVV(value)\r\n\t\t} } />\r\n\r\n\t\t\r\n\tCartões cadastrados
\r\n\r\nCADASTRAR CARTÃO
\r\n\t\t\t\r\n
\r\n \r\n {content && content.text} \r\n
\r\n {content && content.title}
\r\n\r\n
\r\n {title}
\r\n\t\t\tSacola
}\r\n\t\t\r\n\t\t\t\t\t\t
:\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{getFormatedDate()}\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\tData agendada
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t setDeliveryDateSelectionOpened(true)\r\n\t\t\t\t\t\t\t}>\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t setDeliveryDateSelectionOpened(true)\r\n\t\t\t\t\t\t}>Selecione \r\n\t\t\t\t\t
)}\r\n\r\n\t\t\t\t{mode === 'simple' ? null : (modalityId === 4 ?\r\n\t\t\t\t\tData agendada
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t
:\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\tLocal de entrega
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tsetUserHistory({\r\n\t\t\t\t\t\t\t\t\tback: 'cart'\r\n\t\t\t\t\t\t\t\t})\r\n\r\n\t\t\t\t\t\t\t\tif (!accessToken) {\r\n\t\t\t\t\t\t\t\t\tsetAddressPostalCodeRequest(true)\r\n\t\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\thistory.push(`/addresses${URLParameters}`)\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t
)}\r\n\r\n\t\t\t\t{(mode === 'simple' || (above ? !above : !aboveCart)) ? null :\r\n\t\t\t\t\t(!userCard || !userCard.brand ? \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\tLembrando que você vai retirar em:
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t handleCards()}>\r\n\t\t\t\t\t\t\tSelecione uma forma de pagamento\r\n\t\t\t\t\t\t\t handleCards()}>\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t
: \r\n\t\t\t\t\t
: <>}\r\n\r\n\t\t\t\t{cartTotal && modalityId ? \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{maskCpf(userCpf)}\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\tCPF na nota
\r\n\t\t\t\t\t\tFaltam apenas {calcFreeShipping()}
para ganhar entrega grátis!
Oba! Você ganhou entrega grátis!
)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t {\r\n\t\t\t\t\tif (contentOverlayMotion) {\r\n\t\t\t\t\t\tsetContentOverlayMotion(false)\r\n\t\t\t\t\t\tsetCVVReady(false)\r\n\t\t\t\t\t}\r\n\t\t\t\t}} />\r\n\r\n\t\t\t\t{CVVReady ? \r\n\t\t \r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const Wrapper = styled.div`\r\n\tfont-family: ${(props) => props.theme.newFontFamily};\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tpadding: 0;\r\n\tmax-height: calc(100% - (8rem + 4rem));\r\n\tmin-height: calc(100% - (8rem + 4rem));\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\toverflow-y: auto;\r\n`;\r\n\r\nexport const ListWrapper = styled.ul`\r\n\tlist-style: inside none;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex: 0;\r\n\tflex-direction: column;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tpadding-bottom: 2.5rem;\r\n\twidth: 100%;\r\n`;\r\n\r\nexport const ListItemWrapper = styled.li`\r\n\tflex: 1;\r\n\tpadding: 0 1.5rem;\r\n\tmargin: 0;\r\n\tmin-width: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmargin-bottom: 1.875rem;\r\n\tbox-sizing: border-box;\r\n\tmax-width: 100%;\r\n\r\n\t&:last-child {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n\r\n\t@media (min-width: 50rem) {\r\n\t\tpadding: 0.4rem;\r\n\t\tjustify-content: space-between;\r\n\t}\r\n`;\r\n\r\nexport const MessageWrapper = styled.div``;\r\n\r\nexport const H1 = styled.h1`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.invertedPrimaryColor) ||\r\n\t\t\"#333\"};\r\n\tfont-size: 1.75rem;\r\n\tline-height: 2rem;\r\n\tpadding: 0 1.25rem;\r\n\tmargin: 0;\r\n\tmargin-bottom: 3.75rem;\r\n\r\n\t> span {\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.invertedPrimaryColor) ||\r\n\t\t\t\"#333\"};\r\n\t}\r\n`;\r\n\r\nexport const H2 = styled.h2`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\"#000\"};\r\n\tfont-size: 1rem;\r\n\tpadding: 0 1.5rem;\r\n\tfont-weight: 700;\r\n\r\n\t@media (min-width: 50rem) {\r\n\t\tmargin: 0 0 1rem 0;\r\n\t\tpadding: 0;\r\n\t\twidth: 100%;\r\n\t}\r\n`;\r\n\r\nexport const ProductWrapper = styled.div`\r\n\tflex: 1;\r\n\tmargin: 0 0.25rem 0 0;\r\n\tmin-width: 70%;\r\n\tmax-width: 70%;\r\n\r\n\t> div {\r\n\t\t&.additionals {\r\n\t\t\tpadding: 20px 0;\r\n\r\n\t\t\t> div {\r\n\t\t\t\t&.additionals-double {\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tflex-direction: row;\r\n\t\t\t\t\tjustify-content: space-between;\r\n\t\t\t\t\tpadding: 3px 0;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t> p {\r\n\t\t\t\t\t&.additional {\r\n\t\t\t\t\t\tfont-size: 0.875rem;\r\n\t\t\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\t\t\t\t\t\"#000\"};\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t&.additional-value {\r\n\t\t\t\t\t\tfont-size: 0.875rem;\r\n\t\t\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\t\t\t\t\t\"#000\"};\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t&.additional-free {\r\n\t\t\t\t\t\tfont-size: 0.875rem;\r\n\t\t\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general.textEighthColor) ||\r\n\t\t\t\t\t\t\t\"#000\"};\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t> p {\r\n\t\t&.name {\r\n\t\t\tfont-weight: 600;\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t}\r\n\r\n\t\t&.description {\r\n\t\t\tmargin-bottom: 0.938rem;\r\n\t\t\tfont-size: 0.875rem;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t}\r\n\r\n\t\t&.value {\r\n\t\t\tmargin-top: 0.2rem;\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tfont-weight: bold;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t}\r\n\r\n\t\t&.packPrice {\r\n\t\t\tmargin-top: 0.2rem;\r\n\t\t\tfont-size: 0.8rem;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t}\r\n\r\n\t\t&.acompanhamentos {\r\n\t\t\tfont-size: 0.75rem;\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const ActionsWrapper = styled.div`\r\n\tflex: 1;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: flex-end;\r\n\talign-items: flex-end;\r\n\tmin-width: 30%;\r\n\tmax-width: 10rem;\r\n`;\r\n\r\nexport const Span = styled.span``;\r\n\r\nexport const SummaryWrapper = styled.div`\r\n\tpadding: 1rem 1.5rem;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\tbox-sizing: border-box;\r\n\tflex: none;\r\n\tborder-bottom: 0.15rem solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.grey00) ||\r\n\t\t\t\"#EEE\"};\r\n\tborder-top: 0.15rem solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.grey00) ||\r\n\t\t\t\"#EEE\"};\r\n\r\n\t> p {\r\n\t\tline-height: 1rem;\r\n\t\tfont-size: 1rem;\r\n\r\n\t\t&.subtotal {\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tmargin-bottom: 0.625rem;\r\n\t\t}\r\n\r\n\t\t&.discount {\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tmargin-bottom: 0.625rem;\r\n\t\t\tfont-weight: bold;\r\n\r\n\t\t\t> span {\r\n\t\t\t\t&.value {\r\n\t\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\t\t\"#000\"};\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.fee {\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tmargin-bottom: 1.25rem;\r\n\t\t}\r\n\r\n\t\t&.total {\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tfont-weight: 700;\r\n\t\t\tfont-size: 1.25rem;\r\n\t\t\tline-height: 1.125rem;\r\n\r\n\t\t\t> span {\r\n\t\t\t\tfont-size: 1.25rem;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t> span {\r\n\t\t\tflex: 1;\r\n\r\n\t\t\t&.value {\r\n\t\t\t\talign-self: flex-end;\r\n\t\t\t\tflex: none;\r\n\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\t\"#000\"};\r\n\t\t\t\tfont-size: 1rem;\r\n\r\n\t\t\t\t&.total {\r\n\t\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\t\t\"#000\"};\r\n\t\t\t\t\tfont-weight: 700;\r\n\t\t\t\t\tfont-size: 1.25rem;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: 50rem) {\r\n\t\twidth: 100%;\r\n\t\tpadding: 1.5rem 0;\r\n\t\tmargin-bottom: 1rem;\r\n\t\tmax-width: none;\r\n\t}\r\n`;\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.invertedPrimaryColor) ||\r\n\t\t\"#333\"};\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont-size: 1rem;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n\tbackground: none;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n`;\r\n\r\nexport const QuantityControlWrapper = styled.div`\r\n\tborder: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.greyMedium) ||\r\n\t\t\t\"#333\"}\r\n\t\t0.125rem solid;\r\n\tborder-radius: 1.5rem;\r\n\tmax-height: 3rem;\r\n\tmin-height: 3rem;\r\n\talign-self: flex-end;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tjustify-content: space-between;\r\n\talign-items: center;\r\n\tflex-direction: row;\r\n\twidth: 5.25rem;\r\n\theight: 2.25rem;\r\n\tpadding: 0.5rem;\r\n\tmin-height: auto;\r\n\r\n\t> button {\r\n\t\tflex: 1;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\"#000\"};\r\n\t\tfont-size: 0.875rem;\r\n\t\ttext-align: start;\r\n\t\tcursor: pointer;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\r\n\t\t&:last-of-type {\r\n\t\t\ttext-align: end;\r\n\t\t}\r\n\r\n\t\t> span {\r\n\t\t\t&.icon {\r\n\t\t\t\t> svg {\r\n\t\t\t\t\tpadding-top: 0.5rem;\r\n\r\n\t\t\t\t\tpath {\r\n\t\t\t\t\t\tfill: ${(props) =>\r\n\t\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\t\t\t\t\"#000\"};\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t> span {\r\n\t\tflex: 1;\r\n\t\tmargin: 0 auto;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\"#000\"};\r\n\t\tfont-size: 1rem;\r\n\t\tline-height: 1.125rem;\r\n\t\theight: 1.125rem;\r\n\t\tfont-weight: bold;\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\t@media (min-width: 50rem) {\r\n\t\twidth: 5.25rem;\r\n\t\theight: 2.25rem;\r\n\t\tpadding: 0.25rem 0.5rem;\r\n\t\tborder: 0.15rem solid\r\n\t\t\t${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.grey01) ||\r\n\t\t\t\t\"#DDD\"};\r\n\t\tmin-height: auto;\r\n\t}\r\n`;\r\n\r\nexport const EmptyBasketContainer = styled.div`\r\n\tborder-bottom: 1px solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\"#CCC\"};\r\n\tflex: 1;\r\n\twidth: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tpadding: 1rem;\r\n\tbox-sizing: border-box;\r\n\r\n\tsvg {\r\n\t\twidth: 9.5rem;\r\n\r\n\t\tpath {\r\n\t\t\tfill: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\"#333\"};\r\n\t\t\tstroke: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\"#333\"};\r\n\t\t}\r\n\t}\r\n\r\n\th4 {\r\n\t\tmargin: 1rem 0 0;\r\n\t\tfont-weight: 700;\r\n\t\ttext-align: center;\r\n\t}\r\n\r\n\tp {\r\n\t\tmargin: 0.25rem 0 0 0;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\t\"#000\"};\r\n\t\ttext-align: center;\r\n\t}\r\n`;\r\n\r\nexport const GreetingsTitle = styled.h2`\r\n\tfont-size: 1.5rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\"#000\"};\r\n\tfont-weight: 700;\r\n\tmargin: 1.5rem 1.5rem 2rem 1.5rem;\r\n\r\n\tspan {\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\"#000\"};\r\n\t}\r\n`;\r\n\r\nexport const SimpleQuantity = styled.span`\r\n\tborder: 2px solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\"#CCC\"};\r\n\twidth: 2.5rem;\r\n\theight: 2.5rem;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tborder-radius: 16px;\r\n`;\r\nexport const Space = styled.div`\r\n\theight: 5rem;\r\n\twidth: 100%;\r\n`;\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n padding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmin-width: 100%;\r\n\tflex: 1;\r\n\tpadding: 0 1.25rem;\r\n\tpadding-bottom: 1.25rem;\r\n justify-content: center;\r\n\r\n\t@media (min-width: 50rem) {\r\n\t\tpadding: 0;\r\n\t\tpadding-bottom: 1.25rem;\r\n\t}\r\n`\r\nexport const Div = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tborder-bottom: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'};\r\n`\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n\tfont-size: 1rem;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n\tpadding: .7rem;\r\n\ttext-align: center;\r\n\tfont-size: .9rem;\r\n\tmargin: 0;\r\n\tbox-sizing: border-box;\r\n\tfont-weight: bold;\r\n`\r\n\r\nexport const Strong = styled.strong``\r\n","import React, {\r\n\tuseEffect\r\n} from 'react'\r\nimport Selo from '../../assets/icone_menu_fidelidade.png'\r\n\r\nimport {\r\n\tDiv,\r\n\tParagraph,\r\n\tWrapper\r\n} from './styles'\r\n\r\nconst Text = ({\r\n\tpoints\r\n}) => {\r\n\treturn <>\r\n\t\t\r\n\t\t \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Content = styled.div`\r\n \tdisplay: flex;\r\n\tpadding: .1rem 1rem;\r\n\talign-items: center;\r\n\tbackground-color: #E3FFF0;\r\n\tborder-radius: 12px;\r\n\tcolor: #04A74D;\r\n\tgap: 8px;\r\n\tmargin: auto;\r\n\tmargin-top: 2rem;\r\n\tbox-sizing: border-box;\r\n\t& svg {\r\n\t\twidth: 18px;\r\n\t}\r\n`\r\nexport const CashbackText = styled.span`\r\n\tfont-size: 14px;\r\n`\r\n","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgCashbackGreen = function SvgCashbackGreen(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 38,\n height: 45,\n viewBox: \"0 0 38 45\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M19.6333 15.5512L14.5244 10.4651H26.3889V17.7907H29.5556V7.32558H14.5244L19.6333 2.23953L17.3956 0L8.44444 8.89535L17.3956 17.7907L19.6333 15.5512ZM19 26.1628C17.7474 26.1628 16.5229 26.5311 15.4814 27.221C14.4399 27.911 13.6281 28.8916 13.1488 30.039C12.6694 31.1863 12.544 32.4488 12.7884 33.6668C13.0327 34.8849 13.6359 36.0037 14.5217 36.8818C15.4074 37.76 16.5359 38.358 17.7644 38.6003C18.993 38.8426 20.2664 38.7182 21.4237 38.243C22.5809 37.7677 23.5701 36.9629 24.266 35.9303C24.9619 34.8977 25.3333 33.6837 25.3333 32.4419C25.3333 30.7765 24.6661 29.1794 23.4783 28.0019C22.2906 26.8243 20.6797 26.1628 19 26.1628ZM0 19.8837V45H38V19.8837M33.7778 36.6279C32.658 36.6279 31.584 37.0689 30.7922 37.854C30.0004 38.639 29.5556 39.7037 29.5556 40.814H8.44444C8.44444 39.7037 7.9996 38.639 7.20778 37.854C6.41596 37.0689 5.34203 36.6279 4.22222 36.6279V28.2558C5.34203 28.2558 6.41596 27.8148 7.20778 27.0297C7.9996 26.2447 8.44444 25.18 8.44444 24.0698H29.5556C29.5556 25.18 30.0004 26.2447 30.7922 27.0297C31.584 27.8148 32.658 28.2558 33.7778 28.2558V36.6279Z\",\n fill: \"#04A74D\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgCashbackGreen, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/cashback_green.ca692dcb.svg\";\nexport { ForwardRef as ReactComponent };","import React, {\r\n useEffect, useState\r\n} from 'react'\r\n\r\nimport {\r\n Content,\r\n CashbackText\r\n} from './styles'\r\n\r\nimport { ReactComponent as CashbackIcon } from '../../assets/icons/cashback_green.svg';\r\n\r\nexport function CashbackValue(props) {\r\n const {\r\n points,\r\n cartTotal\r\n } = props;\r\n\r\n const calcPercentage = (percent, total) => ((percent/ 100) * total).toFixed(2).replace('.', ',');\r\n const [value, setValue] = useState(calcPercentage(points, cartTotal));\r\n\r\n useEffect(() => {\r\n setValue(calcPercentage(points, cartTotal));\r\n }, [points, cartTotal])\r\n\r\n return (\r\n \r\n Cashback de R${value} neste pedido \r\n \r\n )\r\n}\r\n","import React, {\r\n\tuseEffect,\r\n\tuseMemo,\r\n\tuseState\r\n} from 'react'\r\n\r\nimport {\r\n\tCustomIcon\r\n} from '../../components'\r\nimport history from '../../../history'\r\n\r\nimport {\r\n\tcalculateCartTotal\r\n} from '../../../domain/helpers'\r\n\r\nimport { ReactComponent as EmptyBasketIcon } from '../../assets/icons/icon_empty_basket.svg'\r\n\r\nimport {\r\n\tWrapper,\r\n\tListWrapper,\r\n\tListItemWrapper,\r\n\tH2,\r\n\tProductWrapper,\r\n\tActionsWrapper,\r\n\tSummaryWrapper,\r\n\tParagraph,\r\n\tSpan,\r\n\tButton,\r\n\tQuantityControlWrapper,\r\n\tEmptyBasketContainer,\r\n\tGreetingsTitle,\r\n\tSimpleQuantity\r\n} from './styles'\r\nimport { LoyaltyPoints } from '../LoyaltyPoints'\r\nimport { CashbackValue } from '../Cashback/Cashback'\r\nimport { HAS_CASHBACK, HAS_LOYALTY } from '../../../config'\r\nimport { calculatePackPrice } from '../../../domain/helpers/products/CalculatePackPrice'\r\n\r\nconst calculateQuantityTotal = (items) => {\r\n\tconst total = items && items.reduce((acc, item) => acc + item.quantity, 0)\r\n\r\n\treturn total\r\n}\r\n\r\nconst QuantityControl = ({\r\n\tquantity,\r\n\tuuid,\r\n\tname,\r\n\tvalue,\r\n\thandleQuantity,\r\n\tdataTotal,\r\n\tURLParameters = ''\r\n}) => {\r\n\treturn \r\n\t\t\r\n\t\t{quantity}\r\n\t\t\r\n\t \r\n}\r\n\r\nexport function List(props) {\r\n\tconst {\r\n\t\tdata,\r\n\t\tdeliveryFee,\r\n\t\tstoreName,\r\n\t\thandleQuantity: propsHandleQuantity,\r\n\t\tmodalityId,\r\n\t\tcoupon,\r\n\t\tisQuantityEditable = true,\r\n\t\tuserName,\r\n\t\tmode,\r\n\t\tsetProductsRemoved,\r\n\t\tURLParameters,\r\n\t\tsetAbove,\r\n\t\thandleGTM,\r\n\t\tstoreLoyaltyPoints,\r\n\t\tpoints,\r\n\t\tminValueLoyaltyRequired,\r\n\t\tminForFreeShipping\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tvalue: couponValue,\r\n\t\tminValue: couponMinimumValue,\r\n\t\ttype,\r\n\t\ttypeValueModalityDelivery,\r\n\t\tvalueModalityDelivery,\r\n\t\tvalueMaxModalityDelivery,\r\n\t\tvalueMinModalityDelivery\r\n\t} = coupon\r\n\r\n\tconst [loaded, setLoaded] = useState(false)\r\n\tconst [cartSubtotalTotal, setCartSubtotalTotal] = useState(0)\r\n\tconst [cartTotal, setCartTotal] = useState(0)\r\n\tconst [itemsQuantity, setItemsQuantity] = useState(1)\r\n\tconst [percentual, setPercentual] = useState(0)\r\n\tconst [finalCupomValue, setFinalCupomValue] = useState(0)\r\n\tconst [finalPointsMinValue, setFinalPointsMinValue] = useState(0)\r\n\tconst [parsePickupFee, setParsePickupFee] = useState(0)\r\n\tconst hasCashback = JSON.parse(HAS_CASHBACK);\r\n\tconst hasLoyalty = JSON.parse(HAS_LOYALTY);\r\n\tconst parseDeliveryFee = minForFreeShipping ? (cartSubtotalTotal > minForFreeShipping ? 0 : deliveryFee) : modalityId === 4 ? deliveryFee : 0;\r\n\r\n\tuseEffect(() => {\r\n\t\tsetParsePickupFee(calculatePackPrice(data))\r\n\t}, [data])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (type !== 2 && couponValue >= calculateCartTotal(data)) {\r\n\t\t\tsetFinalCupomValue(calculateCartTotal(data))\r\n\t\t\tsetAbove(false)\r\n\t\t} else {\r\n\t\t\tsetFinalCupomValue(couponValue)\r\n\t\t\tsetAbove(true)\r\n\t\t}\r\n\t}, [couponValue, data, setAbove, type])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!loaded) {\r\n\t\t\tsetLoaded(true)\r\n\t\t}\r\n\r\n\t\tsetCartSubtotalTotal(calculateCartTotal(data))\r\n\r\n\t\tsetItemsQuantity(calculateQuantityTotal(data))\r\n\r\n\t\tif (coupon && finalCupomValue) {\r\n\t\t\tif (type === 2) {\r\n\t\t\t\tconst percentualCalculate = (calculateCartTotal(data) * finalCupomValue) / 100\r\n\t\t\t\tsetPercentual(percentualCalculate)\r\n\t\t\t\tsetCartTotal(calculateCartTotal(data) - percentualCalculate + parseDeliveryFee)\r\n\r\n\t\t\t\treturn () => ({})\r\n\t\t\t}\r\n\r\n\t\t\tsetCartTotal(calculateCartTotal(data) - finalCupomValue + parseDeliveryFee)\r\n\r\n\t\t\treturn () => ({})\r\n\t\t}\r\n\r\n\t\tif (modalityId === 2) {\r\n\t\t\tsetCartTotal(calculateCartTotal(data) + parsePickupFee)\r\n\t\t} else {\r\n\t\t\tsetCartTotal(calculateCartTotal(data) + parseDeliveryFee)\r\n\t\t}\r\n\r\n\t\treturn () => { }\r\n\t}, [\r\n\t\tdata,\r\n\t\titemsQuantity,\r\n\t\tstoreName,\r\n\t\tloaded,\r\n\t\tcouponValue,\r\n\t\tcouponMinimumValue,\r\n\t\tcartSubtotalTotal,\r\n\t\tcoupon,\r\n\t\tparseDeliveryFee,\r\n\t\ttypeValueModalityDelivery,\r\n\t\tvalueMaxModalityDelivery,\r\n\t\tvalueMinModalityDelivery,\r\n\t\tvalueModalityDelivery,\r\n\t\ttype,\r\n\t\tfinalCupomValue,\r\n\t\tdeliveryFee,\r\n\t\tparsePickupFee,\r\n\t\tmodalityId\r\n\t])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (minValueLoyaltyRequired && cartSubtotalTotal > storeLoyaltyPoints.minValue) {\r\n\t\t\tconst calc = cartSubtotalTotal / storeLoyaltyPoints.minValue\r\n\r\n\t\t\tconst [int = 0] = calc.toString().split('.').map((num) => parseInt(num));\r\n\t\t\tsetFinalPointsMinValue(int * points)\r\n\t\t}\r\n\t}, [\r\n\t\tminValueLoyaltyRequired,\r\n\t\tpoints,\r\n\t\tcartSubtotalTotal,\r\n\t\tstoreLoyaltyPoints\r\n\t])\r\n\r\n\tfunction handleQuantity(args) {\r\n\t\tpropsHandleQuantity && propsHandleQuantity(args)\r\n\r\n\t\tif (args.quantity === 0) {\r\n\t\t\tconst product = {\r\n\t\t\t\t'name': args.name,\r\n\t\t\t\t'id': args.id,\r\n\t\t\t\t'value': args.promotionalValue ? args.promotionalValue : args.value,\r\n\t\t\t\t'brand': 'Seara',\r\n\t\t\t\t'category': args.category && args.category.name,\r\n\t\t\t\t'variant': '',\r\n\t\t\t\t'quantity': args.quantity\r\n\t\t\t}\r\n\r\n\t\t\tsetProductsRemoved(product)\r\n\t\t}\r\n\t\t//GTM 3.0 - Evento de Remover/Aletrar produto do carrrinho\r\n\t\tconst dataGTM = {\r\n\t\t\t'event': `remove_to_cart`,\r\n\t\t\t'ecommerce': {\r\n\t\t\t\t'currency': 'BRL',\r\n\t\t\t\t'store': storeName,\r\n\t\t\t\t'items': [{\r\n\t\t\t\t\t'item_name': args.name,\r\n\t\t\t\t\t'item_id': args.id,\r\n\t\t\t\t\t'price': args.promotionalValue ? args.promotionalValue : args.value,\r\n\t\t\t\t\t'discount': null,\r\n\t\t\t\t\t'categoria': (args.category && args.category.name) ?? null,\r\n\t\t\t\t\t'quantity': 1\r\n\t\t\t\t}]\r\n\t\t\t}\r\n\t\t}\r\n\t\t//console.warn(dataGTM)\r\n\t\thandleGTM(dataGTM)\r\n\t}\r\n\r\n\treturn \r\n\t\t{mode === 'simple' ? null : \r\n\t\t\tOlá, {userName}
pronto para concluir
seu pedido?\r\n\t\t }\r\n\r\n\t\t{data && data.length ? \r\n\t\t\t{data.map((item, index) => {\r\n\t\t\t\tconst key = `cart-list-item-${index}`\r\n\r\n\t\t\t\tconst {\r\n\t\t\t\t\t//id,\r\n\t\t\t\t\tuuid,\r\n\t\t\t\t\tquantity,\r\n\t\t\t\t\tname,\r\n\t\t\t\t\tvalue,\r\n\t\t\t\t\tselectedAdditionals,\r\n\t\t\t\t\tpromotionalValue,\r\n\t\t\t\t\tdescription,\r\n\t\t\t\t\tdouble,\r\n\t\t\t\t\tpackPrice\r\n\t\t\t\t} = item\r\n\t\t\t\tconst valueFinalProduct = !promotionalValue ? value : parseFloat(promotionalValue)\r\n\t\t\t\tconst selectedAdditionalsGroups = selectedAdditionals && selectedAdditionals.length && selectedAdditionals.map((mappedItem) => {\r\n\t\t\t\t\tconst items = mappedItem.items || [];\r\n\t\t\t\t\tconst selectedAdditionalsMaximum = items.filter(filteredItem => filteredItem.calcType === 3)\r\n\t\t\t\t\tconst selectedAdditionalsAverage = items.filter(filteredItem => filteredItem.calcType === 2)\r\n\t\t\t\t\tconst selectedAdditionalsFixes = items.filter(filteredItem => filteredItem.calcType === 1)\r\n\r\n\t\t\t\t\tconst additionalsMaximumTotal = (selectedAdditionalsMaximum && selectedAdditionalsMaximum.length && Math.max.apply(Math, selectedAdditionalsMaximum.map((selectedAdditionalsMaximumItem) => selectedAdditionalsMaximumItem.value))) || 0\r\n\t\t\t\t\tconst additionalsAverageTotal = selectedAdditionalsAverage && selectedAdditionalsAverage.length ? (selectedAdditionalsAverage.reduce((acc, current) => Number(acc + current.value), [])) / selectedAdditionalsAverage.length : 0\r\n\t\t\t\t\tconst additionalsFixesTotal = selectedAdditionalsFixes && selectedAdditionalsFixes.length ? selectedAdditionalsFixes.reduce((acc, current) => {\r\n\t\t\t\t\t\tif (current.quantity > 1) {\r\n\t\t\t\t\t\t\treturn Number(acc + (current.value * current.quantity))\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\treturn Number(acc + current.value)\r\n\t\t\t\t\t}, []) : 0\r\n\r\n\t\t\t\t\tconst description = (mappedItem.items && mappedItem.items.map((descriptionMappedItem) => {\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\tquantity\r\n\t\t\t\t\t\t} = descriptionMappedItem\r\n\r\n\t\t\t\t\t\treturn (quantity > 1 ? `${quantity}x ${name}` : name).trim();\r\n\t\t\t\t\t})).filter(filteredItem => filteredItem.trim())\r\n\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\tvalue: additionalsMaximumTotal + additionalsAverageTotal + additionalsFixesTotal,\r\n\t\t\t\t\t\tdescription: description.join(', ')\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\r\n\t\t\t\tconst selectedAdditionalsGroupsTotal = (selectedAdditionalsGroups && selectedAdditionalsGroups.length && selectedAdditionalsGroups.reduce((acc, current) => Number(acc + current.value), [])) || 0\r\n\t\t\t\tconst selectedAdditionalsGroupsDescription = (selectedAdditionalsGroups && selectedAdditionalsGroups.length ? selectedAdditionalsGroups.reduce((acc, current) => `${acc ? `${acc}, ` : ''}${current.description}`, '') : '') || 0\r\n\t\t\t\tconst total = quantity * (valueFinalProduct + (selectedAdditionalsGroupsTotal && selectedAdditionalsGroupsTotal))\r\n\t\t\t\tconst finalDescription = selectedAdditionals && selectedAdditionals.length ? selectedAdditionalsGroupsDescription : ''\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{name} \r\n\t\t\t\t\t\t\t{(finalDescription || description) && !double ? {finalDescription || description} : null}\r\n\t\t\t\t\t\t\t{double && Embalagem: {packPrice > 0 ? `R$ ${packPrice && packPrice.toFixed(2).replace('.', ',')}` : 'R$ 0,00'} }\r\n\t\t\t\t\t\t\t {`R$ ${total && total.toFixed(2).replace('.', ',')}`} \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{isQuantityEditable ?\r\n\t\t\t\t\t\t\t\t{quantity} \r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t)\r\n\t\t\t})}\r\n\t\t : null}\r\n\r\n\t\t{!(data && data.length) ?\r\n\t\t\t\r\n\t\t\t\t : null\r\n\t\t}\r\n\r\n\t\t{data && data.length ?\r\n\t\t\t\r\n\t\t\t\tSubtotal: {`R$ ${cartSubtotalTotal.toFixed(2).replace('.', ',')}`} \r\n\t\t\t\t{cartSubtotalTotal && finalCupomValue ? Desconto: {`-R$ ${type === 2 ? percentual.toFixed(2).replace('.', ',') : finalCupomValue.toFixed(2).replace('.', ',')}`} : null}\r\n\t\t\t\t\r\n\t\t\t\t\t{modalityId === 4 ? 'Taxa de entrega' : 'Taxa de retirada'}:\r\n\t\t\t\t\t{(modalityId === 4) ? `R$ ${(parseDeliveryFee.toFixed(2).replace('.', ','))}` : `R$ ${(parsePickupFee.toFixed(2).replace('.', ','))}`}\r\n\t\t\t\t \r\n\t\t\t\tTOTAL: {`R$ ${(cartTotal).toFixed(2).replace('.', ',')}`} \r\n\t\t\t\t{(points && hasCashback) ? (\r\n\t\t\t\t\t \r\n\t\t\t: null}\r\n\r\n\t\t{\r\n\t\t\thasLoyalty && (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{minValueLoyaltyRequired && storeLoyaltyPoints && points > 0 && cartSubtotalTotal > storeLoyaltyPoints.minValue ? \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n padding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmin-width: 100%;\r\n\tflex: 1;\r\n\tpadding: 0 1.25rem;\r\n\tpadding-bottom: 1.25rem;\r\n\tmin-width: calc(100% - 1.5rem); \r\n\r\n\t@media (min-width: 50rem) {\r\n\t\tpadding: 0;\r\n\t\tpadding-bottom: 1.25rem;\r\n\t}\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n color: #fff;\r\n font-size: 1rem;\r\n flex: 1;\r\n min-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n box-sizing: border-box;\r\n border: #fff .063rem solid;\r\n border-radius: .938rem;\r\n`\r\n\r\nexport const Strong = styled.strong``\r\n","import React, {\r\n\tuseEffect\r\n} from 'react'\r\n\r\nimport {\r\n\tParagraph,\r\n\tStrong,\r\n\tWrapper\r\n} from './styles'\r\n\r\nconst Text = ({\r\n\tmodalityId,\r\n\tminimumValue\r\n}) => {\r\n\tif (modalityId === 2 && minimumValue) {\r\n\t\treturn {`O pedido mínimo para esta loja é de `}{`R$ ${minimumValue.toFixed(2).replace('.', ',')}`}{`, não inclusas as taxas.`} \r\n\t}\r\n\r\n\tif (modalityId === 4 && minimumValue) {\r\n\t\treturn {`O pedido mínimo para esta loja é de `}{`R$ ${minimumValue.toFixed(2).replace('.', ',')}`}{`, não inclusa a taxa de entrega.`} \r\n\t}\r\n\r\n\treturn null\r\n}\r\n\r\nexport function MinimumValue(props) {\r\n\tconst {\r\n\t\tminimumValue,\r\n\t\tmodalityId,\r\n\t\tcartTotal\r\n\t} = props\r\n\tconst textProps = {\r\n\t\tminimumValue,\r\n\t\tmodalityId\r\n\t}\r\n\r\n\tuseEffect(() => {\r\n\t\treturn () => { }\r\n\t}, [])\r\n\r\n\treturn cartTotal >= minimumValue ?\r\n\t\tnull :\r\n\t\t\r\n\t\t\t \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tfont-family: ${props => props.theme.newFontFamily};\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tpadding: 2.5rem 1.25rem;\r\n\tpadding-bottom: 1.875rem;\r\n\tflex: 1;\r\n\tborder-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#EFEFEF' } .063rem solid;\r\n\r\n\t> h2 {\r\n\t\tmargin-bottom: .625rem;\r\n\t}\r\n\r\n\t> p {\r\n\t\tmargin-bottom: 1.25rem;\r\n\t}\r\n`\r\n\r\nexport const TimeButton = styled.button`\r\n\tmargin: 0;\r\n\ttransition: all .25s ease-in;\r\n\tmin-width: 5rem;\r\n\tmargin-right: .625rem;\r\n\tmin-height: 3.125rem;\r\n\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#f2f2f2' };\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333' };\r\n\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#999' } .063rem solid;\r\n\tborder-radius: .625rem;\r\n\tflex: 1;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tflex-direction: column;\r\n\tpadding: .313rem .625rem;\r\n\tmax-width: 5rem;\r\n\r\n\t* {\r\n\t\ttransition: all .25s ease-in;\r\n\t}\r\n\r\n\t&:last-child {\r\n\t\tmargin-right: 0;\r\n\t}\r\n\r\n\t&.active {\r\n\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' } .063rem solid;\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' };\r\n\t}\r\n`\r\n\r\nexport const DayButton = styled.button`\r\n\tmargin: 0;\r\n\ttransition: all .25s ease-in;\r\n\tmin-width: 5rem;\r\n\tmargin-right: .625rem;\r\n\tpadding: 0;\r\n\tmin-height: 3.125rem;\r\n\r\n\t* {\r\n\t\ttransition: all .25s ease-in;\r\n\t}\r\n\r\n\t&:last-child {\r\n\t\tmargin-right: 0;\r\n\t}\r\n\r\n\t&.active {\r\n\t\t> span.date {\r\n\t\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' } .063rem solid;\r\n\t\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' };\r\n\r\n\t\t\t> h3 {\r\n\t\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#999' };\r\n\t\t\t}\r\n\r\n\t\t\t> p {\r\n\t\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#333' };\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t> span.date {\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#f2f2f2' };\r\n\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333' };\r\n\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#999' } .063rem solid;\r\n\t\tborder-radius: .625rem;\r\n\t\tflex: 1;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tflex-direction: column;\r\n\t\tpadding: .313rem .625rem;\r\n\r\n\t\t> h3 {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#999' };\r\n\t\t\tfont-size: .75rem;\r\n\t\t\ttext-transform: uppercase;\r\n\t\t\tfont-weight: normal;\r\n\t\t\tline-height: 1rem;\r\n\t\t\tmargin-bottom: .313rem;\r\n\t\t}\r\n\r\n\t\t> p {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tfont-weight: bold;\r\n\t\t\tline-height: .875rem;\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const DatesWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex: 1;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex-direction: column;\r\n\tposition: relative;\r\n\tmin-width: 100%;\r\n max-width: 100%;\r\n\r\n\t> div {\r\n\t\tdisplay: flex;\r\n\t\tflex: 1;\r\n\t\tjustify-content: flex-start;\r\n\t\talign-items: flex-start;\r\n\t\tflex-direction: row;\r\n\t\tposition: relative;\r\n\t\tmin-width: 100%;\r\n\t\toverflow: hidden;\r\n\t\toverflow-x: scroll;\r\n\t\tmax-width: 100%;\r\n\r\n\t\t&::-webkit-scrollbar {\r\n\t\t\twidth: 0 !important\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const Span = styled.span``\r\n\r\nexport const Paragraph = styled.p`\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n\tfont-size: 1.25rem;\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n`\r\n\r\nexport const Div = styled.div``\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconFechar = function SvgIconFechar(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 7,\n height: 12,\n viewBox: \"0 0 7 12\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"\\\\xCDcone_Expandir_Fechar\",\n \"data-name\": \"\\\\xCDcone / Expandir / Fechar\",\n transform: \"translate(0 12) rotate(-90)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path\",\n d: \"M11.707.293a1,1,0,0,1,.08,1.32l-.08.1-5,5a1.006,1.006,0,0,1-1.319.08l-.1-.08-5-5a1.008,1.008,0,0,1,0-1.42A.994.994,0,0,1,1.612.213l.1.08L6,4.582,10.288.293a.994.994,0,0,1,1.319-.08Z\",\n fill: \"#191750\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconFechar, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_fechar.eb02d3f0.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n position: relative;\r\n\tpadding-top: 6.5rem;\r\n\tbox-sizing: border-box;\r\n\tmax-height: 100%;\r\n\tmin-height: 100%;\r\n`\r\n\r\nexport const CartContainerHeader = styled.header`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: .5rem 1rem;\r\n min-height: 5.625rem;\r\n max-height: 5.625rem;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n background-color: #F7F7F7;\r\n position: fixed;\r\n\tleft: calc(100% - 20rem);\r\n\ttop: 0;\r\n\tz-index: 2;\r\n\tmin-width: 20rem;\r\n\tmax-width: 20rem;\r\n\r\n @media (min-width: 60rem) {\r\n border-left: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: .4rem;\r\n }\r\n\r\n &:before {\r\n content: '';\r\n border-bottom: 16px solid transparent;\r\n border-right: 16px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n border-top: 16px solid transparent;\r\n position: absolute;\r\n left: -16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:after {\r\n content: '';\r\n border-bottom: 15px solid transparent;\r\n border-right: 15px solid #f7f7f7;\r\n border-top: 15px solid transparent;\r\n position: absolute;\r\n left: -15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n }\r\n`\r\n\r\nexport const CartStoreName = styled.span``\r\n\r\nexport const CartStoreDescription = styled.span`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n font-weight: 600;\r\n font-size: .875rem;\r\n line-height: 1.15rem;\r\n overflow: hidden;\r\n max-height: 5rem;\r\n text-overflow: ellipsis;\r\n display: flex;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n\r\n @media (min-width: 50rem) {\r\n margin: 0;\r\n }\r\n \r\n\r\n ${CartStoreName} {\r\n font-size: 1.25rem;\r\n line-height: 1.5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n`\r\n\r\nexport const CartStoreIconContainer = styled.div`\r\n width: 4rem;\r\n height: 4rem;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n img, svg {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 50%;\r\n }\r\n`\r\n\r\nexport const CartContainerContent = styled.div`\r\n background-color: #fff;\r\n padding: .8rem 1rem;\r\n\tmax-height: calc(100% - 6.5rem);\r\n\tmin-height: calc(100% - 6.5rem);\r\n`\r\n\r\nexport const CartContainerIconArrow = styled.div`\r\n padding: 0 15px;\r\n\r\n\t> svg {\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n\r\n\t\t* {\r\n\t\t\tfill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n\t\t}\r\n\t}\r\n`\r\n","import React, { useCallback, useEffect } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { ReactComponent as Arrow } from './../../assets/icon_fechar.svg'\r\n\r\nimport {\r\n Wrapper,\r\n CartContainerHeader,\r\n CartStoreDescription,\r\n CartStoreName,\r\n CartStoreIconContainer,\r\n CartContainerContent,\r\n CartContainerIconArrow\r\n} from './styles'\r\n\r\nexport function CartContainer({ \r\n logo, \r\n children, \r\n name, \r\n storeImg, \r\n cartClicked,\r\n openCart,\r\n setOpenCart,\r\n\tminimumValue,\r\n\tcartTotal,\r\n\tminForFreeShipping,\r\n\tdeliveryFee\r\n}) {\r\n\tconst resize = useCallback(() => {\r\n\t\tconst windowInnerHeight = window.innerHeight\r\n\t\tconst headerHeight = (16 * 5.625) + (1 * 16)\r\n\t\tconst buttonHeight = ((minForFreeShipping && deliveryFee !== 0 ? 28 : 16) * 5.625)\r\n\t\tconst minimumValueWarningHeight = cartTotal >= minimumValue ? 0 : 60\r\n\t\tconst wrapperHeight = windowInnerHeight - (headerHeight + buttonHeight + minimumValueWarningHeight)\r\n\t\tconst cartListHeight = windowInnerHeight - (headerHeight + buttonHeight + minimumValueWarningHeight)\r\n\t\tconst cartContentHeight = windowInnerHeight - (headerHeight + 16)\r\n\r\n\t\tconst sidebarContentQuery = document.querySelectorAll('div > aside > div > div')\r\n\t\tconst sidebarContentElement = sidebarContentQuery && sidebarContentQuery[0]\r\n\t\t\r\n\t\tif (sidebarContentElement) {\r\n\t\t\tsidebarContentElement.style.height = wrapperHeight + 'px'\r\n\t\t\tsidebarContentElement.style.minHeight = wrapperHeight + 'px'\r\n\t\t\tsidebarContentElement.style.maxHeight = wrapperHeight + 'px'\r\n\t\t}\r\n\r\n\t\tconst cartListQuery = document.querySelectorAll('#cart-list')\r\n\t\tconst cartListElement = cartListQuery && cartListQuery[0]\r\n\t\t\r\n\t\tif (cartListElement) {\r\n\t\t\tcartListElement.style.height = cartListHeight + 'px'\r\n\t\t\tcartListElement.style.minHeight = cartListHeight + 'px'\r\n\t\t\tcartListElement.style.maxHeight = cartListHeight + 'px'\r\n\t\t}\r\n\r\n\t\tconst cartContentQuery = document.querySelectorAll('#cart-content')\r\n\t\tconst cartContentElement = cartContentQuery && cartContentQuery[0]\r\n\t\t\r\n\t\tif (cartContentElement) {\r\n\t\t\tcartContentElement.style.height = cartContentHeight + 'px'\r\n\t\t\tcartContentElement.style.minHeight = cartContentHeight + 'px'\r\n\t\t\tcartContentElement.style.maxHeight = cartContentHeight + 'px'\r\n\t\t}\r\n\t}, [\r\n\t\tcartTotal,\r\n\t\tminimumValue,\r\n\t\tminForFreeShipping,\r\n\t\tdeliveryFee\r\n\t])\r\n\r\n\tuseEffect(() => {\r\n\t\twindow.addEventListener('resize', resize)\r\n\r\n\t\tresize()\r\n\r\n\t\treturn () => {\r\n\t\t\twindow.removeEventListener('resize', resize)\r\n\t\t}\r\n\t}, [\r\n\t\tresize\r\n\t])\r\n\r\n return (\r\n \r\n \r\n {\r\n cartClicked()\r\n setOpenCart(openCart ? false : true)\r\n }}>\r\n \r\n \r\n Seu pedido em: {name} \r\n \r\n \r\n 
\r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n )\r\n}\r\n\r\nCartContainer.propTypes = {\r\n\tlogo: PropTypes.string,\r\n children: PropTypes.node,\r\n name: PropTypes.string,\r\n storeImg: PropTypes.string,\r\n cartClicked: PropTypes.func,\r\n openCart: PropTypes.bool,\r\n setOpenCart: PropTypes.func,\r\n\tminimumValue: PropTypes.number,\r\n\tcartTotal: PropTypes.number,\r\n\tminForFreeShipping: PropTypes.number,\r\n\tdeliveryFee: PropTypes.number\r\n}\r\n","var _path, _path2, _path3, _path4;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconContactUs = function SvgIconContactUs(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 30,\n height: 29,\n viewBox: \"0 0 30 29\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.058 14.9341C15.8864 14.9341 16.558 14.2625 16.558 13.4341C16.558 12.6057 15.8864 11.9341 15.058 11.9341C14.2296 11.9341 13.558 12.6057 13.558 13.4341C13.558 14.2625 14.2296 14.9341 15.058 14.9341Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M21.058 14.9341C21.8864 14.9341 22.558 14.2625 22.558 13.4341C22.558 12.6057 21.8864 11.9341 21.058 11.9341C20.2296 11.9341 19.558 12.6057 19.558 13.4341C19.558 14.2625 20.2296 14.9341 21.058 14.9341Z\",\n fill: \"#F27C25\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M9.058 14.9341C9.88643 14.9341 10.558 14.2625 10.558 13.4341C10.558 12.6057 9.88643 11.9341 9.058 11.9341C8.22957 11.9341 7.558 12.6057 7.558 13.4341C7.558 14.2625 8.22957 14.9341 9.058 14.9341Z\",\n fill: \"#F27C25\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.862 0C6.653 0 0 5.988 0 13.375C0.0239182 15.2965 0.480554 17.1878 1.33597 18.9085C2.19139 20.6292 3.42359 22.135 4.941 23.314L2.972 28.237L10.9 26.255C12.1953 26.5827 13.5259 26.7506 14.862 26.755C23.07 26.755 29.724 20.767 29.724 13.38C29.724 5.993 23.07 0 14.862 0ZM14.862 25.265C13.6481 25.261 12.4392 25.1092 11.262 24.813L10.902 24.724L10.542 24.814L5.432 26.09L6.321 23.866L6.728 22.849L5.876 22.159C4.53395 21.1163 3.44288 19.7859 2.68312 18.2657C1.92337 16.7455 1.51429 15.0742 1.486 13.375C1.486 6.82 7.486 1.486 14.861 1.486C22.236 1.486 28.237 6.82 28.237 13.375C28.237 19.93 22.237 25.265 14.862 25.265Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconContactUs, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_contact_us.e91cfadb.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 0 1.5rem 1.5rem;\r\n border-bottom: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'};\r\n\r\n @media (min-width: 50rem) {\r\n padding: 0;\r\n border-bottom: 0 none;\r\n }\r\n`\r\n\r\nexport const CouponTitle = styled.h3`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n min-width: 100%;\r\n margin: 1rem 0;\r\n`\r\n\r\nexport const CouponForm = styled.form`\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n\r\n button {\r\n width: auto;\r\n height: 3rem;\r\n cursor: pointer;\r\n }\r\n`\r\n\r\nexport const CouponInputContainer = styled.div`\r\n position: relative;\r\n flex: 0 1 70%;\r\n display: flex;\r\n align-items: center;\r\n margin: 0 1rem 0 0;\r\n\r\n input {\r\n flex: 1;\r\n padding: .5rem .5rem .5rem 2.75rem;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#EEE' };\r\n border: 0.15rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC' };\r\n min-height: 3rem;\r\n max-height: 3rem;\r\n box-sizing: border-box;\r\n\t\tfont-size: 1rem;\r\n\r\n\t\t&::-webkit-input-placeholder { \r\n\t\t\tfont-size: .8rem;\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n\t\t}\r\n }\r\n\r\n svg {\r\n position: absolute;\r\n left: .5rem;\r\n width: 1.75rem;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' };\r\n stroke: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' };\r\n }\r\n }\r\n`\r\n\r\nexport const ShowCouponsLink = styled.a`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n flex: 1;\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n text-decoration-thickness: 1.5px;\r\n cursor: pointer;\r\n min-width: 100%;\r\n text-align: center;\r\n`\r\n\r\nexport const Notification = styled.div`\r\n border-radius: 1rem;\r\n padding: 1rem;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#EEE' };\r\n border: 0.15rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC' };\r\n min-height: 3rem;\r\n max-height: 3rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333' };\r\n margin: 1rem 0;\r\n\r\n > img {\r\n width: 1rem;\r\n height: auto;\r\n min-width: 1rem;\r\n max-width: 1rem;\r\n min-height: auto;\r\n max-height: unset;\r\n margin-left: 1rem;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n`\r\n","import React from 'react'\r\n\r\nimport { ReactComponent as CouponIcon } from '../../assets/icons/icon_coupon.svg'\r\nimport CheckedIcon from '../../assets/icon_checked_success.png'\r\nimport { ReactComponent as IconClose } from '../../assets/icons/icon_close.svg'\r\n\r\nimport {\r\n\tButton,\r\n\tInputRounded,\r\n\tDefaultImage as Image\r\n} from '../../components'\r\n\r\nimport {\r\n\tWrapper,\r\n\tCouponForm,\r\n\tCouponTitle,\r\n\tCouponInputContainer,\r\n\tShowCouponsLink,\r\n\tNotification\r\n} from './styles'\r\n\r\nexport function Coupon(props) {\r\n\tconst {\r\n\t\thandleAddCoupon,\r\n\t\thandleRemoveCoupon,\r\n\t\thandleViewCoupons,\r\n\t\tcoupon,\r\n\t\tsetCoupon,\r\n\t\tcartCoupon\r\n\t} = props\r\n\r\n\treturn \r\n\t\t{!cartCoupon && !cartCoupon.value && Adicionar cupom de desconto? }\r\n\r\n\t\t{cartCoupon && cartCoupon.value ? <>\r\n\t\t\tCupom de desconto aplicado \r\n\r\n\t\t\tCupom cadastrado com sucesso! \r\n\t\t : <>\r\n\t\t\t{cartCoupon.error && Cupom inserido inválido! }\r\n\t\t}\r\n\t\t { event.preventDefault() }}>\r\n\t\t\t\r\n\t\t\t\t{cartCoupon.value ? {\r\n\t\t\t\t\t\tsetCoupon(event.target.value)\r\n\t\t\t\t\t}} />}\r\n\t\t\t\t \r\n\t\t\t{cartCoupon.value ? :\r\n\t\t\t\t}\r\n\t\t \r\n\t\t {\r\n\t\t\thandleViewCoupons()\r\n\t\t}}>Ver meus cupons \r\n\t \r\n}\r\n","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconLocation = function SvgIconLocation(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 14,\n height: 16,\n viewBox: \"0 0 14 16\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M7 16C4.98298 14.7386 3.20549 13.1297 1.75 11.248C0.653185 9.82177 0.0401141 8.08275 0 6.284C0 2.819 3.14 0 7 0C10.86 0 14 2.819 14 6.284C13.9606 8.08349 13.3475 9.82336 12.25 11.25C10.7954 13.132 9.01775 14.7404 7 16ZM1.75 6.284C1.7816 7.63933 2.21683 8.95441 3 10.061C4.04771 11.5362 5.34 12.8214 6.821 13.861L7 13.991L7.182 13.859C8.62606 12.8431 9.89272 11.596 10.931 10.168C11.7106 9.09334 12.1668 7.81828 12.246 6.493V6.283C12.1643 4.96897 11.5675 3.74021 10.5854 2.86344C9.60319 1.98668 8.31485 1.53268 7 1.6C5.68431 1.5316 4.3948 1.98525 3.41173 2.86233C2.42866 3.73942 1.83149 4.96906 1.75 6.284V6.284ZM5 7C5 6.60444 5.1173 6.21776 5.33706 5.88886C5.55682 5.55996 5.86918 5.30362 6.23463 5.15224C6.60009 5.00087 7.00222 4.96126 7.39018 5.03843C7.77814 5.1156 8.13451 5.30608 8.41421 5.58579C8.69392 5.86549 8.8844 6.22186 8.96157 6.60982C9.03874 6.99778 8.99913 7.39991 8.84776 7.76537C8.69638 8.13082 8.44004 8.44318 8.11114 8.66294C7.78224 8.8827 7.39556 9 7 9C6.46957 9 5.96086 8.78929 5.58579 8.41421C5.21071 8.03914 5 7.53043 5 7Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconLocation, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_location.3a523bc4.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconExpandDown = function SvgIconExpandDown(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 13,\n height: 9,\n viewBox: \"0 0 13 9\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M12.707 1.293C12.8787 1.46557 12.9816 1.69487 12.9963 1.93788C13.011 2.1809 12.9366 2.42095 12.787 2.613L12.707 2.713L7.70697 7.713C7.53381 7.88331 7.30488 7.98522 7.06244 7.99993C6.82001 8.01463 6.58044 7.94113 6.38797 7.793L6.28797 7.713L1.28797 2.713C1.10062 2.52419 0.995483 2.26898 0.995483 2.003C0.995483 1.73701 1.10062 1.4818 1.28797 1.293C1.46009 1.119 1.69037 1.01462 1.93467 0.999858C2.17898 0.985096 2.42014 1.06099 2.61197 1.213L2.71197 1.293L6.99997 5.582L11.288 1.293C11.4598 1.12035 11.6891 1.01683 11.9322 1.00208C12.1754 0.987337 12.4155 1.06239 12.607 1.213L12.707 1.293Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconExpandDown, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_expand_down.db45c3df.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconSingin = function SvgIconSingin(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 34,\n height: 34,\n viewBox: \"0 0 34 34\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9403\",\n \"data-name\": \"Grupo 9403\",\n transform: \"translate(-732 -31)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9402\",\n \"data-name\": \"Grupo 9402\",\n transform: \"translate(1.211 1.383)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5879\",\n \"data-name\": \"Caminho 5879\",\n d: \"M1795.632,1007.015v1.393h-16.011v-1.578h0a7.964,7.964,0,0,1,1.638-4.665c.052-.068.1-.135.159-.2s.086-.1.13-.155l0,0,.005-.006c.1-.116.2-.23.31-.341.079-.082.159-.161.241-.24a8.045,8.045,0,0,1,2.21-1.494l0,0,.006,0c.1.064.2.125.3.184a6.112,6.112,0,0,0,5.987,0q.155-.088.3-.184l.006,0,0,0a8.041,8.041,0,0,1,2.113,1.4c.083.077.165.156.245.236q.163.164.317.337l.005.006,0,0c.045.051.09.1.133.154s.109.132.162.2a7.965,7.965,0,0,1,1.718,4.767h0Z\",\n transform: \"translate(-1039.837 -953.621)\",\n fill: \"#4b4b4b\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5880\",\n \"data-name\": \"Caminho 5880\",\n d: \"M1787.67,981.937c0-.01,0-.021,0-.031q.01-.067.022-.132c0-.013,0-.025.007-.038.012-.061.025-.122.039-.182a4.431,4.431,0,0,1,1.033-1.954c.024-.027.048-.053.073-.079s.05-.052.075-.077q.154-.153.319-.29a4.407,4.407,0,0,1,.851-.551l.048-.024c.06-.029.12-.056.182-.082l.014-.006.052-.021.1-.041q.078-.029.157-.056a4.481,4.481,0,0,1,2.453-.111l.026.007c.049.012.1.025.147.039l.053.015.089.028.069.023c.053.018.1.036.156.056s.1.04.155.062a4.4,4.4,0,0,1,.679.359l.059.038.035.024a4.506,4.506,0,0,1,1.245,1.282l.039.063c.012.019.023.038.034.057a4.453,4.453,0,0,1,.275,4.005c-.028.066-.058.131-.088.2-.016.033-.031.064-.048.1l-.05.095-.026.047c-.017.031-.035.062-.053.093s-.036.061-.055.091l-.028.045a4.478,4.478,0,0,1-.6.751,4.424,4.424,0,0,1-.5.433,4.528,4.528,0,0,1-.417.274c-.07.04-.14.078-.211.114-.092.047-.187.09-.282.131l-.1.039-.1.037c-.048.018-.1.035-.145.051l-.049.016-.02.007h0l-.014,0a4.383,4.383,0,0,1-.891.176l-.141.011-.07,0h0l-.076,0-.076,0h-.051l-.153,0-.051,0h0a4.4,4.4,0,0,1-.559-.06c-.069-.012-.137-.026-.206-.041-.114-.025-.227-.055-.338-.09l-.014,0h0l-.02-.007q-.2-.062-.385-.142c-.085-.036-.168-.075-.251-.115l-.122-.063-.12-.067c-.084-.048-.166-.1-.247-.154-.057-.039-.114-.079-.17-.12a4.447,4.447,0,0,1-.5-.433l-.075-.077-.073-.079a4.426,4.426,0,0,1-.8-1.257,4.57,4.57,0,0,1-.168-.471c-.01-.035-.021-.071-.03-.106a4.455,4.455,0,0,1-.151-1.154,4.5,4.5,0,0,1,.047-.651\",\n transform: \"translate(-1044.28 -941.639)\",\n fill: \"#4b4b4b\"\n })), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5881\",\n \"data-name\": \"Caminho 5881\",\n d: \"M1782.371,969.348a16,16,0,1,0,16,16,16,16,0,0,0-16-16\",\n transform: \"translate(-1033.371 -937.348)\",\n fill: \"none\",\n stroke: \"#4b4b4b\",\n strokeMiterlimit: 10,\n strokeWidth: 2\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconSingin, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_singin.77b12261.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconCesta = function SvgIconCesta(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 40,\n height: 45,\n viewBox: \"0 0 34 26\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"cesta\",\n transform: \"translate(-789 -32.081)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Elipse_456\",\n \"data-name\": \"Elipse 456\",\n transform: \"translate(789 32.081)\",\n fill: \"none\",\n stroke: \"#4b4b4b\",\n strokeWidth: 2\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: 17,\n cy: 17,\n r: 17,\n stroke: \"none\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: 17,\n cy: 17,\n r: 16,\n fill: \"none\"\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9390\",\n \"data-name\": \"Grupo 9390\",\n transform: \"translate(795.44 41.134)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6333\",\n \"data-name\": \"Caminho 6333\",\n d: \"M1145.025-492.007v-3.017a1.258,1.258,0,0,1,1.461-.978h2.576v-.246c0-.713-.005-1.427,0-2.14a2.705,2.705,0,0,1,2.647-2.669q3.762-.021,7.524,0a2.633,2.633,0,0,1,2.587,2.294c.072.624.036,1.261.045,1.892,0,.284,0,.567,0,.871h.238c.85,0,1.7,0,2.549,0a1.187,1.187,0,0,1,1.25,1.257c0,.788,0,1.576,0,2.365a1.2,1.2,0,0,1-1.318,1.331c-.148,0-.209.035-.238.193q-.618,3.436-1.251,6.87a1.17,1.17,0,0,1-1.255,1.035H1149.1a1.184,1.184,0,0,1-1.251-1.044q-.541-2.964-1.076-5.929c-.068-.371-.139-.742-.205-1.1a5.269,5.269,0,0,1-.692-.084A1.231,1.231,0,0,1,1145.025-492.007Zm14.642-4c0-.769,0-1.521,0-2.274a.514.514,0,0,0-.576-.579q-3.618,0-7.235,0a.532.532,0,0,0-.592.591c0,.706,0,1.413,0,2.119,0,.045.007.091.011.143Zm.032,6.573c0-.754,0-1.507,0-2.261a.822.822,0,0,0-.686-.838.805.805,0,0,0-.91.551,1.393,1.393,0,0,0-.046.4q0,2.128,0,4.257a1.82,1.82,0,0,0,.02.3.8.8,0,0,0,.7.647.818.818,0,0,0,.928-.862C1159.7-487.971,1159.7-488.7,1159.7-489.437Zm-3.4-.006c0-.72,0-1.439,0-2.159a1.344,1.344,0,0,0-.045-.381.806.806,0,0,0-.908-.553.819.819,0,0,0-.687.816c-.008.543,0,1.086,0,1.629,0,.951,0,1.9,0,2.851a.818.818,0,0,0,.8.871.808.808,0,0,0,.837-.854C1156.3-487.963,1156.3-488.7,1156.3-489.443Zm-3.4-.016h0q0-1.09,0-2.179a1.226,1.226,0,0,0-.023-.283.811.811,0,0,0-.9-.618.807.807,0,0,0-.708.813q-.006,2.271,0,4.542a.787.787,0,0,0,.02.181.812.812,0,0,0,.9.628.8.8,0,0,0,.718-.8C1152.9-487.937,1152.9-488.7,1152.9-489.458Z\",\n transform: \"translate(-1145.025 501.067)\",\n fill: \"#191750\"\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconCesta, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_cesta.47df7292.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconHome = function SvgIconHome(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 36,\n height: 36,\n viewBox: \"0 0 36 36\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9404\",\n \"data-name\": \"Grupo 9404\",\n transform: \"translate(-676 -31)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6319\",\n \"data-name\": \"Caminho 6319\",\n d: \"M1783.371,969.348a17,17,0,1,0,17,17,17,17,0,0,0-17-17\",\n transform: \"translate(-1089.371 -937.348)\",\n fill: \"none\",\n stroke: \"#4b4b4b\",\n strokeMiterlimit: 10,\n strokeWidth: 2\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6320\",\n \"data-name\": \"Caminho 6320\",\n d: \"M281.414-2315.565h.555a2.678,2.678,0,0,1,1.376.871q3.772,3.79,7.561,7.562a2.818,2.818,0,0,1,.926,1.432v.554a.5.5,0,0,0-.037.088,1.847,1.847,0,0,1-1.813,1.5c-.1,0-.206,0-.324,0v.265c0,1.921,0,3.842,0,5.762a2.17,2.17,0,0,1-2.262,2.249h-3.049c-.485,0-.708-.226-.708-.717q0-2.317,0-4.634a.951.951,0,0,0-.918-1c-.692-.025-1.386-.024-2.078,0a.947.947,0,0,0-.892.959c0,.191,0,.383,0,.574q0,2.079,0,4.158a.6.6,0,0,1-.654.652c-1.089,0-2.178.007-3.267,0a2.151,2.151,0,0,1-2.09-2.053c-.019-1.987-.009-3.974-.011-5.96,0-.082,0-.165,0-.26-.146,0-.258,0-.37,0a1.807,1.807,0,0,1-1.593-1,1.856,1.856,0,0,1,.4-2.245q3.933-3.936,7.865-7.873A2.713,2.713,0,0,1,281.414-2315.565Z\",\n transform: \"translate(412.313 2354.424)\",\n fill: \"#4b4b4b\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconHome, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_home.26be577f.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n border-right: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n position: fixed;\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundHeader) || '#CCC'};\r\n border-right: 0;\r\n\tpadding: 1rem 2rem;\r\n\tmax-height: 5.625rem;\r\n\tmin-height: 5.625rem;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\r\n > img{\r\n width: 70px;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n ${props => props.isSidebarOpen ? `\r\n\t\t\tmin-width: calc(100% - 20rem);\r\n\t\t\tmax-width: calc(100% - 20rem);\r\n\t\t` : `\r\n\t\t\tmin-width: 100%;\r\n\t\t\tmax-width: 100%;\r\n\t\t`}\r\n }\r\n`\r\n\r\nexport const LocationAddressFull = styled.span`\r\n margin: 0 .5rem 0 .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n font-weight: 500;\r\n font-size: 1rem;\r\n display: none;\r\n\r\n @media(min-width: 70rem){\r\n display: unset;\r\n }\r\n`\r\n\r\nexport const LocationAddressSmall = styled.span`\r\n margin: 0 .5rem 0 .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n font-weight: 500;\r\n font-size: 1rem;\r\n\r\n @media(max-width: 70rem){\r\n display: none;\r\n }\r\n`\r\n\r\n\r\nexport const LocationAddress = styled.span`\r\n margin: 0 .5rem 0 .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n font-weight: 500;\r\n font-size: 1rem;\r\n\r\n @media(min-width: 70rem){\r\n display: none;\r\n }\r\n`\r\n\r\nexport const DeliveryAddressLocationContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n\r\n svg path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n fill-opacity: .8;\r\n }\r\n \r\n &:hover {\r\n ${LocationAddress} {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n opacity: .8;\r\n }\r\n\r\n svg path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n fill-opacity: .8;\r\n }\r\n }\r\n`\r\n\r\nexport const StoreSelectContainer = styled.div`\r\n height: 4rem;\r\n border: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000'};\r\n border-radius: 0.8rem;\r\n padding: .4rem .8rem;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n\r\n * {\r\n pointer-events: none;\r\n }\r\n\r\n > img {\r\n width: 50px;\r\n height: 100%;\r\n }\r\n\r\n svg path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n fill-opacity: .8;\r\n }\r\n`\r\nexport const StoreName = styled.span`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-weight: bold;\r\n font-size: .8rem;\r\n padding: 0 .7rem;\r\n max-width: 8rem;\r\n`\r\n\r\nexport const DeliveryAddressTitle = styled.span``\r\n\r\nexport const DeliveryAddressContainer = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0 0 0 1.5rem;\r\n\r\n ${DeliveryAddressTitle} {\r\n margin: 0 0 .5rem 0;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n font-size: .875rem;\r\n font-weight: 700;\r\n }\r\n`\r\n\r\nexport const CartItemsButtonContainer = styled.div`\r\n position: relative;\r\n margin: 0 .35rem 0 0; \r\n`\r\n\r\nexport const CartItemsQuantity = styled.span`\r\n border: 2px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n border-radius: 50%;\r\n width: .1rem;\r\n height: .1rem;\r\n padding: .35rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: -1px;\r\n right: -1px;\r\n font-size: .55rem;\r\n background-color: white;\r\n`\r\n\r\nexport const StoreHeaderActionButton = styled.button`\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n align-items: center;\r\n color: ${props => props.opened ? `${(props.theme && props.theme.main && props.theme.main.general\r\n && props.theme.main.general.primarycolor) || '#333'}` : `${(props.theme && props.theme.main && props.theme.main.general\r\n && props.theme.main.general.primarycolor) || '#333'}`};\r\n font-size: 1rem;\r\n font-weight: 700;\r\n cursor: pointer;\r\n height: 2rem;\r\n position: relative;\r\n\r\n ${props => !props.opened ? `\r\n &:hover {\r\n color: ${(props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primarycolor) || '#333'};\r\n\r\n svg path:not([stroke]) {\r\n fill: ${(props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundBody) || '#333'};\r\n }\r\n\r\n ${CartItemsQuantity} {\r\n border: 2px solid ${(props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundBody) || '#333'};\r\n }\r\n }\r\n ` : `\r\n\r\n ${CartItemsQuantity} {\r\n border: 2px solid ${(props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundBody) || '#333'};\r\n }\r\n `\r\n };\r\n\r\n svg {\r\n margin: 0;\r\n width: 2rem;\r\n\r\n g{\r\n stroke: ${props => props.opened ? `${(props.theme && props.theme.main &&\r\n props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'}` : `${(props.theme && props.theme.main &&\r\n props.theme.main.general && props.theme.main.general.colorTextHeader)}`};\r\n }\r\n\r\n path{\r\n stroke: ${props => props.opened ? `${(props.theme && props.theme.main &&\r\n props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'}` : `${(props.theme && props.theme.main &&\r\n props.theme.main.general && props.theme.main.general.colorTextHeader)}`};\r\n }\r\n\r\n path:not([stroke]) {\r\n fill: ${props => props.opened ? `${(props.theme && props.theme.main &&\r\n props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'}` : `${(props.theme && props.theme.main &&\r\n props.theme.main.general && props.theme.main.general.colorTextHeader)}`};\r\n }\r\n }\r\n\r\n`\r\n\r\nexport const StoreHeaderActionsContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n position: absolute;\r\n right: 1rem;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n left: auto;\r\n\r\n ${StoreHeaderActionButton}:first-of-type {\r\n margin: 0 .2rem 0 0;\r\n }\r\n`\r\n\r\nexport const ModalityContainer = styled.div`\r\n position: absolute;\r\n left: auto;\r\n top: 50%;\r\n right: 10rem;\r\n transform: translate(0, -50%); \r\n margin: 0 2rem;\r\n display: flex;\r\n ${props => {\r\n if (props.storeDelivery) {\r\n return `border: 1px solid #CECECE;`\r\n } else {\r\n return `border: none;`\r\n }\r\n }}\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000'};\r\n border-radius: .5rem;\r\n\r\n &.btn-group button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 5px 15px;\r\n cursor: pointer;\r\n float: left;\r\n font-weight: bold;\r\n border-radius: .5rem;\r\n font-size: .8rem;\r\n\r\n &.active{\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.modalityButtonColor) || '#000'};\r\n border-radius: .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n box-shadow: 2px 2px 4px 1px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.shadowModalityButtonColor) || '#000'};\r\n z-index: 1;\r\n }\r\n }\r\n`\r\n\r\nexport const Button = styled.button``\r\n\r\n\r\nexport const IconButtonCartsItemsAmount = styled.span`\r\n border: 2px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n background: #FFF;\r\n border-radius: 50%;\r\n width: .1rem;\r\n height: .1rem;\r\n padding: .35rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: absolute;\r\n top: 9px;\r\n right: -6px;\r\n font-size: .55rem;\r\n`\r\n\r\nexport const Img = styled.div`\r\n position: absolute;\r\n right: -5px;\r\n margin-top: 5px;\r\n animation: fade-in 500ms;\r\n\r\n ${props => !props.opened && `display: none;`};\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const ModalityContainer = styled.div`\r\n position: absolute;\r\n left: auto;\r\n top: 50%;\r\n right: 10rem;\r\n transform: translate(0, -50%); \r\n margin: 0 2rem;\r\n display: flex;\r\n ${props => {\r\n if (props.storeDelivery) {\r\n return `border: 1px solid #CECECE;`\r\n } else {\r\n return `border: none;`\r\n }\r\n }}\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000'};\r\n border-radius: .5rem;\r\n\r\n &.btn-group button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 5px 15px;\r\n cursor: pointer;\r\n float: left;\r\n font-weight: bold;\r\n border-radius: .5rem;\r\n font-size: .8rem;\r\n\r\n &.active{\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.modalityButtonColor) || '#000'};\r\n border-radius: .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n box-shadow: 2px 2px 4px 1px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.shadowModalityButtonColor) || '#000'};\r\n z-index: 1;\r\n }\r\n }\r\n`\r\nexport const Button = styled.button``\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Button, ModalityContainer } from './styles'\r\n//import { MULTI_STORE } from '../../../config'\r\n\r\nexport function Modality(props) {\r\n\tconst {\r\n\t\tstoreDelivery,\r\n\t\topened,\r\n\t\tmodalityId,\r\n\t\tstorePickup,\r\n\t\thandleModality,\r\n\t\thandleGTM,\r\n\t\tcontent,\r\n\t\tstoreName\r\n\t} = props\r\n\r\n\tconst modalitySection = content.filter(item => item.id === 'modality')[0]\r\n\tconst modalitySectionActions = modalitySection.actions\r\n\tconst modalityDeliveryButton = modalitySectionActions.filter(item => item.id === 'delivery')[0]\r\n\tconst modalityDeliveryButtonLabel = modalityDeliveryButton.label\r\n\tconst modalityPickupButton = modalitySectionActions.filter(item => item.id === 'pickup')[0]\r\n\tconst modalityPickupButtonLabel = modalityPickupButton.label\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{storeDelivery && storePickup ? <>\r\n\t\t\t\t { handleModality(4) }}\r\n\t\t\t\t\tclassName={modalityId === 4 ? 'active' : ''}>\r\n\t\t\t\t\t{modalityDeliveryButtonLabel}\r\n\t\t\t\t\r\n\t\t\t\t {\r\n\t\t\t\t\t\thandleModality(2)\r\n\t\t\t\t\t\t//GTM 3.0 - Evento seleção de modalidade retirada\r\n\t\t\t\t\t\tconst dataGTM = {\r\n\t\t\t\t\t\t\t'event': 'modalidade_retirada',\r\n\t\t\t\t\t\t\t'store': storeName,\r\n\t\t\t\t\t\t\t'modalidade_retirada': 'retirar_na_loja'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tconsole.warn(dataGTM)\r\n\t\t\t\t\t\thandleGTM(dataGTM)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName={modalityId === 2 ? 'active' : ''}>\r\n\t\t\t\t\t{modalityPickupButtonLabel}\r\n\t\t\t\t\r\n\t\t\t : null}\r\n\t\t \r\n\t)\r\n}\r\n\r\nModality.propTypes = {\r\n\thandleModality: PropTypes.func,\r\n\thandleGTM: PropTypes.func,\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { ReactComponent as IconLocation } from '../../assets/icons/icon_location.svg'\r\nimport { ReactComponent as IconExpandDown } from '../../assets/icons/icon_expand_down.svg'\r\nimport { ReactComponent as IconUser } from '../../assets/icons/icon_singin.svg'\r\nimport { ReactComponent as BasketIcon } from '../../assets/icons/icon_cesta.svg'\r\nimport { ReactComponent as HomeIcon } from '../../assets/icons/icon_home.svg'\r\n\r\nimport {\r\n\tDeliveryAddressContainer,\r\n\tDeliveryAddressLocationContainer,\r\n\tDeliveryAddressTitle,\r\n\tLocationAddress,\r\n\tStoreHeaderActionButton,\r\n\tStoreHeaderActionsContainer,\r\n\tWrapper,\r\n\tCartItemsButtonContainer,\r\n\tStoreSelectContainer,\r\n\tStoreName,\r\n\tIconButtonCartsItemsAmount,\r\n\tLocationAddressFull,\r\n\tLocationAddressSmall\r\n} from './styles'\r\n\r\nimport {\r\n\tuseDeviceLayout,\r\n\tuseSidebar\r\n} from '../../hooks'\r\n\r\nimport history from '../../../history'\r\nimport { MULTI_STORE } from '../../../config'\r\nimport { caculateProductsQuantity } from '../../../domain/helpers'\r\nimport { sidebarContentEnum } from '../../../domain/sidebar'\r\nimport { Modality } from '../Modality'\r\n\r\nexport function Full(props) {\r\n\tconst {\r\n\t\taddress,\r\n\t\tcartClicked,\r\n\t\tuserClicked,\r\n\t\tvisibleSignIn,\r\n\t\tstoreLogo,\r\n\t\thandleModality,\r\n\t\thomeOnClick,\r\n\t\tcontext,\r\n\t\tmodalityId,\r\n\t\tstoreAddress,\r\n\t\tstoreName,\r\n\t\tstoreImg,\r\n\t\taccessToken,\r\n\t\thomeDisabled,\r\n\t\tuserCpf,\r\n\t\topened,\r\n\t\tproducts,\r\n\t\tstoreDelivery,\r\n\t\tstorePickup,\r\n\t\tsubscriptionStatus,\r\n\t\tURLParameters,\r\n\t\tuserName,\r\n\t\tsetOpenCart,\r\n\t\tsetVisibleSignIn,\r\n\t\tsetVisibleStoreList,\r\n\t\tsetAddressPostalCodeRequest,\r\n\t\tsetAddressRequest,\r\n\t\tsetNoAddressesList,\r\n\t\tclassName,\r\n\t\thandleGTM,\r\n\t\thandlePixel\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tsidebarContent,\r\n\t\tsidebarOpened\r\n\t} = useSidebar()\r\n\r\n\tconst isMobile = useDeviceLayout({\r\n\t\tisMobile: true\r\n\t})\r\n\r\n\tconst { content } = context\r\n\tconst deliverySection = content.filter(item => item.id === 'delivery-place')[0]\r\n\tconst deliverySectionTitle = deliverySection.title\r\n\tconst pickupSection = content.filter(item => item.id === 'pickup-place')[0]\r\n\tconst pickupSectionTitle = pickupSection.title\r\n\r\n\tconst selectedAddress = (address && address.main) || 'Insira seu endereço aqui'\r\n\tconst selectedAddressNumber = address && address.number\r\n\r\n\tconst displayAddress = modalityId === 4 ?\r\n\t\t(selectedAddress && selectedAddress.length > 30 && selectedAddress.length < 40 ?\r\n\t\t\t(selectedAddress.slice(0, -17) + '...') : selectedAddress && selectedAddress.length > 40 && selectedAddress.length < 50 ?\r\n\t\t\t\t(selectedAddress.slice(0, -30) + '...') : selectedAddress && selectedAddress.length > 50 ?\r\n\t\t\t\t\t(selectedAddress.slice(0, -35) + '...') : selectedAddress) + (selectedAddressNumber ? `, ` + selectedAddressNumber : '')\r\n\t\t: storeAddress && storeAddress.slice(0, -9) + '...'\r\n\r\n\tconst fullDisplayAddress = modalityId === 4 ?\r\n\t\tselectedAddress + (selectedAddressNumber ? `, ` + selectedAddressNumber : '') :\r\n\t\tstoreAddress\r\n\r\n\tconst wrapperClasses = `main-header-content ${className}`\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{MULTI_STORE === 'true' && address && address.main && storeName ?\r\n\t\t\t\t setVisibleStoreList(true)}>\r\n\t\t\t\t\t
\r\n\t\t\t\t\t{storeName} \r\n\t\t\t\t\t :\r\n\t\t\t\t
}\r\n\t\t\t\r\n\t\t\t\t{modalityId === 4 ? deliverySectionTitle : pickupSectionTitle} \r\n\t\t\t\t {\r\n\t\t\t\t\tif (modalityId !== 4) {\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (!accessToken) {\r\n\t\t\t\t\t\tsetAddressPostalCodeRequest(true)\r\n\t\t\t\t\t\tsetAddressRequest(false)\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t\t\tsetAddressRequest(true)\r\n\t\t\t\t\t\tsetNoAddressesList(false)\r\n\t\t\t\t\t}\r\n\t\t\t\t}}>\r\n\t\t\t\t\t{displayAddress} \r\n\t\t\t\t\t : <>\r\n\t\t\t\t\t\t{fullDisplayAddress} \r\n\t\t\t\t\t}\r\n\t\t\t\t\t{displayAddress} \r\n\t\t\t\t\t \r\n\t\t\t \r\n\t\t\t{modalityId && \r\n\t\t\t\t {\r\n\t\t\t\t\tif (!homeDisabled) {\r\n\t\t\t\t\t\tsetOpenCart(false)\r\n\t\t\t\t\t\tif (sidebarOpened && sidebarContent !== sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\tcartClicked()\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (homeOnClick && typeof homeOnClick === 'function') {\r\n\t\t\t\t\t\t\thomeOnClick()\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\thistory.push(`/${URLParameters}`)\r\n\t\t\t\t\t}\r\n\t\t\t\t}}>\r\n\t\t\t\t\t \r\n\t\t\t\t{userName && userCpf && accessToken && subscriptionStatus === 1 ? {\r\n\t\t\t\t\tsetOpenCart(false)\r\n\t\t\t\t\tuserClicked()\r\n\t\t\t\t}}>\r\n\t\t\t\t\t :\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tif (sidebarOpened && sidebarContent !== sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\tcartClicked()\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tif (homeOnClick && typeof homeOnClick === 'function') {\r\n\t\t\t\t\t\t\thomeOnClick()\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (isMobile) {\r\n\t\t\t\t\t\t\thistory.push(`/login${URLParameters}`)\r\n\r\n\t\t\t\t\t\t\treturn\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tsetOpenCart(false)\r\n\r\n\t\t\t\t\t\tif (accessToken) {\r\n\t\t\t\t\t\t\tuserClicked()\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tvisibleSignIn ? setVisibleSignIn(false) : setVisibleSignIn(true)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t}>\r\n\t\t\t\t\t\t }\r\n\t\t\t\t {\r\n\t\t\t\t\t\tsetOpenCart(opened ? false : true)\r\n\t\t\t\t\t\tcartClicked()\r\n\t\t\t\t\t}}\r\n\t\t\t\t\topened={sidebarOpened}\r\n\t\t\t\t>\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{caculateProductsQuantity(products)} \r\n\t\t\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t \r\n\t\t \r\n\t)\r\n}\r\n\r\nFull.propTypes = {\r\n\taddress: PropTypes.shape({\r\n\t\tmain: PropTypes.string,\r\n\t\tnumber: PropTypes.string\r\n\t}),\r\n\tcartClicked: PropTypes.func,\r\n\tuserClicked: PropTypes.func,\r\n\tvisibleSignIn: PropTypes.bool,\r\n\tisSidebarOpen: PropTypes.bool,\r\n\tstoreLogo: PropTypes.string,\r\n\thandleModality: PropTypes.func,\r\n\thomeOnClick: PropTypes.func,\r\n\tcontext: PropTypes.shape({\r\n\t\tcontent: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\tmodalityId: PropTypes.number,\r\n\tstoreAddress: PropTypes.string,\r\n\tstoreName: PropTypes.string,\r\n\tstoreImg: PropTypes.string,\r\n\taccessToken: PropTypes.string,\r\n\thomeDisabled: PropTypes.bool,\r\n\tuserCpf: PropTypes.string,\r\n\topened: PropTypes.bool,\r\n\tproducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tstoreDelivery: PropTypes.bool,\r\n\tstorePickup: PropTypes.bool,\r\n\tsubscriptionStatus: PropTypes.number,\r\n\tURLParameters: PropTypes.string,\r\n\tuserName: PropTypes.string,\r\n\tsetOpenCart: PropTypes.func,\r\n\tsetVisibleSignIn: PropTypes.func,\r\n\tsetVisibleStoreList: PropTypes.func,\r\n\tsetAddressPostalCodeRequest: PropTypes.func,\r\n\tsetAddressRequest: PropTypes.func,\r\n\tsetNoAddressesList: PropTypes.func,\r\n\tclassName: PropTypes.string,\r\n\thandleGTM: PropTypes.func,\r\n\thandlePixel: PropTypes.func,\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tz-index: 1;\r\n\tposition: relative;\r\n max-height: 4.225rem;\r\n\tmin-height: 4.225rem;\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n padding: 2rem;\r\n display: flex;\r\n\tflex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n button {\r\n display: flex;\r\n flex-direction: row;\r\n color: #fff;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n padding: 10px 12px;\r\n border-radius: 15px;\r\n font-weight: 100;\r\n outline: 0;\r\n border: 0;\r\n margin: 0 .4rem 0 0;\r\n font-size: 0.875rem;\r\n line-height: 2;\r\n letter-spacing: 0.02857em;\r\n font-weight: bold\r\n width: 100%;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\t\tcursor: pointer;\r\n }\r\n\r\n\t>p{\r\n\t\tfont-size: 0.875rem;\r\n\t\tmargin-bottom: 1rem;\r\n\t\tpadding: 0 1rem;\r\n\t}\r\n`\r\n\r\nexport const Title = styled.h1`\r\n\tmargin: .1rem 0;\r\n\tfont-size: 1.4rem;\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#000'};\t\r\n`\r\n\r\nexport const CustomButton = styled.button`\r\n\t>span{\r\n\t\tmargin: 0 .7rem;\r\n\r\n\t\t@media(max-width: 60rem){\r\n\t\t\tmargin: 0 .2rem;\r\n\t\t}\r\n\t}\r\n`\r\n","import React, { useEffect } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n\tWrapper,\r\n\tTitle,\r\n\tCustomButton\r\n} from './styles'\r\nimport { Icon } from '../../components/common'\r\nimport { CustomLoading } from '../../components'\r\nimport { MULTI_STORE } from '../../../config'\r\n\r\nexport function Geolocation(props) {\r\n\tconst {\r\n\t\tloadingGeolocation,\r\n\t\tdirectAccess,\r\n\t\tmodalityId,\r\n\t\tlatitude,\r\n\t\tlongitude,\r\n\t\tsetLoadingGeolocation,\r\n\t\tsetGeolocation,\r\n\t\thandleCloseDialogGeolocation,\r\n\t\tsetStoresListRequest,\r\n\t\tsetVisibleGeolocation\r\n\t} = props\r\n\r\n\tuseEffect(() => {\r\n\t\tif (modalityId === 2 && !latitude && !longitude && MULTI_STORE === 'true' && !directAccess) {\r\n\t\t\tsetVisibleGeolocation(true)\r\n\t\t}\r\n\t}, [\r\n\t\tmodalityId,\r\n\t\tlatitude,\r\n\t\tlongitude,\r\n\t\tdirectAccess,\r\n\t\tsetVisibleGeolocation\r\n\t])\r\n\r\n\tfunction handleLocationClick() {\r\n\t\tsetLoadingGeolocation(true)\r\n\t\tnavigator.geolocation.getCurrentPosition(async function (position) {\r\n\t\t\tconst { latitude, longitude } = position.coords\r\n\r\n\t\t\tsetGeolocation({ latitude: latitude, longitude: longitude })\r\n\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\thandleCloseDialogGeolocation()\r\n\t\t\t\tsetStoresListRequest(true)\r\n\t\t\t\tsetLoadingGeolocation(false)\r\n\t\t\t}, 2000)\r\n\t\t})\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\tOnde você está? \r\n\t\t\t handleLocationClick()}>\r\n\t\t\t\t{loadingGeolocation ?\r\n\t\t\t\t\t \r\n\t\t \r\n\t)\r\n}\r\n\r\nGeolocation.propTypes = {\r\n\thandleLocationClick: PropTypes.func,\r\n}\r\n","import React, {\r\n\tuseContext,\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\nimport {\r\n\tconnect,\r\n\tuseDispatch,\r\n\tuseStore\r\n} from 'react-redux'\r\nimport { Dialog, Slide } from '@material-ui/core'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { ADDRESS_REQUEST, ALTERNATIVE_STYLE_MULTI_STORE, MULTI_STORE } from '../../config'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n\tsetModality,\r\n\tsetOpenCart,\r\n\tsetShowSignUp,\r\n\tfetchStoreFees,\r\n\thandleGTM,\r\n\thandlePixel,\r\n\taddProduct,\r\n\tremoveProduct\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n\taddressActions,\r\n\tstore as storeActions,\r\n\tmenuActions\r\n} from '../../state'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tFull,\r\n\tSimple,\r\n\tMobile\r\n} from './'\r\n\r\nimport {\r\n\tAddresses,\r\n\tAddressPostalCode,\r\n\tForgotPassword,\r\n\tSignIn,\r\n\tSignUp,\r\n\tStoresList,\r\n\tuseForgotPasswordDialogStyles,\r\n\tNavigation\r\n} from '..'\r\n\r\nimport {\r\n\tWrapper\r\n} from './styles'\r\nimport { Geolocation } from './Geolocation'\r\nimport { useSnackbar } from 'react-simple-snackbar'\r\nimport { errorOptions, successOptions } from '../../infra/utils/styleNotification'\r\n\r\nconst Context = React.createContext({})\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tsetAddressRequest(false)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName='address address-root-dialog'\r\n\t\t\t\t\taria-labelledby='address-dialog'\r\n\t\t\t\t\topen={addressRequest}\r\n\t\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\t>\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName='addresses-postal-code address-root-dialog'\r\n\t\t\t\t\taria-labelledby='addresses-postal-code-dialog'\r\n\t\t\t\t\topen={addressPostalCodeRequest}\r\n\t\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\t\tfullScreen={false}\r\n\t\t\t\t\tfullWidth={false}\r\n\t\t\t\t>\r\n\t\t\t\t\t handleCloseDialogSignIn()}\r\n\t\t\t\t\tclassName='login'\r\n\t\t\t\t\tdisableScrollLock={true}\r\n\t\t\t\t\taria-labelledby='login-dialog'\r\n\t\t\t\t\topen={visibleSignIn}\r\n\t\t\t\t\tfullWidth={false}\r\n\t\t\t\t\tfullScreen={false}\r\n\t\t\t\t\tPaperProps={{\r\n\t\t\t\t\t\tstyle: {\r\n\t\t\t\t\t\t\tmaxWidth: '25rem',\r\n\t\t\t\t\t\t\tborderRadius: '.75rem'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t { setVisibleSignIn(false) }}\r\n\t\t\t\t\t\tsetRequiredValidationPhone={setRequiredValidationPhone}\r\n\t\t\t\t\t\ttheme={theme}\r\n\t\t\t\t\t>\r\n\t\t\t\t\r\n\r\n\t\t\t\t handleCloseDialogSignUp()}\r\n\t\t\t\t\taria-labelledby='signUp-dialog'\r\n\t\t\t\t\topen={showSignUp}\r\n\t\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\t\tfullWidth={false}\r\n\t\t\t\t\tfullScreen={false}\r\n\t\t\t\t>\r\n\t\t\t\t\t { setShowSignUp(false) }}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\r\n\t\t\t\t handleCloseDialogForgotPassword()}\r\n\t\t\t\t\taria-labelledby='forgot-password-dialog'\r\n\t\t\t\t\topen={visibleForgotPassword}\r\n\t\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\t\tfullWidth={false}\r\n\t\t\t\t\tfullScreen={false}\r\n\t\t\t\t\tclasses={{\r\n\t\t\t\t\t\tscrollPaper: forgotPasswordDialogClasses.scrollPaper,\r\n\t\t\t\t\t\tpaper: forgotPasswordDialogClasses.paper\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\t>\r\n\t\t\t\t\t handleCloseDialogForgotPassword()} />\r\n\t\t\t\t\r\n\r\n\t\t\t\t {\r\n\t\t\t\t\t\tsetVisibleNavigation(false)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\taria-labelledby='navigation-dialog'\r\n\t\t\t\t\topen={visibleNavigation}\r\n\t\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\t>\r\n\t\t\t\t\t handleContactUs()}\r\n\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\tcurrentRoute='store'\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tsetVisibleNavigation={setVisibleNavigation}\r\n\t\t\t\t\t>\r\n\t\t\t\t\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t)\r\n\t} else if (mode === 'mobile') {\r\n\t\treturn \r\n\t\t\t {\r\n\t\t\t\t\tsetVisibleNavigation(false)\r\n\t\t\t\t}}\r\n\t\t\t\taria-labelledby='navigation-dialog'\r\n\t\t\t\topen={visibleNavigation}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t>\r\n\t\t\t\t handleContactUs()}\r\n\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\tcurrentRoute='store'\r\n\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tsetVisibleNavigation={setVisibleNavigation}\r\n\t\t\t\t>\r\n\t\t\t\r\n\r\n\t\t\t {\r\n\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t}}\r\n\t\t\t\tclassName='addresses-postal-code address-root-dialog'\r\n\t\t\t\taria-labelledby='addresses-postal-code-dialog'\r\n\t\t\t\topen={addressPostalCodeRequest}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tfullScreen={false}\r\n\t\t\t\tfullWidth={false}\r\n\t\t\t>\r\n\t\t\t\t {\r\n\t\t\t\t\tsetAddressRequest(false)\r\n\t\t\t\t}}\r\n\t\t\t\tclassName={!cep ? \"addresses-postal-code\" : \"address\"}\r\n\t\t\t\taria-labelledby='address-dialog address-root-dialog'\r\n\t\t\t\topen={addressRequest}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t>\r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t \r\n\t}\r\n\r\n\treturn \r\n \r\n )\r\n}\r\n\r\nSimple.propTypes = {\r\n\tstoreLogo: PropTypes.string,\r\n\tstoreName: PropTypes.string,\r\n\thandleBack: PropTypes.func,\r\n\tcontext: PropTypes.shape({\r\n\t\tactions: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t})\r\n}\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconStoreList = function SvgIconStoreList(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 25,\n height: 19,\n viewBox: \"0 0 25 19\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9527\",\n \"data-name\": \"Grupo 9527\",\n transform: \"translate(445 16.545)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6367\",\n \"data-name\": \"Caminho 6367\",\n d: \"M-445-9.923c.214-.392.409-.8.645-1.173,1.041-1.65,2.1-3.288,3.14-4.938a.97.97,0,0,1,.888-.511q7.338.011,14.676,0a.953.953,0,0,1,.869.5c1.148,1.812,2.3,3.624,3.463,5.421a1.868,1.868,0,0,1,.26,1.506,3.145,3.145,0,0,1-2.1,2.516,2.679,2.679,0,0,1-2.956-.85c-.038-.041-.078-.08-.131-.134a2.873,2.873,0,0,1-2.247,1.125,2.863,2.863,0,0,1-2.24-1.116,2.837,2.837,0,0,1-4.515-.008,2.884,2.884,0,0,1-2.232,1.125,2.851,2.851,0,0,1-2.251-1.113c-.211.189-.4.391-.622.554-1.774,1.336-4.238.151-4.6-2.207-.012-.076-.032-.15-.048-.225Z\",\n transform: \"translate(0 0)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6368\",\n \"data-name\": \"Caminho 6368\",\n d: \"M-398.8,152.98v.3q0,4.083,0,8.165c0,1.226-.591,1.9-1.666,1.9h-1.278v-8.383h-4.427v8.383H-417.8c-1.046,0-1.649-.682-1.649-1.867q0-4.122,0-8.244v-.281c.266.069.514.15.767.2a3.858,3.858,0,0,0,2.75-.471.3.3,0,0,1,.339-.006,3.953,3.953,0,0,0,4.094,0,.3.3,0,0,1,.34.008,3.948,3.948,0,0,0,4.074,0,.326.326,0,0,1,.361.007,3.952,3.952,0,0,0,4.054,0,.3.3,0,0,1,.339-.018,3.785,3.785,0,0,0,3.387.342A.944.944,0,0,1-398.8,152.98Zm-17.689,6.987h5.871v-5.01h-5.871Z\",\n transform: \"translate(-23.868 -160.892)\",\n fill: \"#191750\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconStoreList, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_store_list.de98fbc8.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconStoreAlter = function SvgIconStoreAlter(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12.229,\n height: 15,\n viewBox: \"-5 -2 28 15\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9540\",\n \"data-name\": \"Grupo 9540\",\n transform: \"translate(-56.77 -28.741)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9538\",\n \"data-name\": \"Grupo 9538\",\n transform: \"translate(56.77 29.514)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path\",\n d: \"M6.941.179a.62.62,0,0,1,.047.8l-.047.061L3.978,4.093a.584.584,0,0,1-.782.049l-.059-.049L.173,1.044a.627.627,0,0,1,0-.866A.578.578,0,0,1,.956.13l.059.049L3.557,2.794,6.1.179A.578.578,0,0,1,6.882.13Z\",\n transform: \"translate(0 8.477)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6387\",\n \"data-name\": \"Caminho 6387\",\n d: \"M65,45.31V34\",\n transform: \"translate(-61.442 -33.632)\",\n fill: \"none\",\n stroke: \"#191750\",\n strokeLinecap: \"round\",\n strokeWidth: 1.5\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9539\",\n \"data-name\": \"Grupo 9539\",\n transform: \"translate(63.884 28.741)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Path-2\",\n \"data-name\": \"Path\",\n d: \"M6.941.179a.62.62,0,0,1,.047.8l-.047.061L3.978,4.093a.584.584,0,0,1-.782.049l-.059-.049L.173,1.044a.627.627,0,0,1,0-.866A.578.578,0,0,1,.956.13l.059.049L3.557,2.794,6.1.179A.578.578,0,0,1,6.882.13Z\",\n transform: \"translate(7.115 4.269) rotate(180)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6388\",\n \"data-name\": \"Caminho 6388\",\n d: \"M65,45.722V34\",\n transform: \"translate(-61.442 -32.933)\",\n fill: \"none\",\n stroke: \"#191750\",\n strokeLinecap: \"round\",\n strokeWidth: 1.5\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconStoreAlter, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_store_alter.e107390c.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundHeader) || '#333'};\r\n padding: 0 2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n box-sizing: border-box;\r\n min-height: 4.225rem;\r\n max-height: 4.225rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\tflex-direction: row;\r\n`\r\n\r\nexport const LeftWrapper = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n\tflex: 1;\r\n\r\n\t> button {\r\n\t\tmargin: 0;\r\n\t\tdisplay: flex;\r\n\t\tborder: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000' };\r\n\t\tbackground-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000' };\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n\t\tpadding: .5rem;\r\n\t\tcursor: pointer;\r\n\t\tfont-weight: bold;\r\n\t\tborder-radius: 1rem;\r\n\t\tfont-size: .8rem;\r\n\t\tmax-width: 5rem;\r\n\t\tmin-width: 5rem;\r\n\t\tbox-sizing: border-box;\r\n\t\tmin-height: 3rem;\r\n\t\tmax-height: 3rem;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\r\n\t\tsvg {\r\n\t\t\twidth: 1.5rem;\r\n\t\t\theight: 1.1rem;\r\n\t\t\tmargin: 0 .2rem;\r\n\t\t\tpath {\r\n\t\t\t\tfill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\t\t\t\tstroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const CenterWrapper = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex: 1;\r\n\tflex-direction: column;\r\n`\r\nexport const RightWrapper = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: flex-end;\r\n\tflex: 1;\r\n`\r\n\r\nexport const ModalityContainer = styled.div`\r\n margin: 0 1rem;\r\n display: flex;\r\n\t${props => {\r\n if (props.storeDelivery) {\r\n return `border: 1px solid #CECECE;`\r\n } else {\r\n return `border: none;`\r\n }\r\n }}\r\n\tmin-height: 2.25rem;\r\n\tmax-height: 2.25rem;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000'};\r\n border-radius: .5rem;\r\n\r\n &.btn-group button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 5px 15px;\r\n cursor: pointer;\r\n float: left;\r\n font-weight: bold;\r\n border-radius: .5rem;\r\n font-size: .8rem;\r\n\r\n &.active{\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.modalityButtonColor) || '#000'};\r\n border-radius: .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n box-shadow:2px 2px 5px 1px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.shadowModalityButtonColor) || '#000'};\r\n z-index: 1;\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n ${props => {\r\n if (props.opened) {\r\n return `display: none;`\r\n } else {\r\n return `display: unset;`\r\n }\r\n }}\r\n }\r\n\r\n @media (min-width: 70rem) {\r\n display: unset;\r\n }\r\n`\r\n\r\nexport const CustomButton = styled.button``\r\n","import styled from 'styled-components'\r\n\r\nexport const ModalityContainer = styled.div`\r\n margin: 0 1rem;\r\n display: flex;\r\n\t${props => {\r\n if (props.storeDelivery) {\r\n return `border: 1px solid #CECECE;`\r\n } else {\r\n return `border: none;`\r\n }\r\n }}\r\n\tmin-height: 2.25rem;\r\n\tmax-height: 2.25rem;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000'};\r\n border-radius: .5rem;\r\n\r\n &.btn-group button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 5px 15px;\r\n cursor: pointer;\r\n float: left;\r\n font-weight: bold;\r\n border-radius: .5rem;\r\n font-size: .8rem;\r\n\r\n &.active{\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.modalityButtonColor) || '#000'};\r\n border-radius: .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n box-shadow:2px 2px 5px 1px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.shadowModalityButtonColor) || '#000'};\r\n z-index: 1;\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n ${props => {\r\n if (props.opened) {\r\n return `display: none;`\r\n } else {\r\n return `display: unset;`\r\n }\r\n }}\r\n }\r\n\r\n @media (min-width: 70rem) {\r\n display: unset;\r\n }\r\n`\r\nexport const CustomButton = styled.button``\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { CustomButton, ModalityContainer } from './styles'\r\n//import { MULTI_STORE } from '../../../config'\r\n\r\nexport function ModalityMobile(props) {\r\n\tconst {\r\n\t\tstoreDelivery,\r\n\t\topened,\r\n\t\tmodalityId,\r\n\t\tstorePickup,\r\n\t\thandleModality,\r\n\t\thandleGTM,\r\n\t\tcontent,\r\n\t\tstoreName\r\n\t} = props\r\n\r\n\tconst modalitySection = content.filter(item => item.id === 'modality')[0]\r\n\tconst modalitySectionActions = modalitySection.actions\r\n\tconst modalityDeliveryButton = modalitySectionActions.filter(item => item.id === 'delivery')[0]\r\n\tconst modalityDeliveryButtonLabel = modalityDeliveryButton.label\r\n\tconst modalityPickupButton = modalitySectionActions.filter(item => item.id === 'pickup')[0]\r\n\tconst modalityPickupButtonLabel = modalityPickupButton.label\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{storeDelivery && storePickup ? <>\r\n\t\t\t\t { handleModality(4) }}\r\n\t\t\t\t\tclassName={modalityId === 4 ? 'active' : ''}>\r\n\t\t\t\t\t{modalityDeliveryButtonLabel}\r\n\t\t\t\t {\r\n\t\t\t\t\t\thandleModality(2)\r\n\t\t\t\t\t\t//GTM 3.0 - Evento seleção de modalidade retirada\r\n\t\t\t\t\t\tconst dataGTM = {\r\n\t\t\t\t\t\t\t'event': 'modalidade_retirada',\r\n\t\t\t\t\t\t\t'store': storeName,\r\n\t\t\t\t\t\t\t'modalidade_retirada': 'retirar_na_loja'\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tconsole.warn(dataGTM)\r\n\t\t\t\t\t\thandleGTM(dataGTM)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tclassName={modalityId === 2 ? 'active' : ''}>\r\n\t\t\t\t\t{modalityPickupButtonLabel}\r\n\t\t\t\t : null}\r\n\t\t \r\n\t)\r\n}\r\n\r\nModalityMobile.propTypes = {\r\n\thandleModality: PropTypes.func,\r\n\thandleGTM: PropTypes.func,\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { useStore } from 'react-redux'\r\n\r\nimport { ReactComponent as IconNavigation } from '../../assets/icons/icon_navigation.svg'\r\nimport { ReactComponent as IconStoreList } from '../../assets/icons/icon_store_list.svg'\r\nimport { ReactComponent as IconStoreAlter } from '../../assets/icons/icon_store_alter.svg'\r\n\r\nimport history from '../../../history'\r\n\r\nimport {\r\n\tButton\r\n} from '../../components'\r\n\r\nimport {\r\n\tLeftWrapper,\r\n\tRightWrapper,\r\n\tWrapper,\r\n\tCenterWrapper,\r\n} from './styles'\r\nimport { MULTI_STORE } from '../../../config'\r\nimport { ModalityMobile } from '../ModalityMobile'\r\n\r\nexport function Mobile(props) {\r\n\tconst {\r\n\t\tsetVisibleNavigation,\r\n\t\tsetVisibleStoreList,\r\n\t\tmodalityId,\r\n\t\tstoreDelivery,\r\n\t\tstorePickup,\r\n\t\topened,\r\n\t\tcontext,\r\n\t\thandleModality,\r\n\t\thandleGTM,\r\n\t\thandlePixel,\r\n\t\tstoreName\r\n\t} = props\r\n\r\n\tconst store = useStore()\r\n\r\n\tconst { content } = context\r\n\r\n\tconst address = store.getState().address.address || {}\r\n\tconst accessToken = store.getState().user.accessToken || null\r\n\tconst URLParameters = store.getState().main.URLParameters || ''\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{address && address.main && MULTI_STORE === 'true' ? : <>}\r\n\t\t\t \r\n\t\t\t\r\n\t\t\t\t{modalityId && \r\n\t\t\t\r\n\t\t\t\t {\r\n\t\t\t\t\tif (!accessToken) {\r\n\t\t\t\t\t\thistory.push(`/login${URLParameters}`)\r\n\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tsetVisibleNavigation(true)\r\n\t\t\t\t}} />\r\n\t\t\t \r\n\t\t \r\n\t)\r\n}\r\n\r\nMobile.propTypes = {\r\n\tsetVisibleNavigation: PropTypes.func,\r\n\tsetVisibleStoreList: PropTypes.func\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tflex-direction: column;\r\n min-height: 100%;\r\n min-width: 100%;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundBody) || '#CCC'};\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n &.header-full-content--opened {\r\n margin: 0px;\r\n\r\n > main {\r\n margin: 0px;\r\n\r\n\t\t\t\t> div.open-cart{\r\n\t\t\t\t\tright: 21rem;\r\n\t\t\t\t}\r\n }\r\n\r\n > aside {\r\n background: none;\r\n top: 5.625rem;\r\n\t\t\t\tdisplay: unset;\r\n\t\t\t\t${props => props.isSideOpen ? `\r\n\t\t\t\t\tleft: calc(100% - 20rem);\r\n\t\t\t\t\tmin-width: 20rem;\r\n\t\t\t\t\tmax-width: 20rem;\r\n\t\t\t\t` : ``}\r\n\r\n > nav {\r\n min-height: 100%;\r\n }\r\n }\r\n }\r\n\r\n &.side-full-content--opened {\r\n margin: 0px;\r\n\r\n > main {\r\n margin: 0px;\r\n\r\n\t\t\t\t> div.open-cart{\r\n\t\t\t\t\tright: 21rem;\r\n\t\t\t\t}\r\n }\r\n\r\n > aside {\r\n\t\t\t\tdisplay: unset;\r\n\t\t\t\tleft: calc(100% - 20rem);\r\n\t\t\t\tmin-width: 20rem;\r\n\t\t\t\tmax-width: 20rem;\r\n }\r\n }\r\n\r\n\t\t> aside.placed-order {\r\n\t\t\tleft: calc(100% - 20rem);\r\n\t\t\tmin-width: 20rem;\r\n\t\t\tmax-width: 20rem;\r\n\t\t\ttop: 5.5rem;\r\n\t\t\toverflow: hidden;\r\n \toverflow-y: auto;\r\n\t\t}\r\n\r\n @keyframes fade-in {\r\n from {\r\n opacity: 0;\r\n }\r\n to {\r\n opacity: 1;\r\n }\r\n }\r\n \r\n @keyframes fade-out {\r\n from {\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 90rem) {\r\n &.side-full-content--opened,\r\n &.header-full-content--opened {\r\n margin: 0px;\r\n }\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Wrapper } from './styles'\r\nimport { containerMode } from './config'\r\n\r\nexport function PageContainer({\r\n\tisSideOpen,\r\n\tmode,\r\n\tchildren,\r\n\tstyles,\r\n\torderId\r\n}) {\r\n\tconst modeClass = isSideOpen && mode !== 'default' ? mode : ''\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{ children }\r\n\t\t\r\n\t)\r\n}\r\n\r\nPageContainer.propTypes = {\r\n\tisSideOpen: PropTypes.bool,\r\n\tmode: PropTypes.oneOf(Object.values(containerMode)),\r\n\tchildren: PropTypes.node,\r\n\tstyles: PropTypes.arrayOf(PropTypes.shape({})),\r\n\torderId: PropTypes.number\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.header`\r\n\tbackground-color: #fff;\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\tdisplay: unset;\r\n\tmax-height: 5.625rem;\r\n\tmin-height: 5.625rem;\r\n\theight: 5.625rem;\r\n\tz-index: 2;\r\n\r\n\t@media (max-width: 40rem) {\r\n\t\tmax-height: 4.225rem;\r\n\t\tmin-height: 4.225rem;\r\n\t}\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Wrapper } from './styles'\r\n\r\nexport function PageContainerHeader({ children, itemId, isMobile = false }) {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t{!isMobile ? {children} : <>}\r\n\t\t\r\n\t)\r\n}\r\n\r\nPageContainerHeader.propTypes = {\r\n\tchildren: PropTypes.node,\r\n\titemId: PropTypes.number\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.main`\r\n margin: 0;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundMain) || '#CCC'};\r\n min-width: 100%;\r\n max-width: 100%;\r\n min-height: 100%;\r\n\r\n ${ props => props.itemId ? 'display: none;' : ''}\r\n\r\n @media (min-width: 60rem) {\r\n ${props => {\r\n if (props.opened) {\r\n return `max-width: 40rem;\r\n min-width: calc(100% - 20rem);`\r\n } else {\r\n return `max-width: 59.8rem;\r\n min-width: 59.8rem;`\r\n }\r\n }}\r\n ${ props => props.itemId ? 'display: unset;' : ''}\r\n border-left: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n border-right: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n }\r\n\r\n @media (min-width: 80rem) {\r\n ${props => {\r\n if (props.opened) {\r\n return `max-width: 58.8rem;\r\n min-width: 58.8rem;`\r\n } else {\r\n return `max-width: 70rem;\r\n min-width: 58.8rem;`\r\n }\r\n }}\r\n\r\n ${ props => props.itemId ? 'display: unset;' : ''}\r\n border-left: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n border-right: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n }\r\n\r\n\t@media (min-width: 95rem) {\r\n\t\tmax-width: 70rem;\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Wrapper } from './styles'\r\n\r\nexport function PageContainerMain({ children, itemId, opened }) {\r\n return (\r\n {children} \r\n )\r\n}\r\n\r\nPageContainerMain.propTypes = {\r\n\tchildren: PropTypes.node,\r\n\titemId: PropTypes.number,\r\n\topened: PropTypes.bool\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.aside`\r\n\tposition: fixed;\r\n\ttop: 0;\r\n\tright: auto;\r\n\tz-index: 2;\r\n\tdisplay: none;\r\n overflow-y: auto;\r\n\tbackground: #fff;\r\n\toverflow: hidden;\r\n\r\n\t${props => props.opened ? `\r\n\t\tleft: calc(100% - 20rem);\r\n\t\tmin-width: 20rem;\r\n\t\tmax-width: 20rem;\r\n\t` : ``}\r\n\r\n\t&.placed-order {\r\n\t\tz-index: 1;\r\n\t\tdisplay: block;\r\n\r\n\t\t> div {\r\n\t\t\t> div {\r\n\t\t\t\t> ul {\r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`\r\n","import React, { useCallback, useEffect, useState } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Wrapper } from './styles'\r\n\r\nexport function PageContainerSide({\r\n\tchildren,\r\n\tstyles,\r\n\tclassName,\r\n\topened,\r\n\torderId\r\n}) {\r\n\tconst asideElement = document.querySelectorAll('aside')[0]\r\n\r\n\tconst [diff, setDiff] = useState(0)\r\n\r\n\tconst handleResize = useCallback(() => {\r\n\t\tif (asideElement) {\r\n\t\t\tsetDiff(asideElement.classList.contains('placed-order') ? 5.5 * 16 : 0)\r\n\t\t} else {\r\n\t\t\tsetDiff(0)\r\n\t\t}\r\n\r\n\t\tif (asideElement) {\r\n\t\t\tconst asideHeight = window.innerHeight - diff\r\n\t\t\tasideElement.style.height = asideHeight + 'px'\r\n\t\t}\r\n\t}, [\r\n\t\tasideElement,\r\n\t\tdiff\r\n\t])\r\n\r\n\tuseEffect(() => {\r\n\t\twindow.addEventListener('resize', handleResize)\r\n\r\n\t\thandleResize()\r\n\t}, [handleResize])\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{ children }\r\n\t\t \r\n\t)\r\n}\r\n\r\nPageContainerSide.propTypes = {\r\n\tchildren: PropTypes.node,\r\n\tstyles: PropTypes.shape({}),\r\n\tclassName: PropTypes.string,\r\n\topened: PropTypes.bool,\r\n\torderId: PropTypes.number\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n flex: 1;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n display: flex;\r\n ${props => props.maxHeight ?\r\n `max-height: ${ props.maxHeight }px;\r\n min-height: ${ props.maxHeight }px;\r\n overflow: hidden;` :\r\n ``}\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n display: flex;\r\n min-height: 100%;\r\n\r\n > main {\r\n background: #fff;\r\n min-height: 100%;\r\n max-height: 100%;\r\n box-sizing: border-box;\r\n position: relative;\r\n\r\n > div {\r\n &.row {\r\n margin: 0;\r\n\t\t\t\t\tpadding: 1rem;\r\n\r\n > div {\r\n &.column {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n &.center {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n max-width: 60%;\r\n min-width: 60%;\r\n\r\n &.center {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n max-width: 40%;\r\n min-width: 40%;\r\n }\r\n }\r\n\r\n > svg {\r\n flex: 1;\r\n height: unset;\r\n min-height: auto;\r\n max-height: unset;\r\n max-width: 30%;\r\n min-width: 30%;\r\n opacity: .3;\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#CCC' };\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n max-width: 50%;\r\n min-width: 50%;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: unset;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n > div {\r\n > main {\r\n min-height: calc(100% - 5.625rem);\r\n max-height: calc(100% - 5.625rem);\r\n margin: 0px auto;\r\n box-sizing: unset;\r\n\r\n\t\t\t\t> div {\r\n\t\t\t\t\t&.row {\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\tpadding: 1rem 2rem;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\t\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const Content = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n box-sizing: border-box;\r\n justify-content: space-between;\r\n position: relative;\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n svg#contactUsIcon {\r\n margin: 3rem auto;\r\n flex: 1 0 100%;\r\n height: 10rem;\r\n opacity: .5;\r\n padding: 0 3rem 0 3rem;\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#CCC' };\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 1rem 2rem 2rem 2rem;\r\n\r\n svg#contactUsIcon {\r\n margin: 0;\r\n flex: 0 0 30%;\r\n height: 100%;\r\n }\r\n }\r\n`\r\n\r\nexport const ContentHeader = styled.div`\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 1.5rem 1rem;\r\n width: 100%;\r\n position: relative;\r\n\r\n svg {\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n cursor: pointer;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0 0 2rem 0;\r\n padding: .5rem 0;\r\n\r\n svg {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const PageTitle = styled.h3`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: center;\r\n margin: 0;\r\n\r\n @media (min-width: 60rem) {\r\n text-align: start;\r\n }\r\n`\r\n\r\nexport const PageSubtitle = styled.p`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n padding: 0 0 1rem 0;\r\n margin: 0;\r\n`\r\n\r\nexport const PageParagraph = styled.p`\r\n font-weight: 400;\r\n font-size: 1rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n padding: 0 0 2rem 0;\r\n margin: 0;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n flex: 1 0 100%;\r\n max-width: 45rem;\r\n order: 1;\r\n padding: 1rem;\r\n\r\n @media (min-width: 60rem) {\r\n flex: 1 1 65%;\r\n padding: 0;\r\n order: 0;\r\n }\r\n`\r\n\r\nexport const Form = styled.form`\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n\r\n textarea {\r\n resize: none;\r\n overflow: hidden;\r\n height: 10rem;\r\n }\r\n`\r\n\r\nexport const SendButton = styled.button `\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n color: #fff;\r\n text-align: center;\r\n font-weight: 700;\r\n width: 100%;\r\n height: 3rem;\r\n border: 0;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n margin: 2rem 0 0 auto;\r\n\r\n &:hover {\r\n opacity: .9;\r\n }\r\n\r\n &:disabled {\r\n opacity: .4;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n margin: 1rem 0 0 auto;\r\n width: 12rem;\r\n }\r\n`\r\n\r\nexport const ErrorMessage = styled.span`\r\n font-size: .875rem;\r\n margin: 1rem 0 0 0;\r\n color: ${ props => (props.theme && props.theme.colors && props.theme.colors.error) || '#ff0000' };\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0;\r\n }\r\n`\r\n\r\nexport const SuccessMessage = styled.span`\r\n font-size: .875rem;\r\n margin: 1rem 0 0 0;\r\n color: ${ props => (props.theme && props.theme.colors && props.theme.colors.success) || '#00ff00' };\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n text-align: left;\r\n font-size: 1.25rem;\r\n text-transform: uppercase;\r\n padding: 1rem 0;\r\n margin: 1.5rem 2rem 0 2rem;\r\n min-width: calc(100% - 4rem);\r\n }\r\n`\r\n\r\nexport const Row = styled.div.attrs({\r\n className: 'row'\r\n})`\r\n display: flex;\r\n flex-direction: column-reverse;\r\n\r\n @media (min-width: 40rem) {\r\n flex-direction: row;\r\n }\r\n`\r\n\r\nexport const Column = styled.div.attrs({\r\n className: 'column'\r\n})`\r\n flex: 1;\r\n min-width: 100%;\r\n margin-bottom: 2rem;\r\n\r\n @media (min-width: 40rem) {\r\n min-width: unset;\r\n margin-bottom: 0;\r\n }\r\n`\r\n\r\nexport const Message = styled.div`\r\n padding: .5rem .85rem;\r\n margin: 1.5rem 1.5rem 0 1.5rem; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n max-height: 7rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1rem;\r\n\r\n span {\r\n max-width: 100%;\r\n position: relative;\r\n max-height: calc(1rem * 3);\r\n overflow: hidden;\r\n padding-right: .5rem;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &.success{\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #31bf6e;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n }\r\n\r\n &.error{\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n }\r\n \r\n`\r\n","import React, {\r\n\tuseContext,\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport {\r\n\tuseStoreSettings,\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport { ReactComponent as IconContactUs } from '../assets/icons/icon_contact_us.svg'\r\nimport { ReactComponent as IconClose } from '../assets/icons/icon_close.svg'\r\nimport { ReactComponent as IconCheck } from '../assets/icons/icon_check.svg'\r\n\r\nimport {\r\n\tsetModality,\r\n\thandleGTM,\r\n\thandlePixel\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tuseDeviceLayout\r\n} from '../hooks'\r\n\r\nimport {\r\n\tcontactUs\r\n} from '../../state'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent,\r\n\tcaculateProductsQuantity\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tDefaultImage as Image,\r\n\tCustomIcon,\r\n\tInputRounded,\r\n\tCustomLoading\r\n} from '../components'\r\n\r\nimport {\r\n\tCart,\r\n\tCartContainer\r\n} from '../cart'\r\n\r\nimport {\r\n\tMainHeader\r\n} from '../main-header'\r\n\r\nimport {\r\n\tPageContainer,\r\n\tPageContainerHeader,\r\n\tPageContainerMain,\r\n\tPageContainerSide\r\n} from '../page-container'\r\n\r\nimport {\r\n\tNavigation,\r\n} from '..'\r\n\r\nimport {\r\n\tH1,\r\n\tWrapper,\r\n\tBackButton,\r\n\tForm,\r\n\tSendButton,\r\n\tPageSubtitle,\r\n\tPageParagraph,\r\n\tRow,\r\n\tColumn,\r\n\tMessage\r\n} from './styles'\r\n\r\nconst requiredField = {\r\n\tname: 'message',\r\n\tmessage: 'A mensagem é obrigatória'\r\n}\r\n\r\nexport const Context = React.createContext({})\r\n\r\nexport function ContactUsPage(props) {\r\n\tconst {\r\n\t\taccessToken,\r\n\t\taddressDelivery,\r\n\t\tcartProducts,\r\n\t\tsendContactUs,\r\n\t\tcontactUs,\r\n\t\tloading,\r\n\t\tsetContactUs,\r\n\t\ttheme,\r\n\t\taddress,\r\n\t\tuserName,\r\n\t\tstoreName,\r\n\t\tstoreImg,\r\n\t\tmodalityId,\r\n\t\thandlePixel\r\n\t} = props\r\n\r\n\tconst storeImage = theme.headerImage\r\n\tconst storeLogo = theme.logoImage\r\n\r\n\tconst {\r\n\t\turl,\r\n\t\ttitle,\r\n\t\tdescription\r\n\t} = useStoreSettings()\r\n\r\n\tconst context = useContext(Context)\r\n\r\n\tconst isMobile = useDeviceLayout({\r\n\t\tisMobile: true\r\n\t})\r\n\r\n\tconst {\r\n\t\tlayoutMode,\r\n\t\tlayoutModeEnum,\r\n\t\thandleLayoutMode\r\n\t} = useLayout()\r\n\r\n\tconst {\r\n\t\tsidebarContent,\r\n\t\tsidebarOpened,\r\n\t\tsidebarContentEnum,\r\n\t\thandleSidebarContent,\r\n\t\thandleSidebarOpened\r\n\t} = useSidebar()\r\n\r\n\tconst { sections } = useContext(Context)\r\n\tconst [visibleSignIn, setVisibleSignIn] = useState(false)\r\n\tconst [viewCards, setViewCards] = useState(false)\r\n\r\n\tconst contactUsSection = sections && sections.filter(item => item.id === 'send')[0]\r\n\r\n\tconst registeredContactUssSectionTitle = contactUsSection.title\r\n\tconst registeredContactUssSectionText = contactUsSection.text\r\n\r\n\tconst [error, setError] = useState(undefined)\r\n\tconst [success, setSuccess] = useState(false)\r\n\tconst [pending, setPending] = useState(false)\r\n\r\n\tuseEffect(() => {\r\n\t\tif (contactUs && contactUs.notifications && contactUs.notifications.length) {\r\n\t\t\tsetContactUs({\r\n\t\t\t\t...contactUs.notifications[0]\r\n\t\t\t})\r\n\t\t}\r\n\t}, [\r\n\t\tcontactUs,\r\n\t\tsetContactUs,\r\n\t])\r\n\r\n\tasync function handleModality(id) {\r\n\t\tsetModality({ id })\r\n\t}\r\n\r\n\tfunction handleContactUs() {\r\n\r\n\t}\r\n\r\n\tasync function handleSubmit() {\r\n\t\tsetError(undefined)\r\n\t\tsetSuccess(false)\r\n\r\n\t\tif (!contactUs.message) {\r\n\t\t\tsetError(requiredField.message)\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tsetPending(true)\r\n\t\tawait sendContactUs([() => {\r\n\r\n\t\t}, () => {\r\n\t\t\tsetContactUs({ message: '' })\r\n\t\t\tsetSuccess(true)\r\n\t\t}])\r\n\r\n\t\thandlePixel({\r\n\t\t\teventName: 'Contact',\r\n\t\t\tbody: ''\r\n\t\t})\r\n\t\tsetPending(false)\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{`${title} - Fale conosco`} \r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\tsetViewCards(false)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.nav)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tcartClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tisSidebarOpen={sidebarOpened}\r\n\t\t\t\t\t/>\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\twindow.history.back()\r\n\t\t\t\t\t}}>\r\n\t\t\t\t\t\t \r\n\r\n\t\t\t\t\t{!error && success &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tMensagem enviada com sucesso!\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t{error && \r\n\t\t\t\t\t\t{error}\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{registeredContactUssSectionTitle} \r\n\t\t\t\t\t\t\t{registeredContactUssSectionText} \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t
\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t{!isMobile && layoutMode === layoutModeEnum.sideFullContent &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t { }}\r\n\t\t\t\t\t\t\t\thandleClose={() => { }}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t }\r\n\r\n\t\t\t\t\t{layoutMode === layoutModeEnum.headerFullContent && handleContactUs()}\r\n\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\tcurrentRoute='contact-us'\r\n\t\t\t\t\t/>}\r\n\t\t\t\t \r\n\t\t\t\r\n\t\t \r\n\t)\r\n}\r\n\r\nContactUsPage.propTypes = {\r\n\taccessToken: PropTypes.string,\r\n\taddressDelivery: PropTypes.shape({}),\r\n\tcartProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tsendContactUs: PropTypes.func,\r\n\tcontactUs: PropTypes.shape({\r\n\t\tnotifications: PropTypes.arrayOf(PropTypes.shape({})),\r\n\t\tmessage: PropTypes.string\r\n\t}),\r\n\tloading: PropTypes.arrayOf(PropTypes.string),\r\n\tsetContactUs: PropTypes.func,\r\n\ttheme: PropTypes.shape({\r\n\t\theaderImage: PropTypes.string,\r\n\t\tlogoImage: PropTypes.string\r\n\t}),\r\n\taddress: PropTypes.shape({}),\r\n\tuserName: PropTypes.string,\r\n\tstoreName: PropTypes.string,\r\n\tstoreImg: PropTypes.string,\r\n\tmodalityId: PropTypes.number\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\taccessToken: state.user.accessToken,\r\n\t\taddressDelivery: state.address.addressByCEP || '',\r\n\t\tcartProducts: (state.main.cart && state.main.cart.products) || [],\r\n\t\tloading: state.loading.loading || [],\r\n\t\tcoupon: state.main.coupon || {},\r\n\t\tcontactUs: state.main.contactUs || { message: '', notifications: [] },\r\n\t\taddress: state.address.address || {},\r\n\t\tuserAddresses: state.userAddress.userAddresses || [],\r\n\t\tuserHistory: state.main.userHistory || {},\r\n\t\tuserName: state.user.name || '',\r\n\t\tstoreImg: (state.store.store && state.store.store.logo) || '',\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t\tstoreName: state.store.store && state.store.store.name\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tsendContactUs: contactUs.sendContactUs,\r\n\tsetContactUs: contactUs.setContactUs,\r\n\r\n\tsetModality,\r\n\thandleGTM,\r\n\thandlePixel\r\n})\r\n\r\nexport const ContactUs = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'contact-us' })\r\n)(ContactUsPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin: 0 1.25rem 0;\r\n flex-direction: row;\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0 2rem 1rem;\r\n }\r\n`\r\n\r\nexport const CouponInputContainer = styled.div`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n margin: 0;\r\n flex: 1;\r\n min-width: calc(100% - 6.5rem);\r\n max-width: calc(100% - 6.5rem);\r\n margin-right: .5rem;\r\n\r\n input {\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#EEE' };\r\n flex: 1;\r\n width: 100%;\r\n min-width: 100%;\r\n max-width: 100%;\r\n font-size: .7rem;\r\n padding: .5rem .5rem .5rem 2.25rem;\r\n\r\n &::placeholder {\r\n font-size: .7rem;\r\n }\r\n\r\n &:focus {\r\n background: #fff;\r\n }\r\n }\r\n\r\n svg {\r\n position: absolute;\r\n left: .5rem;\r\n width: 1.5rem;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' };\r\n stroke: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' };\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n max-width: 20rem;\r\n min-width: 20rem;\r\n margin-right: 1rem;\r\n\r\n input {\r\n font-size: 1rem;\r\n\r\n &::placeholder {\r\n font-size: 1rem;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const RegisterButton = styled.button `\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n color: #fff;\r\n text-align: center;\r\n font-weight: 700;\r\n max-width: 6rem;\r\n min-width: 6rem;\r\n height: 3rem;\r\n border: 0;\r\n border-radius: 1rem;\r\n cursor: pointer;\r\n flex: 1;\r\n\r\n &:hover {\r\n opacity: .9;\r\n }\r\n`\r\n","import React, {\r\n useContext, useState\r\n} from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport { ReactComponent as CouponIcon } from '../../assets/icons/icon_coupon.svg'\r\n\r\nimport { InputRounded } from '../../components'\r\n\r\nimport {\r\n coupon\r\n} from '../../../state'\r\n\r\nimport {\r\n pipe\r\n} from '../../../domain/helpers'\r\n\r\nimport {\r\n CouponInputContainer,\r\n Wrapper,\r\n RegisterButton\r\n} from './styles'\r\n\r\nimport {\r\n Context\r\n} from '../'\r\n\r\nexport const NewCouponComponent = (props) => {\r\n const {\r\n addCoupon,\r\n setSelectedCoupon,\r\n fetchCoupons,\r\n coupon,\r\n setNotificationSucess,\r\n setNotificationError\r\n } = props\r\n\r\n const context = useContext(Context)\r\n\r\n const {sections} = context\r\n const section = sections.filter(item => item.id === 'new-coupon')[0]\r\n const sectionContent = section.content.filter(item => item.id === 'main-content')[0]\r\n const sectionActions = sectionContent.actions\r\n const sectionFields = sectionContent.fields\r\n const registerButton = sectionActions.filter(item => item.id === 'register-button')[0]\r\n const registerButtonLabel = registerButton.label\r\n const couponInput = sectionFields.filter(item => item.id === 'coupon-input')[0]\r\n const couponInputLabel = couponInput.label\r\n\r\n useState(() =>{\r\n setSelectedCoupon('')\r\n }, [])\r\n \r\n function handleAdd() {\r\n addCoupon([(coupon) => {\r\n setNotificationError({\r\n type: 'negative',\r\n text: `${coupon.message}`\r\n })\r\n setTimeout(() => {\r\n setNotificationError(null)\r\n }, 6500)\r\n }, (coupon) => {\r\n setNotificationSucess({\r\n type: 'positive',\r\n text: 'O cupom foi cadastrado com sucesso e já pode ser utilizado!'\r\n })\r\n setTimeout(() => {\r\n setNotificationSucess(null)\r\n }, 6500)\r\n setSelectedCoupon('')\r\n\r\n fetchCoupons()\r\n }])\r\n }\r\n\r\n return (\r\n \r\n \r\n {\r\n setSelectedCoupon(event.target.value)\r\n }} />\r\n \r\n {\r\n handleAdd()\r\n }}>{registerButtonLabel} \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n coupon: (state.main && state.main.couponField) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n addCoupon: coupon.addCoupon,\r\n setSelectedCoupon: coupon.setSelectedCoupon\r\n})\r\n\r\nexport const NewCoupon = React.memo(pipe(\r\n GetConnection\r\n)(NewCouponComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n ${props => props.maxHeight ?\r\n `max-height: ${ props.maxHeight }px;\r\n min-height: ${ props.maxHeight }px;\r\n overflow: hidden;` :\r\n ``}\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n display: flex;\r\n min-height: 100%;\r\n\t\tflex: 1;\r\n\r\n > main {\r\n background: #fff;\r\n min-height: 100%;\r\n max-height: 100%;\r\n box-sizing: border-box;\r\n position: relative;\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: unset;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n > div {\r\n > main {\r\n min-height: calc(100% - 5.625rem);\r\n max-height: calc(100% - 5.625rem);\r\n margin: 0px auto;\r\n box-sizing: unset;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n text-align: left;\r\n font-size: 1.25rem;\r\n text-transform: uppercase;\r\n padding: 1rem 0;\r\n margin: 1.5rem 2rem 0 2rem;\r\n min-width: calc(100% - 4rem);\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: 0 none;\r\n padding: 1.5rem 0 .5rem 0;\r\n margin: 0 1.25rem .5rem;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n padding: 2rem 0 .5rem 0;\r\n margin: 0 2rem;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n\r\n @media (min-width: 40rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const Div = styled.div`\r\n padding: 1.5rem 0 .5rem 0;\r\n margin: 0 1.25rem .5rem; \r\n`\r\n\r\nexport const Message = styled.div`\r\n padding: .5rem .85rem;\r\n margin: 0 0 1.5rem 0; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n max-height: 7rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1rem;\r\n\r\n span {\r\n max-width: 100%;\r\n position: relative;\r\n max-height: calc(1rem * 3);\r\n overflow: hidden;\r\n padding-right: .5rem;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &.success{\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #31bf6e;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n }\r\n\r\n &.error{\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n }\r\n`\r\n","import React, { useEffect, useState } from 'react'\r\nimport { Dialog, DialogContent } from '@material-ui/core'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport moment from 'moment'\r\n\r\nimport { ReactComponent as InfoIcon } from '../../assets/icons/icon_info.svg'\r\nimport { CustomIcon } from '../../components'\r\n\r\nimport {\r\n\tWrapper,\r\n\tH2,\r\n\tH3,\r\n\tParagraph,\r\n\tButton,\r\n\tTitle,\r\n\tCloseButton\r\n} from './styles'\r\n\r\nconst useStyles = makeStyles({\r\n\tpaper: {\r\n\t\tmargin: 0,\r\n\t\tposition: 'absolute',\r\n\t\tbottom: '-10px'\r\n\t},\r\n\tpaperWidthMd: {\r\n\t\twidth: '100%',\r\n\t},\r\n\tpaperWidthMdMobile: {\r\n\t\twidth: '400px'\r\n\t}\r\n});\r\n\r\nexport function CouponOverlay(props) {\r\n\tconst {\r\n\t\tcode,\r\n\t\toverlay,\r\n\t\tsetOverlay,\r\n\t\tquickDescription,\r\n\t\taddedAt,\r\n\t\texpirationAt,\r\n\t\tdescription,\r\n\t\texpiration,\r\n\t\tisMobile = false\r\n\t} = props\r\n\tconst classes = useStyles();\r\n\tconst maxWidth = 'md';\r\n\r\n\tconst [expired, setExpired] = useState(false)\r\n\r\n\tuseEffect(() => {\r\n\t\tif (expiration) {\r\n\t\t\tsetExpired(true)\r\n\t\t\treturn\r\n\t\t}\r\n\t\t\r\n\t\tsetExpired(false)\r\n\t}, [expiration])\r\n\r\n\treturn setOverlay(false)}\r\n\t\taria-labelledby={`coupon-dialog-title`}\r\n\t\taria-describedby={`coupon-dialog-description`}\r\n\t\tmaxWidth={maxWidth}\r\n\t\tclasses={isMobile ? { paper: classes.paper, paperWidthMd: classes.paperWidthMd } : { paperWidthMd: classes.paperWidthMdMobile }}\r\n\t\tclassName='coupon-detail'\r\n\t\tPaperProps={{ style: { borderRadius: !isMobile ? '16px' : '10px' } }}\r\n\t>\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t {\r\n\t\t\t\t\tsetOverlay(false)\r\n\t\t\t\t}}>\r\n\t\t\t\t\t \r\n\r\n\t\t\t\t\r\n\t\t\t\t\t<InfoIcon />\r\n\t\t\t\t\t<H2>Informações de uso </H2>\r\n\t\t\t\t \r\n\r\n\t\t\t\t{quickDescription} \r\n\r\n\t\t\t\tCupom adicionado em {moment(addedAt).format('DD/MM/YYYY')} \r\n\r\n\t\t\t\t{expired ? Este cupom expirou em {moment(expirationAt).format('DD/MM/YYYY')} :\r\n\t\t\t\tPode ser usado até {moment(expirationAt).format('DD/MM/YYYY')} }\r\n\r\n\t\t\t\t{description} \r\n\r\n\t\t\t\t\r\n\t\t\t \r\n\t\t \r\n\t\r\n}\r\n","import React, {\r\n useContext,\r\n useEffect,\r\n useState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport {\r\n useStoreSettings,\r\n useDeviceLayout,\r\n useLayout,\r\n useSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n logout,\r\n setModality\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n cart,\r\n coupon\r\n} from '../../state'\r\n\r\nimport {\r\n pipe,\r\n GetContent,\r\n caculateProductsQuantity\r\n} from '../../domain/helpers'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n DefaultImage as Image,\r\n CustomIcon\r\n} from '../components'\r\n\r\nimport {\r\n Cart,\r\n CartContainer\r\n} from '../cart'\r\n\r\nimport {\r\n MainHeader\r\n} from '../main-header'\r\n\r\nimport {\r\n PageContainer,\r\n PageContainerHeader,\r\n PageContainerMain,\r\n PageContainerSide\r\n} from '../page-container'\r\n\r\nimport {\r\n Skeleton,\r\n Navigation,\r\n} from '..'\r\n\r\nimport { NewCoupon } from './new-coupon'\r\n\r\nimport { Content } from './content'\r\nimport { EmptyContent } from './empty-content'\r\n\r\nimport {\r\n H1,\r\n H2,\r\n Wrapper,\r\n LoadingWrapper,\r\n BackButton,\r\n Div,\r\n\tMessage\r\n} from './styles'\r\nimport { CouponOverlay } from './CouponOverlay'\r\n\r\nimport { ReactComponent as IconCheck } from '../assets/icons/icon_check.svg'\r\nimport { ReactComponent as IconClose } from '../assets/icons/icon_close.svg'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nexport function CouponsPage(props) {\r\n const {\r\n accessToken,\r\n addressDelivery,\r\n cartProducts,\r\n fetchCoupons,\r\n loading,\r\n coupon,\r\n couponCpf,\r\n setCoupon,\r\n theme,\r\n address,\r\n userName,\r\n match,\r\n registeredCoupons,\r\n storeName,\r\n storeImg,\r\n modalityId,\r\n URLParameters\r\n } = props\r\n\r\n const storeImage = theme.headerImage\r\n const storeLogo = theme.logoImage\r\n\r\n const {\r\n layoutMode,\r\n layoutModeEnum,\r\n handleLayoutMode\r\n } = useLayout()\r\n\r\n const {\r\n sidebarContent,\r\n sidebarOpened,\r\n sidebarContentEnum,\r\n handleSidebarContent,\r\n handleSidebarOpened\r\n } = useSidebar()\r\n\r\n const context = useContext(Context)\r\n\r\n const {\r\n url,\r\n title,\r\n description\r\n } = useStoreSettings()\r\n\r\n const isMobile = useDeviceLayout({\r\n isMobile: true\r\n })\r\n\r\n const stateCouponId = coupon && coupon.id\r\n const couponId = (match.params && Number(match.params.couponId)) || null\r\n const { sections } = useContext(Context)\r\n const [visibleSignIn, setVisibleSignIn] = useState(false)\r\n const [viewCards, setViewCards] = useState(false)\r\n const [viewModalDatails, setViewModalDatails] = useState(false)\r\n const { coupons = [] } = registeredCoupons\r\n const [notificationSucess, setNotificationSucess] = useState(null)\r\n const [notificationError, setNotificationError] = useState(null)\r\n\r\n const registeredCouponsSection = sections && sections.filter(item => item.id === 'registered-coupons')[0]\r\n const newCouponSection = sections && sections.filter(item => item.id === 'new-coupon')[0]\r\n\r\n const registeredCouponsSectionTitle = registeredCouponsSection.title\r\n const registeredCouponsSelectedSectionName = registeredCoupons && registeredCoupons.coupons && registeredCoupons.coupons.length ? 'main-content' : 'empty-content'\r\n const registeredCouponsSelectedSection = registeredCouponsSection.content.filter(item => item.id === registeredCouponsSelectedSectionName)[0]\r\n\r\n const newCouponSectionTitle = newCouponSection.title\r\n\r\n useEffect(() => {\r\n setTimeout(() => fetchCoupons(), 500)\r\n }, [\r\n fetchCoupons\r\n ])\r\n\r\n useEffect(() => {\r\n if (couponId && couponId !== stateCouponId) {\r\n\r\n const selectedCoupon = registeredCoupons && registeredCoupons.coupons && registeredCoupons.coupons.filter(item => item.id === couponId)[0]\r\n\r\n setCoupon({\r\n id: couponId,\r\n ...selectedCoupon\r\n })\r\n\r\n if (couponId > 0) {\r\n setViewModalDatails(true)\r\n }\r\n }\r\n }, [\r\n isMobile,\r\n couponCpf,\r\n couponId,\r\n registeredCoupons,\r\n setCoupon,\r\n stateCouponId,\r\n handleLayoutMode,\r\n handleSidebarContent,\r\n handleSidebarOpened,\r\n layoutModeEnum,\r\n sidebarContentEnum\r\n ])\r\n\r\n async function handleModality(id) {\r\n setModality({ id })\r\n\r\n await fetchCoupons()\r\n }\r\n\r\n function handleContactUs() {\r\n history.push(`/contact-us${URLParameters}`)\r\n }\r\n\r\n function handleCoupon({\r\n id\r\n }) {\r\n setViewModalDatails(true)\r\n history.push(`/coupons/${id}${URLParameters}`)\r\n }\r\n\r\n return (\r\n \r\n \r\n {`${title} - Meus cupons`} \r\n \r\n \r\n \r\n\r\n {loading.includes('coupons-history') && \r\n }\r\n\r\n {!loading.includes('coupons-history') && \r\n \r\n {\r\n handleLayoutMode(layoutModeEnum.default)\r\n handleSidebarContent(sidebarContentEnum.default)\r\n handleSidebarOpened(false)\r\n setViewCards(false)\r\n }}\r\n userClicked={() => {\r\n if (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n handleLayoutMode(layoutModeEnum.default)\r\n handleSidebarContent(sidebarContentEnum.default)\r\n handleSidebarOpened(false)\r\n history.push('/coupons')\r\n setCoupon({ id: 0 })\r\n } else {\r\n handleLayoutMode(layoutModeEnum.headerFullContent)\r\n handleSidebarContent(sidebarContentEnum.nav)\r\n handleSidebarOpened(true)\r\n history.push('/coupons')\r\n setCoupon({ id: 0 })\r\n }\r\n }}\r\n cartClicked={() => {\r\n if (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n handleLayoutMode(layoutModeEnum.default)\r\n handleSidebarContent(sidebarContentEnum.default)\r\n handleSidebarOpened(false)\r\n history.push('/coupons')\r\n setCoupon({ id: 0 })\r\n } else {\r\n handleLayoutMode(layoutModeEnum.sideFullContent)\r\n handleSidebarContent(sidebarContentEnum.cart)\r\n handleSidebarOpened(true)\r\n history.push('/coupons')\r\n setCoupon({ id: 0 })\r\n }\r\n }}\r\n isSidebarOpen={sidebarOpened}\r\n />\r\n \r\n \r\n <>\r\n {\r\n window.history.back()\r\n }}>\r\n \r\n\r\n \r\n \r\n {!isMobile && layoutMode === layoutModeEnum.sideFullContent && \r\n { }}\r\n handleClose={() => { }}\r\n />\r\n }\r\n\r\n {layoutMode === layoutModeEnum.headerFullContent && handleContactUs()}\r\n userName={userName}\r\n currentRoute='coupons'\r\n />}\r\n\r\n {viewModalDatails && \r\n }\r\n \r\n )\r\n}\r\n\r\nCouponsPage.propTypes = {\r\n accessToken: PropTypes.string,\r\n addressDelivery: PropTypes.string,\r\n cartProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n fetchCoupons: PropTypes.func,\r\n loading: PropTypes.arrayOf(PropTypes.string),\r\n coupon: PropTypes.shape({\r\n id: PropTypes.number,\r\n code: PropTypes.string,\r\n quickDescription: PropTypes.string,\r\n description: PropTypes.string,\r\n expiration: PropTypes.string,\r\n value: PropTypes.number,\r\n maxValue: PropTypes.number,\r\n minValue: PropTypes.number,\r\n type: PropTypes.number,\r\n addedAt: PropTypes.number,\r\n expirationAt: PropTypes.string,\r\n pickupValue: PropTypes.number,\r\n pickupMaxValue: PropTypes.number,\r\n pickupMinValue: PropTypes.number,\r\n pickupType: PropTypes.number\r\n }),\r\n couponCpf: PropTypes.string,\r\n setCoupon: PropTypes.func,\r\n theme: PropTypes.shape({\r\n headerImage: PropTypes.string,\r\n logoImage: PropTypes.string,\r\n }),\r\n address: PropTypes.string,\r\n userName: PropTypes.string,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n couponId: PropTypes.number\r\n })\r\n }),\r\n registeredCoupons: PropTypes.shape({\r\n coupons: PropTypes.arrayOf(PropTypes.shape({\r\n\r\n }))\r\n }),\r\n storeName: PropTypes.string,\r\n storeImg: PropTypes.string,\r\n modalityId: PropTypes.number,\r\n URLParameters: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n accessToken: state.user.accessToken,\r\n addressDelivery: state.address.addressByCEP || '',\r\n cartProducts: (state.main.cart && state.main.cart.products) || [],\r\n loading: state.loading.loading || [],\r\n coupon: state.main.coupon || {},\r\n registeredCoupons: state.main.coupons || { coupons: [] },\r\n address: state.address.address || '',\r\n userAddresses: state.userAddress.userAddresses || [],\r\n userHistory: state.main.userHistory || {},\r\n userName: state.user.name || '',\r\n storeImg: (state.store.store && state.store.store.logo) || '',\r\n modalityId: state.main.modality && state.main.modality.id,\r\n storeName: state.store.store && state.store.store.name,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchCart: cart.fetchCart,\r\n fetchCoupons: coupon.fetchCoupons,\r\n logout,\r\n setCoupon: coupon.setCoupon,\r\n setModality\r\n})\r\n\r\nexport const Coupons = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'coupons' })\r\n)(CouponsPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n border: #eee .063rem solid;\r\n padding: 1.25rem;\r\n margin: 1.25rem;\r\n`\r\n\r\nexport const H4 = styled.h4``\r\nexport const Div = styled.div`\r\n overflow-wrap: anywhere;\r\n`\r\nexport const Paragraph = styled.p``\r\nexport const Strong = styled.strong``\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n max-height: 2.5rem;\r\n min-height: 2.5rem; \r\n z-index: 2;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundMain) || '#999' };\r\n padding-left: 1.25rem;\r\n margin-top: 1rem;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#999' } .063rem solid;\r\n transition: all .5s ease-out;\r\n display: none;\r\n\r\n ${ props => {\r\n if (props.fixed) {\r\n return `position: fixed; top: 47px; left: 0; opacity: 1; overflow: hidden; margin-top: 0; background: #fff; display: unset;`\r\n }\r\n\r\n return ``\r\n }}\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const ListWrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n overflow-x: scroll;\r\n overflow: -moz-scrollbars-none;\r\n -ms-overflow-style: none;\r\n max-height: 3.75rem;\r\n min-height: 3.75rem;\r\n height: 2.5rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n transition: all .25s ease-in;\r\n\r\n &::-webkit-scrollbar {\r\n width: 0 !important\r\n }\r\n \r\n > a{\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n font-weight: bold;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#999' };\r\n font-size: .875rem;\r\n padding-bottom: .625rem;\r\n min-height: 2.5rem;\r\n max-height: 2.5rem;\r\n line-height: 2.5rem;\r\n padding: 0;\r\n transition: all .25s;\r\n text-decoration: none;\r\n margin-right: 1.25rem;\r\n padding: 0 .125rem;\r\n\r\n &:hover, &:active, &.active {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' } .125rem solid;\r\n text-decoration: none;\r\n font-size: 1rem;\r\n }\r\n\r\n &:last-child {\r\n margin-right: 1.25rem;\r\n padding-right: 1.25rem;\r\n }\r\n }\r\n`\r\n","import React, {\r\n useEffect,\r\n useState\r\n} from 'react'\r\n\r\nimport {\r\n Link\r\n} from 'react-scroll'\r\n\r\nimport {\r\n Wrapper,\r\n ListWrapper\r\n} from './styles'\r\n\r\nexport function Categories(props) {\r\n const {\r\n data \r\n } = props\r\n\r\n const [fixed, setFixed] = useState(false)\r\n \r\n useEffect(() => {\r\n const handleScroll = () => {\r\n if (window.scrollY > 400 && !fixed) {\r\n setFixed(true)\r\n } else if (window.scrollY < 400 && !!fixed) {\r\n setFixed(false)\r\n }\r\n }\r\n\r\n window.addEventListener('scroll', handleScroll, true)\r\n\r\n return () => {\r\n window.removeEventListener('scroll', handleScroll)\r\n }\r\n }, [\r\n fixed\r\n ])\r\n\r\n function handleScrollCategory () {\r\n const itemActive = document.getElementsByClassName('active')\r\n const mapItemActive = Array.from(itemActive)\r\n const finishMapItem = mapItemActive && mapItemActive.length ? mapItemActive[0].classList[0] : ''\r\n\r\n if (finishMapItem && finishMapItem.length){\r\n localStorage.setItem('scrollCategory' ,finishMapItem)\r\n\r\n const categoryClassName = localStorage.getItem('scrollCategory')\r\n\r\n const categoryItemSelector = document.querySelector(`#store-categories > div > a.${categoryClassName}`)\r\n const categoryItem = categoryItemSelector\r\n\r\n const scrolledCategoriesHolder = document.querySelector(`#store-categories > div`)\r\n\r\n scrolledCategoriesHolder.scrollLeft = categoryItem && categoryItem.offsetLeft - 30\r\n }\r\n }\r\n\r\n return \r\n \r\n { data && data.length && data.map((mappedItem, index) => {\r\n const key = `store-categories-items-${index}}`\r\n const {\r\n name\r\n } = mappedItem\r\n\r\n const categoryClassName = String(name).replace(/&/g, '&').toLowerCase().replace(/ /g, '-').replace(/[^a-zA-Z]/g, '')\r\n\r\n return \r\n {name}\r\n \r\n }) }\r\n \r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n background: #fff;\r\n max-height: 5.625rem;\r\n min-height: 5.625rem;\r\n padding: 1.25rem;\r\n box-shadow: 7px -3px .313rem #cecece;\r\n cursor: pointer;\r\n position: fixed;\r\n left: 0;\r\n bottom: 0;\r\n max-width: 100%;\r\n min-width: 100%;\r\n z-index: 1;\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const Button = styled.div`\r\n flex: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: .938rem;\r\n min-height: 100%;\r\n max-height: 100%;\r\n min-width: 100%;\r\n padding: .625rem;\r\n box-sizing: border-box;\r\n height: 3.438rem;\r\n\r\n > span {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' };\r\n font-size: .875rem;\r\n font-weight: bold;\r\n }\r\n \r\n > div {\r\n &.icon {\r\n position: relative;\r\n\r\n > span {\r\n &.quantity {\r\n position: absolute;\r\n right: -.313rem;\r\n top: 0;\r\n color: #fff;\r\n font-size: .625rem;\r\n line-height: .625rem;\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' } .125rem solid;\r\n height: 1rem;\r\n width: 1rem;\r\n border-radius: 50%;\r\n text-align: center;\r\n vertical-align: middle;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-weight: bold;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n }\r\n\r\n > span {\r\n &.icon {\r\n > svg {\r\n width: 1.875rem;\r\n height: auto;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const Span = styled.span``\r\n\r\nexport const Div = styled.div``\r\n","import React, {\r\n useEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n connect\r\n} from 'react-redux'\r\n\r\nimport {\r\n pipe\r\n} from '../../../domain/helpers'\r\n\r\nimport { Icon } from '../../components/common'\r\n\r\nimport {\r\n Wrapper,\r\n Button,\r\n Span,\r\n Div\r\n} from './styles'\r\n\r\nconst calculateCartTotal = (items) => {\r\n\tconst total = items && items.reduce((acc, item) => acc + calculateItemTotal(item), 0)\r\n\r\n return total\r\n}\r\n\r\nconst calculateItemTotal = (item) => {\r\n const {\r\n selectedAdditionals\r\n } = item\r\n\r\n const valorFinalProduct = item.promotionalValue || item.value\r\n\r\n const selectedAdditionalsGroups = selectedAdditionals && selectedAdditionals.length && selectedAdditionals.map((mappedItem) => {\r\n const selectedAdditionalsMaximum = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 3)\r\n const selectedAdditionalsAverage = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 2)\r\n const selectedAdditionalsFixes = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 1)\r\n\r\n const additionalsMaximumTotal = (selectedAdditionalsMaximum && selectedAdditionalsMaximum.length && Math.max.apply(Math, selectedAdditionalsMaximum.map((selectedAdditionalsMaximumItem) => selectedAdditionalsMaximumItem.value ))) || 0\r\n const additionalsAverageTotal = selectedAdditionalsAverage && selectedAdditionalsAverage.length ? (selectedAdditionalsAverage.reduce((acc, current) => Number(acc + current.value), [])) / selectedAdditionalsAverage.length : 0\r\n const additionalsFixesTotal = selectedAdditionalsFixes && selectedAdditionalsFixes.length ? selectedAdditionalsFixes.reduce((acc, current) => {\r\n\t\t\tif (current.quantity > 1) {\r\n\t\t\t\treturn Number(acc + (current.value * current.quantity))\r\n\t\t\t}\r\n\r\n\t\t\treturn Number(acc + current.value)\r\n\t\t}, []) : 0\r\n\r\n return additionalsMaximumTotal + additionalsAverageTotal + additionalsFixesTotal\r\n })\r\n const selectedAdditionalsGroupsTotal = (selectedAdditionalsGroups && selectedAdditionalsGroups.length && selectedAdditionalsGroups.reduce((acc, current) => Number(acc + current), [])) || 0\r\n\r\n const total = item.quantity * (valorFinalProduct + selectedAdditionalsGroupsTotal)\r\n\r\n return total\r\n}\r\n\r\nconst calculateQuantityTotal = (items) => {\r\n\tconst total = items && items.reduce((acc, item) => acc + calculateItemQuantity(item), 0)\r\n\r\n return total\r\n}\r\n\r\nconst calculateItemQuantity = (item) => {\r\n const total = item.quantity \r\n\r\n return total\r\n}\r\n\r\nfunction CartBarComponent(props) {\r\n const {\r\n data,\r\n handleClick\r\n } = props\r\n\r\n useEffect(() => {\r\n return () => {}\r\n }, [])\r\n\r\n const valueTotal = calculateCartTotal(data)\r\n const quantityTotal = calculateQuantityTotal(data)\r\n\r\n const newProps = Object.assign( {}, props )\r\n\r\n delete newProps.data\r\n\r\n return valueTotal ? {\r\n handleClick()\r\n }}>\r\n \r\n : null\r\n}\r\n\r\nCartBarComponent.propTypes = {\r\n handleClick: PropTypes.func,\r\n data: PropTypes.arrayOf(PropTypes.shape({}))\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n data: (state.main.cart && state.main.cart.products) || []\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const CartBar = React.memo(pipe(\r\n GetConnection\r\n)(CartBarComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSixthColor) || '#e2e2e2'};\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: .625rem;\r\n font-size: .688rem;\r\n padding: .125rem .125rem;\r\n line-height: 1.5rem;\r\n height: 1.5rem;\r\n box-sizing: border-box;\r\n min-width: calc(100% - 2.5rem);\r\n max-width: calc(100% - 2.5rem);\r\n text-align: center;\r\n margin-bottom: 1.25rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n & img {\r\n padding: .375rem .313rem 0 0\r\n }\r\n\r\n & .custom-icon {\r\n padding: 0 .313rem\r\n }\r\n`\r\n","import React, {\r\n useEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nimport { Icon } from './../../components/common'\r\nimport { CustomIcon } from '../../components'\r\n\r\nexport function Coupon(props) {\r\n const {\r\n data,\r\n show\r\n } = props\r\n\r\n useEffect(() => {\r\n return () => { }\r\n }, [])\r\n\r\n if (!show || !data) {\r\n return null\r\n }\r\n\r\n const {\r\n description,\r\n value,\r\n minValue,\r\n typeValueModalityDelivery\r\n } = data\r\n\r\n if(typeValueModalityDelivery){\r\n return (<>\r\n {data && description && \r\n }\r\n )\r\n }\r\n\r\n return (<>\r\n {data && description && \r\n }\r\n )\r\n}\r\n\r\nCoupon.propTypes = {\r\n data: PropTypes.shape({})\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const CategoryWrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: calc(100% + 1.25rem);\r\n max-width: calc(100% + 1.25rem);\r\n overflow: hidden;\r\n max-height: 24rem;\r\n min-height: 24rem;\r\n`\r\nexport const H1 = styled.h1`\r\n margin: 0;\r\n padding: 0;\r\n min-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey01) || '#e2e2e2'} .063rem solid;\r\n padding-bottom: 1.25rem;\r\n margin-bottom: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n font-size: 1.125rem;\r\n flex: none;\r\n line-height: 1rem;\r\n position: relative;\r\n\r\n > span {\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 1.25rem;\r\n transform: translate(0, -1.25rem);\r\n }\r\n`\r\n\r\nexport const Span = styled.span``\r\n\r\nexport const Button = styled.button`\r\n background: #fff;\r\n padding: 0;\r\n margin: 0;\r\n\r\n float: left;\r\n &.disabled{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.greyMedium) || '#333'};\r\n }\r\n`\r\nexport const Actions = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n position:absolute;\r\n margin-top: 6rem;\r\n\r\n min-width: ${props => {\r\n if (props.maxWidth) {\r\n return `${props.maxWidth}px`\r\n }\r\n\r\n return '100%'\r\n }};\r\n max-width: ${props => {\r\n if (props.maxWidth) {\r\n return `${props.maxWidth}px`\r\n }\r\n\r\n return '100%'\r\n }};\r\n\r\n > button {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey01) || '#333'} .125rem solid;\r\n border-radius: 50%;\r\n flex: 1;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n font-size: .888rem;\r\n min-width: 2rem;\r\n min-height: 2rem;\r\n max-width: 2rem;\r\n max-height: 2rem;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n @media (max-width: 60rem){\r\n display: none;\r\n }\r\n`\r\n","import React, {\r\n useEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n connect\r\n} from 'react-redux'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../../domain/helpers'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport {\r\n CategoryWrapper,\r\n H1,\r\n Span,\r\n Button,\r\n Actions\r\n} from './styles'\r\n\r\nimport {\r\n List\r\n} from '.'\r\n\r\nconst Context = React.createContext({})\r\n\r\nfunction HorizontalMenuComponent(props) {\r\n const {\r\n selectedProduct,\r\n handleViewProduct,\r\n handleAddProduct,\r\n handleViewCategoriesProducts,\r\n categories,\r\n storeLogo,\r\n status,\r\n storeImg,\r\n setVisibleCategories,\r\n opened\r\n } = props\r\n\r\n useEffect(() => {\r\n const products = []\r\n\r\n if (categories && categories.length) {\r\n categories.forEach(function (item) {\r\n products.push(item.products)\r\n })\r\n }\r\n\r\n return () => { }\r\n }, [\r\n categories\r\n ])\r\n\r\n useEffect(() => {\r\n const products = []\r\n\r\n if (categories) {\r\n categories.forEach(function (item) {\r\n products.push(item.products)\r\n })\r\n }\r\n\r\n return () => { }\r\n }, [\r\n categories\r\n ])\r\n\r\n function handleCategoriesProducts(name) {\r\n const params = {\r\n name,\r\n selectedProductsCategories: true,\r\n openModalCategory: true\r\n }\r\n\r\n handleViewCategoriesProducts(params)\r\n }\r\n\r\n if (selectedProduct) {\r\n return null\r\n }\r\n\r\n const handleScrollLeft = (categorie) => {\r\n document.getElementById(`list-${categorie}`).scrollLeft += 100\r\n }\r\n\r\n const handleScrollRight = (categorie) => {\r\n document.getElementById(`list-${categorie}`).scrollLeft -= 100\r\n }\r\n\r\n return <>\r\n {categories && categories.length && categories.map((mappedItem, index) => {\r\n const {\r\n products,\r\n name: categoryName,\r\n id: categoryId\r\n } = mappedItem\r\n\r\n let hasScroll = null\r\n let maxwidth = null\r\n let div = document.getElementById(`list-${categoryName}`)\r\n\r\n if (div) {\r\n const max = div.getBoundingClientRect()\r\n const hasHorizontalScrollbar = div.scrollWidth > div.clientWidth\r\n hasScroll = hasHorizontalScrollbar\r\n\r\n maxwidth = max.width\r\n }\r\n\r\n const key = `stores-products-category-${categoryId}-${index}`\r\n\r\n return \r\n {mappedItem.name}\r\n { \r\n handleCategoriesProducts(mappedItem.name)\r\n setVisibleCategories(true)\r\n }}>Ver tudo
\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\nHorizontalMenuComponent.propTypes = {\r\n categories: PropTypes.arrayOf(PropTypes.shape({})),\r\n handleAddProduct: PropTypes.func,\r\n handleViewCategoriesProducts: PropTypes.func,\r\n handleViewProduct: PropTypes.func,\r\n selectedProduct: PropTypes.string,\r\n status: PropTypes.number,\r\n storeLogo: PropTypes.string,\r\n\tstoreImg: PropTypes.string,\r\n setVisibleCategories: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n categories: state.menu.categories || []\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const HorizontalMenu = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'store' })\r\n)(HorizontalMenuComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\t\r\n\r\n &.store-horizontal-menu-list{\r\n overflow: hidden;\r\n overflow-x: hidden;\r\n min-height: 280px;\r\n max-height: 280px;\r\n padding-left: 0;\r\n padding-right: 0;\r\n justify-content: flex-start;\r\n\t\toverflow-x: auto;\r\n\r\n\t\t::-webkit-scrollbar {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\r\n ::-webkit-scrollbar {\r\n height: 4px;\r\n }\r\n \r\n ::-webkit-scrollbar-track {\r\n -webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n border-radius: 10px;\r\n }\r\n \r\n ::-webkit-scrollbar-thumb {\r\n border-radius: 10px;\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'}; \r\n -webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n }\r\n\r\n > .product {\r\n min-width: unset;\r\n\r\n &.center {\r\n text-align: none;\r\n }\r\n\r\n &.right {\r\n text-align: none;\r\n }\r\n }\r\n }\r\n\r\n &.store-horizontal-menu-list:hover{\r\n overflow-x: auto;\r\n }\r\n \r\n &.store-horizontal-menu-list-full{\r\n min-height: 100%;\r\n max-height: 100%;\r\n flex-wrap: wrap;\r\n margin-top: 1.25rem;\r\n justify-content: space-between;\r\n padding: 2rem;\r\n }\r\n`\r\nexport const Button = styled.button`\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &.disabled{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.greyMedium) || '#333'};\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n connect\r\n} from 'react-redux'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../../../domain/helpers'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nimport {\r\n Product\r\n} from '../..'\r\n\r\nconst Context = React.createContext({})\r\n\r\nexport function ListComponent(props) {\r\n const {\r\n handleViewProduct,\r\n handleAddProduct,\r\n cart,\r\n products,\r\n categoryId,\r\n categoryName,\r\n direction,\r\n storeLogo,\r\n status,\r\n displayFull,\r\n storeImg,\r\n opened\r\n } = props\r\n\r\n const maxItemsPerRow = 3\r\n const newProducts = [...products]\r\n const linesTotal = Math.ceil(newProducts.length / maxItemsPerRow)\r\n const maxItemsTotal = linesTotal * maxItemsPerRow\r\n\r\n if ((newProducts.length % 3)) {\r\n while (newProducts.length < maxItemsTotal) {\r\n newProducts.push({\r\n id: 0\r\n })\r\n }\r\n }\r\n\r\n return \r\n {newProducts && newProducts.length && newProducts.map((mappedItem, index) => {\r\n const {\r\n id,\r\n name,\r\n description,\r\n image,\r\n value,\r\n additionals,\r\n promotionalValue,\r\n fromValue\r\n } = mappedItem\r\n\r\n const key = `stores-products-category-group-${id}-${index}`\r\n const formattedPrice = `R$ ${Number(value).toFixed(2).replace('.', ',')}`\r\n const cartProductPrevious = (cart.products && cart.products.length) ? (cart.products.filter(filteredItem => filteredItem.id === id))[0] : null\r\n const cartProductPreviousQty = cartProductPrevious && cartProductPrevious.quantity\r\n const selectedAdditionals = (cartProductPrevious && cartProductPrevious.selectedAdditionals) || []\r\n const position = index + 1\r\n const formattedPricePromotional = promotionalValue ? `${Number(promotionalValue).toFixed(2).replace('.', ',')}` : null\r\n const requiredAdditionals = additionals && additionals.length && additionals.filter(item => item.minimum >= 1)\r\n const hasRequiredAdditionals = requiredAdditionals && requiredAdditionals.length ? true : false\r\n const formattedFromValue = fromValue ? `${Number(fromValue).toFixed(2).replace('.', ',')}` : null\r\n\r\n return \r\n}\r\n\r\nListComponent.propTypes = {\r\n handleViewProduct: PropTypes.func,\r\n handleAddProduct: PropTypes.func,\r\n cart: PropTypes.shape({}),\r\n products: PropTypes.arrayOf(PropTypes.shape({})),\r\n categoryId: PropTypes.number,\r\n categoryName: PropTypes.string,\r\n direction: PropTypes.string,\r\n storeLogo: PropTypes.string,\r\n status: PropTypes.number,\r\n displayFull: PropTypes.bool\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n cart: state.main.cart || {}\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const List = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'store' })\r\n)(ListComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Image = styled.img`\r\n border-radius: .625rem;\r\n`\r\n\r\nexport const Wrapper = styled.a`\r\n display: flex; \r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n min-width: 9.625rem;\r\n max-width: 9.625rem;\r\n margin: 0;\r\n margin-bottom: 1.875rem;\r\n max-height: 14.375rem;\r\n min-height: 14.375rem;\r\n position: relative;\r\n padding-bottom: .625rem;\r\n min-width: 33.33%;\r\n text-align: left;\r\n\r\n &.normal {\r\n margin: 0 1.5rem .5rem 0;\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n }\r\n\r\n &.center {\r\n text-align: center;\r\n\r\n > .holder {\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n &.right {\r\n text-align: right;\r\n\r\n > .holder {\r\n margin: 0;\r\n right: 0;\r\n left: auto;\r\n\r\n @media (min-width: 60rem) {\r\n position: absolute;\r\n }\r\n }\r\n }\r\n\r\n &.hidden {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n &:last-child {\r\n border-bottom: 0 none;\r\n }\r\n\r\n > .holder {\r\n min-width: 7.625rem;\r\n max-width: 7.625rem;\r\n position: relative;\r\n min-height: 15.375rem;\r\n\r\n > div {\r\n max-width: 100%;\r\n min-width: 100%;\r\n\r\n &.quantity {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: row;\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n min-width: 100%;\r\n padding: 0 1rem;\r\n box-sizing: border-box;\r\n\r\n > span {\r\n flex: 1;\r\n text-align: center;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333' };\r\n font-weight: bold;\r\n font-size: 1rem;\r\n }\r\n }\r\n }\r\n\r\n > .image {\r\n flex: 0;\r\n max-height: 6.625rem;\r\n min-height: 6.625rem;\r\n max-width: 7.625rem;\r\n min-width: 7.625rem;\r\n border-radius: .625rem;\r\n overflow: hidden;\r\n position: relative;\r\n -webkit-overflow-scrolling: touch;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#EFEFEF' };\r\n margin-bottom: .625rem;\r\n\r\n &.store-logo {\r\n background: #fff;\r\n border: .063rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#EFEFEF' };\r\n\r\n > img {\r\n opacity: .2;\r\n }\r\n }\r\n\r\n > img {\r\n min-height: auto;\r\n max-height: unset;\r\n min-width: 128%;\r\n max-width: 128%;\r\n flex: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n > .image-store {\r\n flex: 0;\r\n max-height: 6.625rem;\r\n min-height: 6.625rem;\r\n max-width: 7.625rem;\r\n min-width: 7.625rem;\r\n border-radius: .625rem;\r\n overflow: hidden;\r\n position: relative;\r\n -webkit-overflow-scrolling: touch;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#EFEFEF' };\r\n margin-bottom: .625rem;\r\n\r\n > img {\r\n min-height: auto;\r\n max-height: unset;\r\n min-width: 70%;\r\n max-width: 70%;\r\n flex: 1;\r\n transform: scale(1);\r\n }\r\n }\r\n\r\n\r\n > button {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 0;\r\n transform: translate(-50%, 0);\r\n }\r\n\r\n > button, > div > button {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey01) || '#333'} .125rem solid;\r\n border-radius: 50%;\r\n flex: 1;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333' };\r\n font-size: .688rem;\r\n min-width: 2.075rem;\r\n min-height: 2.075rem;\r\n max-width: 2.075rem;\r\n max-height: 2.075rem;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n &.active {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'} .125rem solid;\r\n min-width: 1.575rem;\r\n min-height: 1.575rem;\r\n max-width: 1.575rem;\r\n max-height: 1.575rem;\r\n }\r\n\r\n > span {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n flex: none;\r\n margin: 0;\r\n padding: 0;\r\n font-size: .875rem;\r\n line-height: .875rem;\r\n font-weight: 600;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n text-align: left;\r\n`\r\n\r\nexport const Div = styled.div``\r\n\r\nexport const Paragraph = styled.p`\r\n flex: none;\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: .313rem;\r\n font-size: .75rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333'};\r\n text-align: left;\r\n\r\n &.description {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333'};\r\n }\r\n\r\n &.measure {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n font-size: .75rem;\r\n }\r\n\r\n &.value {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n margin-bottom: 0;\r\n font-weight: bold;\r\n font-size: 1rem;\r\n position: absolute;\r\n left: 0;\r\n top: 11.538rem;\r\n }\r\n\r\n &.promo {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n margin-bottom: 0;\r\n font-size: .75rem;\r\n font-weight: bold;\r\n }\r\n\r\n >span{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n margin-bottom: 0;\r\n font-size: .438rem;\r\n text-decoration: line-through;\r\n margin-left: .313rem;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &.disabled{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.greyMedium) || '#333'};\r\n }\r\n`\r\n\r\nexport const Span = styled.span``\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport {\r\n pipe\r\n} from '../../../domain/helpers'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport {\r\n setQuantity\r\n} from '../../../redux/actions/main'\r\n\r\nimport {\r\n Image,\r\n H2,\r\n Wrapper,\r\n Div,\r\n Paragraph,\r\n Button,\r\n Span\r\n} from './styles'\r\nimport { addressActions, user } from '../../../state'\r\n\r\nexport function HorizontalProductComponent(props) {\r\n const {\r\n index,\r\n description,\r\n rawPrice,\r\n additionals,\r\n selectedAdditionals,\r\n category,\r\n handleView,\r\n handleAdd,\r\n setQuantity,\r\n id,\r\n name,\r\n storeLogo,\r\n value,\r\n image,\r\n measure = '1un',\r\n quantity,\r\n promotionalValue,\r\n status,\r\n className,\r\n storeImg,\r\n hasRequiredAdditionals,\r\n setUserCallback,\r\n modalityId,\r\n accessToken,\r\n address,\r\n setAddressRequest,\r\n setAddressPostalCodeRequest,\r\n setNoAddressesList\r\n } = props\r\n\r\n function handleQtd(args) {\r\n setQuantity(args)\r\n }\r\n\r\n return \r\n \r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n\t\taddress: state.address.address && state.address.address,\r\n\t\taccessToken: state.user.accessToken || '',\r\n\t\tmodalityId: state.main.modality && state.main.modality.id, \r\n selectedCategory: state.store.store && state.store.store.selectedCategory\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n setUserCallback: user.setUserCallback,\r\n setAddressRequest: addressActions.setAddressRequest,\r\n setAddressPostalCodeRequest: addressActions.setAddressPostalCodeRequest,\r\n\tsetNoAddressesList: addressActions.setNoAddressesList,\r\n setQuantity\r\n})\r\n\r\nexport function HorizontalProduct(props) {\r\n const MemoizedComponent = React.memo(HorizontalProductComponent)\r\n const Component = pipe(\r\n GetConnection\r\n )(MemoizedComponent)\r\n\r\n return \r\n \r\n })\r\n }\r\n}\r\n\r\nVerticalMenuComponent.propTypes = {\r\n\tstoreImg: PropTypes.string,\r\n storeLogo: PropTypes.string,\r\n selectedProduct: PropTypes.object,\r\n handleViewProduct: PropTypes.func,\r\n cart: PropTypes.shape({\r\n\t\tproducts: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n categories: PropTypes.arrayOf(PropTypes.shape({}))\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n cart: state.main.cart || {},\r\n categories: state.main.categories || []\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const VerticalMenu = React.memo(pipe(\r\n GetConnection\r\n)(VerticalMenuComponent))\r\n","import React from 'react'\r\n\r\nimport {\r\n DefaultImage as Image\r\n} from '../../components'\r\n\r\nimport {\r\n VerticalProductContainer,\r\n VerticalProductContent,\r\n VerticalProductDescription,\r\n VerticalProductImageContainer,\r\n VerticalProductName,\r\n VerticalProductPrice,\r\n VerticalProductPriceContainer,\r\n VerticalProductPromotionalPrice\r\n} from './styles'\r\n\r\nexport function VerticalProduct(props) {\r\n const {\r\n handleView,\r\n name,\r\n description,\r\n value,\r\n image,\r\n promotionalValue,\r\n storeLogo,\r\n storeImg\r\n } = props\r\n\r\n return (\r\n \r\n \r\n {name} \r\n \r\n {description ? description.length < 50 ? description :\r\n name && name.length > 20 ? `${description.substring(0, 50)}...` :\r\n `${description.substring(0, 90)}...` : description}\r\n \r\n \r\n {promotionalValue ? promotionalValue : value} \r\n {promotionalValue && {value} }\r\n \r\n \r\n \r\n {image && \r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const CategoryWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: start;\r\n\tflex-wrap: wrap;\r\n margin-bottom: 1.5rem;\r\n\tmin-width: calc(100% + 1rem);\r\n max-width: calc(100% + 1rem);\r\n flex-direction: row;\r\n\tmargin-right: 1rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n padding-bottom: 0;\r\n overflow-x: unset;\r\n margin: 0;\r\n padding: 0;\r\n\t\tmin-width: 100%;\r\n \tmax-width: 100%;\r\n margin-bottom: 2rem;\r\n\t\tflex-direction: row;\r\n }\r\n`\r\n\r\nexport const ListWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: start;\r\n box-sizing: border-box;\r\n\tflex-direction: row;\r\n\tmargin: 0;\r\n\tpadding: 0 1rem 1rem 0;\r\n min-width: 100%;\r\n max-width: 100%;\r\n gap: 1.5rem;\r\n overflow-x: auto;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n\t}\r\n\r\n\t@media (min-width: 60rem) {\r\n flex-wrap: wrap;\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n margin: 0;\r\n padding: 0;\r\n min-width: calc(100% - 1rem);\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#e2e2e2'} .063rem solid;\r\n padding-bottom: 1rem;\r\n\tpadding-right: 4rem;\r\n margin-bottom: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n font-size: 1.25rem;\r\n position: relative;\r\n\r\n > span {\r\n font-size: .8rem;\r\n line-height: 1.25rem;\r\n display: flex;\r\n justify-content: center;\r\n max-height: 1.25rem;\r\n position: absolute;\r\n right: 0;\r\n top: .3rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\r\n > span {\r\n margin-left: .2rem;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n margin-bottom: 2rem;\r\n\t\tmin-width: 100%;\r\n\t\tmax-width: 100%;\r\n }\r\n`\r\n\r\nexport const EmptyMenu = styled.div`\r\n\tmargin: 0 auto;\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#333'};\r\n`;\r\n\r\nexport const EmptyMenuTitle = styled.h5`\r\n\ttext-align: center;\r\n font-size: 1.125rem;\r\n color: inherit;\r\n margin: 0 0 1rem 0;\r\n`;\r\n\r\nexport const EmptyMenuMessage = styled.p`\r\n color: inherit;\r\n opacity: .75;\r\n margin: 0;\r\n\ttext-align: center;\r\n`;\r\n\r\nexport const Span = styled.span``\r\n","import React, {\r\n\tuseEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n\tconnect\r\n} from 'react-redux'\r\n\r\nimport {\r\n\tpipe\r\n} from '../../../domain/helpers'\r\n\r\nimport {\r\n\tCategoryWrapper,\r\n\tListWrapper,\r\n\tH2,\r\n\tSpan,\r\n\tEmptyMenu,\r\n\tEmptyMenuMessage,\r\n\tEmptyMenuTitle\r\n} from './styles'\r\n\r\nimport {\r\n\thandleGTM, handlePixel,\r\n} from '../../../redux/actions/main'\r\n\r\nimport {\r\n\tProduct\r\n} from '..'\r\n\r\nimport { CustomIcon } from '../../components'\r\n\r\nfunction VerticalCardMenuComponent(props) {\r\n\tconst {\r\n\t\tstoreLogo,\r\n\t\thandleViewProduct,\r\n\t\thandleAddProduct,\r\n\t\tcart,\r\n\t\tcategories,\r\n\t\tstoreImg,\r\n\t\thandleViewCategoriesProducts,\r\n\t\tsetVisibleCategories,\r\n\t\tstatus,\r\n\t\topened,\r\n\t\t//handlePixel\r\n\t\t// handleGTM,\r\n\t\t// storeName\r\n\t} = props\r\n\r\n\tuseEffect(() => {\r\n\t\tconst products = []\r\n\r\n\t\tif (categories && categories.length) {\r\n\t\t\tcategories.forEach(function (item) {\r\n\t\t\t\tproducts.push(item.products)\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\treturn () => { }\r\n\t}, [\r\n\t\tcategories\r\n\t])\r\n\r\n\t// useEffect(() => {\r\n\t// if (categories && categories.length > 0) {\r\n\t// //GTM 3.0 - Evento de Visualizar produto do carrrinho\r\n\t// const dataGTM = {\r\n\t// 'event': `view_item_list`,\r\n\t// 'ecommerce': {\r\n\t// 'currency': 'BRL',\r\n\t// 'store': storeName,\r\n\t// 'items': categories && categories.length ? categories.map((item) => {\r\n\t// const {\r\n\t// products,\r\n\t// name: categoryName,\r\n\t// } = item\r\n\r\n\t// return products && products.map((mappedItem, index) => {\r\n\t// const {\r\n\t// id,\r\n\t// name,\r\n\t// value,\r\n\t// promotionalValue,\r\n\t// } = mappedItem\r\n\r\n\t// return {\r\n\t// 'item_name': name,\r\n\t// 'item_id': id,\r\n\t// 'price': promotionalValue ? promotionalValue : value,\r\n\t// 'discount': null,\r\n\t// 'categoria': categoryName ?? null,\r\n\t// }\r\n\t// })\r\n\t// }) : null\r\n\t// }\r\n\t// }\r\n\t// console.warn(dataGTM)\r\n\t// handleGTM(dataGTM)\r\n\t// }\r\n\t// }, [\r\n\t// categories,\r\n\t// handleGTM,\r\n\t// storeName\r\n\t// ])\r\n\r\n\tfunction handleCategoriesProducts(name) {\r\n\t\tconst params = {\r\n\t\t\tname,\r\n\t\t\tselectedProductsCategories: true,\r\n\t\t\topenModalCategory: true\r\n\t\t}\r\n\r\n\t\thandleViewCategoriesProducts(params)\r\n\t}\r\n\r\n\treturn <>\r\n\t\t{categories && categories.length ? categories.map((mappedItem, index) => {\r\n\t\t\tconst {\r\n\t\t\t\tproducts,\r\n\t\t\t\tname: categoryName,\r\n\t\t\t\tid: categoryId\r\n\t\t\t} = mappedItem\r\n\r\n\t\t\tconst key = `stores-products-category-${index}-${categoryId}`\r\n\r\n\t\t\treturn \r\n\t\t\t\t{mappedItem.name}\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\thandleCategoriesProducts(mappedItem.name)\r\n\t\t\t\t\t\tsetVisibleCategories(true)\r\n\t\t\t\t\t}}>Ver tudo
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t{products && products.map((mappedItem, index) => {\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\tid,\r\n\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\tdescription,\r\n\t\t\t\t\t\t\timage,\r\n\t\t\t\t\t\t\tvalue,\r\n\t\t\t\t\t\t\tadditionals,\r\n\t\t\t\t\t\t\tpromotionalValue,\r\n\t\t\t\t\t\t\ttags,\r\n\t\t\t\t\t\t\tshowFromValueText,\r\n\t\t\t\t\t\t\tfromValue,\r\n\t\t\t\t\t\t\tloyaltyModelPointsId,\r\n\t\t\t\t\t\t\tloyaltyPoints,\r\n\t\t\t\t\t\t\tpackPrice\r\n\t\t\t\t\t\t} = mappedItem\r\n\r\n\t\t\t\t\t\tconst key = `stores-products-category-group-${index}-${id}`\r\n\t\t\t\t\t\tconst formattedPrice = `${Number(value).toFixed(2).replace('.', ',')}`\r\n\t\t\t\t\t\tconst formattedPricePromotional = promotionalValue ? `${Number(promotionalValue).toFixed(2).replace('.', ',')}` : null\r\n\t\t\t\t\t\tconst cartProductPrevious = cart && (cart.products && cart.products.length) ? (cart.products.filter(filteredItem => filteredItem.id === id))[0] : null\r\n\t\t\t\t\t\tconst cartProductPreviousQty = cartProductPrevious && cartProductPrevious.quantity\r\n\t\t\t\t\t\tconst selectedAdditionals = (cartProductPrevious && cartProductPrevious.selectedAdditionals) || []\r\n\r\n\t\t\t\t\t\tconst requiredAdditionals = additionals && additionals.length && additionals.filter(item => item.minimum >= 1)\r\n\t\t\t\t\t\tconst hasRequiredAdditionals = requiredAdditionals && requiredAdditionals.length ? true : false\r\n\t\t\t\t\t\tconst formattedFromValue = fromValue ? `${Number(fromValue).toFixed(2).replace('.', ',')}` : null\r\n\r\n\t\t\t\t\t\treturn \r\n\t\t\t\t\t})}\r\n\t\t\t\t \r\n\t\t\t \r\n\t\t}) : \r\n\t\t\tCardápio vazio \r\n\t\t\tNo momento o cardápio desta loja não está disponível, tente novamente mais tarde. \r\n\t\t \r\n\t\t}\r\n}\r\n\r\nVerticalCardMenuComponent.propTypes = {\r\n\tstoreLogo: PropTypes.string,\r\n\tselectedProduct: PropTypes.object,\r\n\thandleViewProduct: PropTypes.func,\r\n\tcart: PropTypes.shape({\r\n\t\tproducts: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\tcategories: PropTypes.arrayOf(PropTypes.shape({})),\r\n\thandleAddProduct: PropTypes.func,\r\n\tstoreImg: PropTypes.string,\r\n\thandleViewCategoriesProducts: PropTypes.func,\r\n\tsetVisibleCategories: PropTypes.func,\r\n\tstatus: PropTypes.number,\r\n\topened: PropTypes.bool,\r\n\thandlePixel: PropTypes.func,\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcart: state.main.cart || {},\r\n\t\tcategories: state.menu.categories || [],\r\n\t\tstoreName: state.store.store && state.store.store.name,\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\thandleGTM,\r\n\thandlePixel\r\n})\r\n\r\nexport const VerticalCardMenu = React.memo(pipe(\r\n\tGetConnection\r\n)(VerticalCardMenuComponent))\r\n","import styled from \"styled-components\";\r\nimport { PRODUCT_IMAGE_SCALE } from \"../../../config\";\r\n\r\nexport const Image = styled.img`\r\n\tborder-radius: 0.625rem;\r\n`;\r\n\r\nexport const Span = styled.span``;\r\n\r\nexport const Wrapper = styled.div`\r\n\talign-items: center;\r\n\tjustify-content: flex-start;\r\n\tpadding: 1rem;\r\n\tborder-radius: 0.5rem;\r\n\twidth: 100%;\r\n\tcursor: pointer;\r\n\tbackground-color: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.backgroundProductCard) ||\r\n\t\t\"#000\"};\r\n\tbox-shadow: 2px 2px 9px 1px rgba(0, 0, 0, 0.1);\r\n\tmax-width: 15rem;\r\n\tmin-width: 15rem;\r\n\tmax-height: 20rem;\r\n\tmin-height: 20rem;\r\n\tposition: relative;\r\n\ttext-align: center;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\t${(props) => {\r\n\t\t\tif (props.opened) {\r\n\t\t\t\treturn `max-width: calc(50% - .85rem);\r\n min-width: calc(50% - .85rem);`;\r\n\t\t\t} else {\r\n\t\t\t\treturn `max-width: calc(33% - .85rem);\r\n min-width: calc(33% - .85rem);`;\r\n\t\t\t}\r\n\t\t}}\r\n\t}\r\n\r\n\t@media (min-width: 80rem) {\r\n\t\t${(props) => {\r\n\t\t\tif (props.opened) {\r\n\t\t\t\treturn `max-width: calc(33% - .85rem);\r\n min-width: calc(33% - .85rem);`;\r\n\t\t\t}\r\n\t\t\tif (props.categorieLength > 1) {\r\n\t\t\t\treturn `max-width: calc((100% - 4.5rem) / 4);\r\n \t\tmin-width: calc((100% - 4.5rem) / 4);`;\r\n\t\t\t} else {\r\n\t\t\t\treturn `max-width: calc(33% - .85rem);\r\n min-width: calc(33% - .85rem);`;\r\n\t\t\t}\r\n\t\t}}\r\n\t}\r\n\r\n\t@media (min-width: 95rem) {\r\n\t\tmax-width: calc((100% - 4.5rem) / 4);\r\n\t\tmin-width: calc((100% - 4.5rem) / 4);\r\n\t}\r\n\r\n\t&:hover {\r\n\t\tbackground-color: #f7f7f7;\r\n\t}\r\n\r\n\t* {\r\n\t\tbox-sizing: border-box;\r\n\t}\r\n`;\r\n\r\nexport const ProductImage = styled.div`\r\n\tmin-height: 10.5rem;\r\n\tmax-height: 10.5rem;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tposition: relative;\r\n\tmargin-bottom: 0.6rem;\r\n\r\n\t&.no-elevate {\r\n\t\tmargin-bottom: 1rem;\r\n\t}\r\n\r\n\timg {\r\n\t\tmin-height: 10.5rem;\r\n\t\tmax-height: 10.5rem;\r\n\t\t${() => {\r\n\t\t\tif (PRODUCT_IMAGE_SCALE === \"true\") {\r\n\t\t\t\treturn `width: 100%;\r\n\t\t\t\tobject-fit: cover;\r\n\t\t\t\ttransform: scale(1);\r\n\t\t\t\tborder-radius: .5rem;`;\r\n\t\t\t} else {\r\n\t\t\t\treturn `max-width: 100%;\r\n\t\t\t\tmin-width: auto;`;\r\n\t\t\t}\r\n\t\t}}\r\n\t\t&.scale {\r\n\t\t\twidth: 100%;\r\n\t\t\tobject-fit: cover;\r\n\t\t\ttransform: scale(1);\r\n\t\t\tborder-radius: 0.5rem;\r\n\t\t}\r\n\r\n\t\t&.noimg {\r\n\t\t\tmax-width: 50%;\r\n\t\t\tmax-height: unset;\r\n\t\t\tmin-height: auto;\r\n\t\t\tmin-width: 50%;\r\n\t\t\theight: auto;\r\n\t\t\tbox-sizing: unset;\r\n\t\t\tposition: absolute;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t\tleft: 50%;\r\n\t\t\ttop: 50%;\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\tmin-height: 10.5rem;\r\n\t\tmax-height: 10.5rem;\r\n\t\tmin-width: 100%;\r\n\t\tmax-width: 100%;\r\n\t\tmargin-bottom: 1rem;\r\n\r\n\t\t&.noimg {\r\n\t\t\timg {\r\n\t\t\t\tmin-height: 7rem;\r\n\t\t\t\tmax-height: 7rem;\r\n\t\t\t\tmax-width: 100%;\r\n\t\t\t\tmin-width: auto;\r\n\t\t\t\tmargin-top: 1rem;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const CardProductName = styled.h3`\r\n\tmargin: 0;\r\n\tfont-weight: 500;\r\n\tfont-size: 1rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\"#000\"};\r\n\tmargin-bottom: 0.5rem;\r\n\tmin-height: 1rem;\r\n\tmax-height: 1rem;\r\n\tline-height: 1rem;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n\twhite-space: nowrap;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\tmargin-bottom: 0.25rem;\r\n\t\tfont-size: 1.3rem;\r\n\t\tmin-height: 1.3rem;\r\n\t\tmax-height: 1.3rem;\r\n\t\tline-height: 1.3rem;\r\n\t}\r\n`;\r\n\r\nexport const CardProductDescription = styled.p`\r\n\tmargin: 0;\r\n\tfont-family: Nunito;\r\n\tfont-weight: 400;\r\n\tfont-size: 1rem;\r\n\tline-height: 1rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\"#000\"};\r\n\tdisplay: block;\r\n\ttext-overflow: ellipsis;\r\n\toverflow: hidden;\r\n\tdisplay: -webkit-box;\r\n\t-webkit-line-clamp: 4;\r\n\t-webkit-box-orient: vertical;\r\n\tmax-height: 4rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\tfont-size: 0.9rem;\r\n\t}\r\n`;\r\n\r\nexport const CardProductPriceContainer = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tmin-width: calc(100% - 2rem);\r\n\tposition: absolute;\r\n\tleft: 1rem;\r\n\tbottom: 0.3rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\tmargin: auto 0 0 0;\r\n\t}\r\n`;\r\n\r\nexport const CardProductText = styled.span`\r\n\tdisplay: flex;\r\n\talign-items: start;\r\n\tfont-size: 0.6rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\"#000\"};\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: -0.4rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\twidth: 100%;\r\n\t}\r\n`;\r\n\r\nexport const CardProductPrice = styled.span`\r\n\tfont-weight: 700;\r\n\tfont-size: 1.25rem;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\r\n\t&.promo {\r\n\t\tcolor: #19bf2b;\r\n\t\tfont-size: 1rem;\r\n\t}\r\n\r\n\t&.value {\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\"#333\"};\r\n\t}\r\n\r\n\t> span {\r\n\t\tfont-size: 0.8rem;\r\n\t\tmargin-right: 0.1rem;\r\n\t}\r\n`;\r\n\r\nexport const CardProductPromotionalPrice = styled.span`\r\n\tfont-weight: 600;\r\n\tfont-size: 0.75rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textThirdColor) ||\r\n\t\t\"#CCC\"};\r\n\tmargin: ${(props) => (props.max ? \"0px\" : \"0 0 0 0.5rem;\")}\r\n\ttext-decoration: line-through;\r\n\r\n\t@media (max-width: 40rem) {\r\n\t\tmargin: 0 0.5rem;\r\n\t}\r\n`;\r\n\r\nexport const IncludeButton = styled.button`\r\n\tpadding: 0.3rem 1.6rem;\r\n\tborder-radius: 8px;\r\n\tfont-weight: 500;\r\n\tbackground: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\"#333\"};\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.secondaryColor) ||\r\n\t\t\"#333\"};\r\n\tborder: 1px solid #d9d8d9;\r\n\tcursor: pointer;\r\n\tfont-size: 1rem;\r\n\tmargin: 0 0 0 0.4rem;\r\n\r\n\t&.disabled {\r\n\t\topacity: 0.4;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.invertedPrimaryColor) ||\r\n\t\t\t\"#333\"};\r\n\t}\r\n\r\n\t@media (max-width: 40rem) {\r\n\t\tpadding: 0.3rem 1.2rem;\r\n\t}\r\n`;\r\n\r\nexport const TagWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tmin-width: 16%;\r\n\tmax-width: 16%;\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\tmargin-left: -12px;\r\n`;\r\n\r\nexport const CashbackWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n`;\r\n\r\nexport const TagLoyaltyWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tmin-width: 16%;\r\n\tmax-width: 16%;\r\n\tposition: absolute;\r\n\tz-index: 1;\r\n\tmargin-left: 72%;\r\n\tmargin-top: -4%;\r\n`;\r\n\r\nexport const TagOne = styled.div``;\r\n\r\nexport const TagTwo = styled.div``;\r\n\r\nexport const LabelCashback = styled.button`\r\n\tdisplay: inline-block;\r\n\tborder-radius: 0.2rem;\r\n\tfont-size: 0.8rem;\r\n\tbackground-color: #00a958;\r\n\tcolor: #fff;\r\n\tbox-sizing: border-box;\r\n\tfont-weight: bold;\r\n\tpadding: 0.2rem 2.5rem;\r\n\tmargin-bottom: 0.5rem;\r\n\tborder-bottom-right-radius: 16px;\r\n\ttext-transform: uppercase;\r\n`;\r\n\r\nexport const LabelRectangular = styled.button`\r\n\tdisplay: inline-block;\r\n\tborder-radius: 0.2rem;\r\n\tfont-size: 0.8rem;\r\n\tbackground-color: ${(props) => props.backgroundColor || \"#C2C2C2\"};\r\n\tcolor: ${(props) => props.fontColor || \"#000\"};\r\n\tbox-shadow: 2px 1px 6px #b9b9b9;\r\n\tbox-sizing: border-box;\r\n\tpadding: 0.2rem 0.3rem;\r\n\tmargin-bottom: 0.5rem;\r\n`;\r\nexport const LabelLoyaltyCircular = styled.button`\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tborder-radius: 50%;\r\n\tmin-width: 40px;\r\n\tmin-height: 40px;\r\n\tpadding: 5px;\r\n\tbackground-color: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.backgroundProductCard) ||\r\n\t\t\"#000\"};\r\n\tcolor: ${(props) => props.fontColor || \"#000\"};\r\n\ttext-align: center;\r\n\tline-height: 1;\r\n\tbox-sizing: content-box;\r\n\tfont-size: 0.825rem;\r\n\tmargin-bottom: 0.5rem;\r\n\talign-items: center;\r\n\tfont-weight: bold;\r\n\r\n\t&:hover {\r\n\t\tbackground-color: #f7f7f7;\r\n\t}\r\n`;\r\n\r\nexport const LabelCircular = styled.button`\r\n\tdisplay: inline-block;\r\n\tborder-radius: 50%;\r\n\tmin-width: 20px;\r\n\tmin-height: 20px;\r\n\tpadding: 5px;\r\n\tbackground-color: ${(props) => props.backgroundColor || \"#C2C2C2\"};\r\n\tcolor: ${(props) => props.fontColor || \"#000\"};\r\n\ttext-align: center;\r\n\tline-height: 1;\r\n\tbox-sizing: content-box;\r\n\tbox-shadow: 2px 1px 6px #b9b9b9;\r\n\tfont-size: 0.725rem;\r\n\tmargin-bottom: 0.5rem;\r\n\r\n\t&:before {\r\n\t\tcontent: \"\";\r\n\t\tdisplay: inline-block;\r\n\t\tvertical-align: middle;\r\n\t\tpadding-top: 100%;\r\n\t\theight: 0;\r\n\t}\r\n\r\n\t> span {\r\n\t\tdisplay: inline-block;\r\n\t\tvertical-align: middle;\r\n\t}\r\n`;\r\n","import React from 'react'\r\nimport { Tooltip } from '@material-ui/core'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n\tpipe\r\n} from '../../../domain/helpers'\r\nimport {\r\n\tCustomImage\r\n} from '../../components'\r\n\r\nimport NoProduct from '../../assets/no-product-card.png'\r\n\r\nimport {\r\n\tsetQuantity\r\n} from '../../../redux/actions/main'\r\n\r\nimport {\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../../hooks'\r\n\r\nimport { addressActions, user } from '../../../state'\r\n\r\nimport {\r\n\tWrapper,\r\n\tCardProductDescription,\r\n\tCardProductName,\r\n\tCardProductPrice,\r\n\tCardProductPriceContainer,\r\n\tCardProductPromotionalPrice,\r\n\tCardProductText,\r\n\tIncludeButton,\r\n\tProductImage,\r\n\tTagWrapper,\r\n\tLabelRectangular,\r\n\tLabelCircular,\r\n\tTagOne,\r\n\tTagTwo,\r\n\tTagLoyaltyWrapper,\r\n\tLabelLoyaltyCircular,\r\n\tCashbackWrapper,\r\n\tLabelCashback\r\n} from './styles'\r\nimport { HAS_CASHBACK, HAS_LOYALTY, IMAGE_ELEVATE } from '../../../config'\r\nimport Selo from '../../assets/icone_menu_fidelidade.png'\r\n\r\nexport function VerticalCardProductComponent(props) {\r\n\tconst {\r\n\t\tindex,\r\n\t\tid,\r\n\t\thandleView,\r\n\t\thandleAdd,\r\n\t\tname,\r\n\t\tdescription,\r\n\t\tvalue,\r\n\t\timage,\r\n\t\tpromotionalValue,\r\n\t\tcategories,\r\n\t\tstatus,\r\n\t\tsetQuantity,\r\n\t\tquantity,\r\n\t\topened,\r\n\t\tclassName,\r\n\t\thasRequiredAdditionals,\r\n\t\taddress,\r\n\t\tsetUserCallback,\r\n\t\tsetAddressPostalCodeRequest,\r\n\t\tadditionals,\r\n\t\tselectedAdditionals,\r\n\t\tcategory,\r\n\t\trawPrice,\r\n\t\taccessToken,\r\n\t\tsetAddressRequest,\r\n\t\tsetNoAddressesList,\r\n\t\ttags,\r\n\t\tshowFromValueText,\r\n\t\tfromValue,\r\n\t\tmodalityId,\r\n\t\tcategorieLength,\r\n\t\tloyaltyModelPointsId,\r\n\t\tloyaltyPoints\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tlayoutModeEnum,\r\n\t\thandleLayoutMode\r\n\t} = useLayout()\r\n\r\n\tconst {\r\n\t\tsidebarContentEnum,\r\n\t\thandleSidebarContent,\r\n\t\thandleSidebarOpened\r\n\t} = useSidebar()\r\n\r\n\tfunction handleQtd(args) {\r\n\t\tsetQuantity(args)\r\n\t}\r\n\r\n\tconst checkPromotionalValueMaxLength = () => {\r\n\t\treturn (promotionalValue && promotionalValue.length >= 6 || value.length >= 6);\r\n\t}\r\n\treturn (\r\n\t\t\r\n\t\t\t{HAS_LOYALTY === 'true' && loyaltyModelPointsId > 0 && loyaltyPoints > 0 ? <>\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t
x{loyaltyPoints}\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t : null}\r\n\t\t\t{HAS_CASHBACK === 'true' && loyaltyModelPointsId > 0 && loyaltyPoints > 0 ? <>\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{loyaltyPoints}% de Cashback\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t : null}\r\n\t\t\t{tags && tags.length > 0 ? \r\n\t\t\t\t\r\n\t\t\t\t\t{tags && tags.length > 0 ? tags.map((item, index) => {\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\ttype,\r\n\t\t\t\t\t\t\tformat\r\n\t\t\t\t\t\t} = item\r\n\r\n\t\t\t\t\t\tconst key = `product-card-tag-${index}-${type}-${format}`\r\n\r\n\t\t\t\t\t\tif (type === 1) {\r\n\t\t\t\t\t\t\tif (format === 2) return {item.text} \r\n\t\t\t\t\t\t\treturn {item.text} \r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\treturn null\r\n\t\t\t\t\t}) : null}\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t{tags && tags.length > 0 ? tags.map((item) => {\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\ttype,\r\n\t\t\t\t\t\t\tformat\r\n\t\t\t\t\t\t} = item\r\n\r\n\t\t\t\t\t\tconst key = `product-card-tag-${index}-${type}-${format}`\r\n\r\n\t\t\t\t\t\tif (type === 2) {\r\n\t\t\t\t\t\t\tif (format === 2) return {item.text} \r\n\t\t\t\t\t\t\treturn {item.text} \r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\treturn null\r\n\t\t\t\t\t}) : null}\r\n\t\t\t\t \r\n\t\t\t : null}\r\n\t\t\t{image ? \r\n\t\t\t\t\t }\r\n\t\t\t{name && name.length >= 50 ? \r\n\t\t\t\t{name.substring(0, 46) + '...'} \r\n\t\t\t : {name} }\r\n\t\t\t{description && description.length > 50 ? description.substring(0, 60) + '...' : description} \r\n\t\t\t\r\n\t\t\t\t{showFromValueText && A partir de: }\r\n\t\t\t\t {\r\n\t\t\t\t\tif (hasRequiredAdditionals) {\r\n\t\t\t\t\t\thandleView(event)\r\n\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (modalityId === 4) {\r\n\t\t\t\t\t\tif (address && address.main && address.verified) {\r\n\t\t\t\t\t\t\thandleAdd(event)\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tif (accessToken) {\r\n\t\t\t\t\t\t\t\tsetAddressRequest(true)\r\n\t\t\t\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t\t\t\t\tsetNoAddressesList(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\tsetAddressPostalCodeRequest(true)\r\n\t\t\t\t\t\t\t\tsetAddressRequest(false)\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\tsetUserCallback({\r\n\t\t\t\t\t\t\t\tname: 'add-product',\r\n\t\t\t\t\t\t\t\tdata: {\r\n\t\t\t\t\t\t\t\t\tindex,\r\n\t\t\t\t\t\t\t\t\tid,\r\n\t\t\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\t\t\tdescription,\r\n\t\t\t\t\t\t\t\t\timage,\r\n\t\t\t\t\t\t\t\t\tvalue: rawPrice,\r\n\t\t\t\t\t\t\t\t\tquantity: 1,\r\n\t\t\t\t\t\t\t\t\tadditionals,\r\n\t\t\t\t\t\t\t\t\tselectedAdditionals,\r\n\t\t\t\t\t\t\t\t\tcategory,\r\n\t\t\t\t\t\t\t\t\tpromotionalValue,\r\n\t\t\t\t\t\t\t\t\tloyaltyModelPointsId,\r\n\t\t\t\t\t\t\t\t\tloyaltyPoints\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t})\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\thandleAdd(event)\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t}}>Incluir : {\r\n\t\t\t\t\tif (quantity === 999) {\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\t\t\t\t\tif (hasRequiredAdditionals) {\r\n\t\t\t\t\t\thandleView(event)\r\n\r\n\t\t\t\t\t\treturn\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (address && address.main && address.verified) {\r\n\t\t\t\t\t\thandleQtd({\r\n\t\t\t\t\t\t\tid,\r\n\t\t\t\t\t\t\tquantity: 1,\r\n\t\t\t\t\t\t\tadditionalsEmpty: true\r\n\t\t\t\t\t\t})\r\n\r\n\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tif (accessToken) {\r\n\t\t\t\t\t\t\tsetAddressRequest(true)\r\n\t\t\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t\t\t\tsetNoAddressesList(false)\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\tsetAddressPostalCodeRequest(true)\r\n\t\t\t\t\t\t\tsetAddressRequest(false)\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tsetUserCallback({\r\n\t\t\t\t\t\t\tname: 'add-product',\r\n\t\t\t\t\t\t\tdata: {\r\n\t\t\t\t\t\t\t\tindex,\r\n\t\t\t\t\t\t\t\tid,\r\n\t\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\t\tdescription,\r\n\t\t\t\t\t\t\t\timage,\r\n\t\t\t\t\t\t\t\tvalue: rawPrice,\r\n\t\t\t\t\t\t\t\tquantity: 1,\r\n\t\t\t\t\t\t\t\tadditionals,\r\n\t\t\t\t\t\t\t\tselectedAdditionals,\r\n\t\t\t\t\t\t\t\tcategory,\r\n\t\t\t\t\t\t\t\tpromotionalValue,\r\n\t\t\t\t\t\t\t\tloyaltyModelPointsId,\r\n\t\t\t\t\t\t\t\tloyaltyPoints\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t})\r\n\t\t\t\t\t}\r\n\t\t\t\t}}>Incluir ) :\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\tif (hasRequiredAdditionals) {\r\n\t\t\t\t\t\t\thandleView(event)\r\n\r\n\t\t\t\t\t\t\treturn\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\thandleAdd(event)\r\n\t\t\t\t\t}}>Incluir }\r\n\t\t\t \r\n\t\t \r\n\t)\r\n}\r\n\r\nVerticalCardProductComponent.propTypes = {\r\n\tsetAddressRequest: PropTypes.func,\r\n\taccessToken: PropTypes.string,\r\n\tindex: PropTypes.string,\r\n\tid: PropTypes.number,\r\n\thandleView: PropTypes.func,\r\n\thandleAdd: PropTypes.func,\r\n\tname: PropTypes.string,\r\n\tdescription: PropTypes.string,\r\n\tvalue: PropTypes.string,\r\n\trawPrice: PropTypes.number,\r\n\timage: PropTypes.string,\r\n\tpromotionalValue: PropTypes.string,\r\n\tcategories: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({})), PropTypes.bool, PropTypes.string]),\r\n\tstatus: PropTypes.number,\r\n\tsetQuantity: PropTypes.func,\r\n\tquantity: PropTypes.number,\r\n\topened: PropTypes.bool,\r\n\tclassName: PropTypes.string,\r\n\thasRequiredAdditionals: PropTypes.bool,\r\n\taddress: PropTypes.shape({\r\n\t\tmain: PropTypes.string,\r\n\t\tverified: PropTypes.bool\r\n\t}),\r\n\tsetUserCallback: PropTypes.func,\r\n\tsetAddressPostalCodeRequest: PropTypes.func,\r\n\tadditionals: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.shape({})), PropTypes.number]),\r\n\tselectedAdditionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tcategory: PropTypes.shape({}),\r\n\tsetNoAddressesList: PropTypes.func,\r\n\ttags: PropTypes.arrayOf(PropTypes.shape({}))\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tselectedCategory: state.store.store && state.store.store.selectedCategory,\r\n\t\taddress: state.address.address && state.address.address,\r\n\t\taccessToken: state.user.accessToken || '',\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tsetUserCallback: user.setUserCallback,\r\n\tsetAddressPostalCodeRequest: addressActions.setAddressPostalCodeRequest,\r\n\tsetAddressRequest: addressActions.setAddressRequest,\r\n\tsetNoAddressesList: addressActions.setNoAddressesList,\r\n\tsetQuantity\r\n})\r\n\r\nexport function VerticalCardProduct(props) {\r\n\tconst MemoizedComponent = React.memo(VerticalCardProductComponent)\r\n\tconst Component = pipe(\r\n\t\tGetConnection\r\n\t)(MemoizedComponent)\r\n\r\n\treturn \r\n\t\t{loading.includes('menu-search') || loading.includes('store') ? \r\n\t\t\t : (\r\n\t\t\tdirection === 'vertical' ? \r\n}\r\n\r\nMenuComponent.propTypes = {\r\n\tmodalityId: PropTypes.number,\r\n\tstoreName: PropTypes.string,\r\n\tstoreLogo: PropTypes.string,\r\n\tselectedProduct: PropTypes.shape({}),\r\n\tselectedProductsCategories: PropTypes.bool,\r\n\thandleAddProduct: PropTypes.func,\r\n\thandleViewProduct: PropTypes.func,\r\n\thandleGTM: PropTypes.func,\r\n\tdirection: PropTypes.string,\r\n\tstatus: PropTypes.number,\r\n\thandleSelectedProductCategories: PropTypes.func,\r\n\thandleSelectedCategory: PropTypes.func,\r\n\tstoreImg: PropTypes.string,\r\n\tsetVisibleCategories: PropTypes.func,\r\n\tsetVisibleCategoriesCard: PropTypes.func,\r\n\topened: PropTypes.bool,\r\n\tloading: PropTypes.arrayOf(PropTypes.string),\r\n\tsetQuantity: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tcategories: state.menu.categories || [],\r\n\t\tloading: (state.loading && state.loading.loading) || [],\r\n\t\tsearch: state.main.search,\r\n\t\tselectedProduct: (state.menu.selectedProduct) || null\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tsetQuantity\r\n})\r\n\r\nexport const Menu = React.memo(pipe(\r\n\tGetConnection\r\n)(MenuComponent))\r\n","export function createUuid() {\r\n\tlet dt = new Date().getTime();\r\n\tlet uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {\r\n\t\tlet r = (dt + Math.random() * 16) % 16 | 0;\r\n\t\tdt = Math.floor(dt / 16);\r\n\t\treturn (c === 'x' ? r : (r & 0x3 || 0x8)).toString(16);\r\n\t});\r\n\r\n\treturn uuid;\r\n}\r\n","import React from 'react'\r\n\r\nimport {\r\n\tVerticalProduct,\r\n\tHorizontalProduct,\r\n\tVerticalCardProduct\r\n} from '..'\r\nimport { createUuid } from '../../../domain/helpers/Uuid'\r\n\r\nexport function Product(props) {\r\n\tconst {\r\n\t\tdirection,\r\n\t\tindex,\r\n\t\tid,\r\n\t\tname,\r\n\t\tdescription,\r\n\t\timage,\r\n\t\tstoreLogo,\r\n\t\tvalue,\r\n\t\trawPrice,\r\n\t\trawPromocional,\r\n\t\thandleQuantity,\r\n\t\thandleView: propsHandleView,\r\n\t\thandleAdd: propsHandleAdd,\r\n\t\tadditionals,\r\n\t\tselectedAdditionals,\r\n\t\tselectedCategory,\r\n\t\tquantity,\r\n\t\tpromotionalValue,\r\n\t\tstatus,\r\n\t\tclassName,\r\n\t\tstoreImg,\r\n\t\tcategories,\r\n\t\topened,\r\n\t\thasRequiredAdditionals,\r\n\t\ttags,\r\n\t\tshowFromValueText,\r\n\t\tfromValue,\r\n\t\tcategorieLength,\r\n\t\tloyaltyModelPointsId,\r\n\t\tloyaltyPoints,\r\n\t\tpackPrice\r\n\t} = props\r\n\r\n\tfunction handleView(event) {\r\n\t\tevent.preventDefault()\r\n\r\n\t\tpropsHandleView({\r\n\t\t\tindex,\r\n\t\t\tid,\r\n\t\t\tname,\r\n\t\t\tdescription,\r\n\t\t\timage,\r\n\t\t\tvalue: rawPrice,\r\n\t\t\tquantity: 1,\r\n\t\t\tadditionals,\r\n\t\t\tselectedAdditionals,\r\n\t\t\tcategory: selectedCategory,\r\n\t\t\tpromotionalValue: rawPromocional,\r\n\t\t\tshowFromValueText,\r\n\t\t\tfromValue,\r\n\t\t\tloyaltyModelPointsId,\r\n\t\t\tloyaltyPoints,\r\n\t\t\tpackPrice\r\n\t\t})\r\n\t}\r\n\r\n\tfunction handleAdd(event) {\r\n\t\tevent.preventDefault()\r\n\r\n\t\tpropsHandleAdd({\r\n\t\t\tindex,\r\n\t\t\tid,\r\n\t\t\tuuid: createUuid(),\r\n\t\t\tname,\r\n\t\t\tdescription,\r\n\t\t\timage,\r\n\t\t\tvalue: rawPrice,\r\n\t\t\tquantity: 1,\r\n\t\t\tadditionals,\r\n\t\t\tselectedAdditionals,\r\n\t\t\tcategory: selectedCategory,\r\n\t\t\tpromotionalValue: rawPromocional,\r\n\t\t\tloyaltyModelPointsId,\r\n\t\t\tloyaltyPoints,\r\n\t\t\tpackPrice\r\n\t\t})\r\n\t}\r\n\r\n\tconst newProps = {\r\n\t\tindex,\r\n\t\tid,\r\n\t\tname,\r\n\t\tdescription,\r\n\t\timage,\r\n\t\tvalue,\r\n\t\trawPrice,\r\n\t\tquantity,\r\n\t\thandleQuantity,\r\n\t\tpromotionalValue,\r\n\t\thandleView,\r\n\t\thandleAdd,\r\n\t\tstoreLogo,\r\n\t\tstatus,\r\n\t\tclassName,\r\n\t\tstoreImg,\r\n\t\tcategories: categories ? categories : false,\r\n\t\topened,\r\n\t\thasRequiredAdditionals,\r\n\t\tadditionals,\r\n\t\tselectedAdditionals,\r\n\t\tcategory: selectedCategory,\r\n\t\ttags,\r\n\t\tshowFromValueText,\r\n\t\tfromValue,\r\n\t\tcategorieLength,\r\n\t\tloyaltyModelPointsId,\r\n\t\tloyaltyPoints\r\n\t}\r\n\r\n\treturn <>\r\n\t\t{direction === 'vertical' ? \r\n\t\t {\r\n\t\t\tconst {\r\n\t\t\t\tkeyCode\r\n\t\t\t} = event\r\n\r\n\t\t\tif (keyCode === 13) {\r\n\t\t\t\thandleSearch()\r\n\t\t\t}\r\n\t\t}} onChange={(event) => {\r\n\t\t\tconst {\r\n\t\t\t\tvalue\r\n\t\t\t} = event.target\r\n\r\n\t\t\thandleSearchText(value)\r\n\t\t}} />\r\n\r\n\t\t\r\n\t \r\n}\r\n\r\nSearchComponent.propTypes = {\r\n\tsearchTerm: PropTypes.string,\r\n\tsetSearchTerm: PropTypes.func,\r\n\tfetchSearch: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tallCategories: state.menu.allCategories || [],\r\n\t\tsearchTerm: state.menu.searchTerm || ''\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tsetCategories: menuActions.setCategories,\r\n\tfetchSearch: menuActions.fetchSearch,\r\n\tsetSearchTerm: menuActions.setSearchTerm\r\n})\r\n\r\nexport const Search = React.memo(pipe(\r\n\tGetConnection\r\n)(SearchComponent))\r\n","import React, {\r\n useEffect\r\n} from 'react'\r\nimport styled from 'styled-components'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nconst Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n position: relative;\r\n\r\n > button {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#333' };\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 0;\r\n padding: 0.625rem;\r\n }\r\n`\r\nconst Input = styled.input`\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#E2E2E2' };\r\n height: 2.5rem;\r\n line-height: 2.5rem;\r\n font-size: 0.875rem;\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#DDD' } 0.063rem solid;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#333' };\r\n padding: 0 0.938rem;\r\n border-radius: 0.625rem;\r\n flex: 1;\r\n`\r\n\r\nconst Button = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n`\r\n\r\nexport function Search(props) {\r\n const {\r\n handleSearch,\r\n handleSearchText,\r\n searchText\r\n } = props\r\n\r\n useEffect(() => {\r\n return () => {}\r\n }, [])\r\n\r\n return \r\n {\r\n const {\r\n keyCode\r\n } = event\r\n \r\n if (keyCode === 13) {\r\n handleSearch()\r\n }\r\n } } onChange={ (event) => {\r\n const {\r\n value\r\n } = event.target\r\n\r\n handleSearchText(value)\r\n }} />\r\n\r\n \r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n background: #fff;\r\n font-size: .875rem;\r\n min-height: 100%;\r\n padding: 1.25rem;\r\n\r\n & #store-coupon{\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n`\r\n\r\nexport const StoreWrapper = styled.div`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin-bottom: 1.875rem;\r\n padding: 0 1.563rem;\r\n box-sizing: border-box;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n min-width: 100%;\r\n max-width: 100%;\r\n padding-right: 0;\r\n font-size: 1rem;\r\n font-weight: bold;\r\n\r\n > div {\r\n flex: 1;\r\n text-align: left;\r\n\r\n &:first-child {\r\n text-align: right;\r\n box-sizing: border-box;\r\n }\r\n }\r\n\r\n > p {\r\n flex: 1;\r\n font-size: .875rem;\r\n margin-left: .313rem;\r\n margin-right: .625rem;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n text-align: center;\r\n \r\n &.info {\r\n min-width: 13.75rem;\r\n }\r\n }\r\n`\r\n\r\nexport const StoreNameWrapper = styled.div`\r\n min-width: 100%;\r\n max-width: 100%;\r\n max-height: 13.75rem;\r\n min-height: 13.75rem;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: .938rem;\r\n margin-bottom: 1.25rem;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n font-size: .938rem;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n margin: 0;\r\n padding: 0;\r\n min-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#e2e2e2'} .063rem solid;\r\n padding-bottom: .625rem;\r\n margin-top: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n font-size: 1.125rem;\r\n flex: none;\r\n line-height: 1rem;\r\n position: relative;\r\n\r\n > span {\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 1.25rem;\r\n transform: translate(0, -1.25rem);\r\n }\r\n`\r\n\r\nexport const BackButton = styled.div`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n`\r\nexport const MobileHeaderWrapper = styled.header`\r\n width: 100%;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n }\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n`\r\n\r\nexport const Space = styled.div`\r\n\tmin-height: 4rem;\r\n min-height: 4rem;\r\n\twidth: 100%;\r\n`\r\n","import React, {\r\n useEffect, useState\r\n} from 'react'\r\nimport { withRouter } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport history from '../../../history'\r\n\r\nimport {\r\n\tsetQuantity,\r\n\tsetSearchProductCategory,\r\n\tsetProductCategory\r\n} from '../../../redux/actions/main'\r\n\r\nimport { CartBar } from '../CartBar'\r\n\r\nimport {\r\n\tCoupon,\r\n\tList\r\n} from '..'\r\n\r\nimport { Search } from './Search'\r\n\r\nimport {\r\n Wrapper,\r\n StoreWrapper,\r\n H1,\r\n MobileHeaderWrapper,\r\n CloseButton,\r\n Space\r\n} from './styles'\r\n\r\nfunction CategoriesProductsComponent(props) {\r\n const {\r\n storeName,\r\n selectedCategory,\r\n cart,\r\n selectedProducts,\r\n storeLogo,\r\n storeStatus,\r\n searchProductCategory,\r\n setQuantity,\r\n handleViewProduct,\r\n handleAddProduct,\r\n setSearchProductCategory,\r\n setProductCategory,\r\n searchProducts,\r\n coupon,\r\n close,\r\n URLParameters\r\n } = props\r\n\r\n const categoryId = selectedCategory.id\r\n const categoryName = selectedCategory.name\r\n const displayFull = true\r\n\r\n const searchText = searchProductCategory && searchProductCategory.text\r\n\r\n const [renderCartBar, setRenderCartBar] = useState(false)\r\n\r\n useEffect(() => {\r\n setSearchProductCategory({ text: '' })\r\n\r\n return () => { }\r\n }, [\r\n setSearchProductCategory\r\n ])\r\n\r\n\tfunction handleQuantity(args) {\r\n setQuantity(args)\r\n }\r\n\r\n function handleSearchText(args) {\r\n postSearchText(args)\r\n }\r\n\r\n function postSearchText(args) {\r\n setSearchProductCategory({\r\n text: args\r\n })\r\n }\r\n\r\n function handleSearch() {\r\n const productsResults = selectedProducts.filter(filteredItem => (filteredItem.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1 ||\r\n filteredItem.description.toLowerCase().indexOf(searchText.toLowerCase()) > -1))\r\n\r\n if (searchText.length) {\r\n setProductCategory(productsResults)\r\n\r\n setTimeout(() => {\r\n\r\n }, 100)\r\n\r\n return\r\n }\r\n\r\n setProductCategory({})\r\n\r\n }\r\n\r\n return \r\n \r\n {\r\n close()\r\n }}>\r\n \r\n \r\n\r\n {storeName} \r\n\r\n 0 ? searchProducts : selectedProducts}\r\n storeImg={storeLogo}\r\n status={storeStatus}\r\n displayFull={displayFull}\r\n />\r\n\r\n {\r\n history.push(`/cart${URLParameters}`)\r\n }} />\r\n\r\n \r\n}\r\n\r\nCategoriesProductsComponent.propTypes = {\r\n\tstoreName: PropTypes.string,\r\n\tselectedCategory: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tname: PropTypes.string\r\n\t}),\r\n\tcart: PropTypes.string,\r\n\tselectedProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tstoreLogo: PropTypes.string,\r\n\tstoreStatus: PropTypes.number,\r\n\tsearchProductCategory: PropTypes.shape({\r\n\t\ttext: PropTypes.string\r\n\t}),\r\n\tsetQuantity: PropTypes.func,\r\n\thandleViewProduct: PropTypes.func,\r\n\thandleAddProduct: PropTypes.func,\r\n\tsetSearchProductCategory: PropTypes.func,\r\n\tsetProductCategory: PropTypes.func,\r\n\tsearchProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tcoupon: PropTypes.shape({}),\r\n\tclose: PropTypes.func,\r\n\tURLParameters: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n storeStatus: state.store.store && state.store.store.status,\r\n selectedProduct: (state.menu.selectedProduct) || null,\r\n\r\n storeName: state.store.store && state.store.store.name,\r\n storeLogo: state.store.store && state.store.store.logo,\r\n selectedCategory: state.store.store && state.store.store.selectedCategory,\r\n cart: state.main.cart,\r\n modalityId: state.main.modality.id,\r\n selectedProducts: state.store.store && state.store.store.products,\r\n searchProductCategory: state.main.searchProductCategory,\r\n searchProducts: (state.store.store && state.store.store.searchProducts) || {},\r\n coupon: state.store.store && state.store.store.coupon,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst Connected = connect(mapStateToProps, {\r\n setSearchProductCategory,\r\n setProductCategory,\r\n\tsetQuantity\r\n})(withRouter(CategoriesProductsComponent))\r\n\r\nexport function CategoriesProducts(props) {\r\n return \r\n {\r\n const {\r\n keyCode\r\n } = event\r\n \r\n if (keyCode === 13) {\r\n handleSearch()\r\n }\r\n } } onChange={ (event) => {\r\n const {\r\n value\r\n } = event.target\r\n\r\n handleSearchText(value)\r\n }} />\r\n\r\n \r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n background: #fff;\r\n font-size: .875rem;\r\n min-height: 100%;\r\n\r\n & #store-coupon{\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n\r\n > div {\r\n &.view-all-products {\r\n max-width: calc(100% - 2rem);\r\n min-width: calc(100% - 2rem);\r\n }\r\n }\r\n`\r\n\r\nexport const StoreWrapper = styled.div`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.secondaryColor) || '#333'};\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n margin-bottom: 1.875rem;\r\n padding: 1.25rem;\r\n box-sizing: border-box;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: row;\r\n min-width: 100%;\r\n max-width: 100%;\r\n padding-right: 0;\r\n font-size: 1rem;\r\n font-weight: bold;\r\n\r\n > div {\r\n flex: 1;\r\n text-align: left;\r\n\r\n &:first-child {\r\n text-align: right;\r\n box-sizing: border-box;\r\n }\r\n }\r\n\r\n > p {\r\n flex: 1;\r\n font-size: .875rem;\r\n margin-left: .313rem;\r\n margin-right: .625rem;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n text-align: center;\r\n \r\n &.info {\r\n min-width: 13.75rem;\r\n }\r\n }\r\n`\r\n\r\nexport const PageTitle = styled.h4`\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1.125rem;\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.secondaryColor) || '#CCC'};\r\n text-align: center;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.secondaryColor) || '#000'};\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n`\r\n\r\nexport const WrapperHeader = styled.header`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 5rem;\r\n background:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#CCC'};\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.secondaryColor) || '#CCC'};\r\n margin: 0 0 1.2rem 0;\r\n padding: 1rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const StoreNameWrapper = styled.div`\r\n min-width: 100%;\r\n max-width: 100%;\r\n max-height: 13.75rem;\r\n min-height: 13.75rem;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: .938rem;\r\n margin-bottom: 1.25rem;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n font-size: .938rem;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n min-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n //border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#e2e2e2'} .063rem solid;\r\n padding-bottom: .725rem;\r\n margin: 1rem 1.3rem 0.225rem 1.3rem; \r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n font-size: 1.125rem;\r\n flex: none;\r\n position: relative;\r\n\r\n > span {\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n position: absolute;\r\n top: 50%;\r\n right: 1.25rem;\r\n transform: translate(0, -1.25rem);\r\n }\r\n`\r\n\r\nexport const MobileHeaderWrapper = styled.header`\r\n width: 100%;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n }\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n`\r\n\r\nexport const Space = styled.div`\r\n\tmin-height: 4rem;\r\n min-height: 4rem;\r\n\twidth: 100%;\r\n`\r\n","import React, {\r\n useEffect, useState\r\n} from 'react'\r\nimport { withRouter } from 'react-router-dom'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport { Product } from '../'\r\n\r\nimport { Search } from './Search'\r\n\r\nimport {\r\n\tsetSearchProductCategory,\r\n\tsetProductCategory\r\n} from '../../../redux/actions/main'\r\n\r\nimport { Coupon } from '../Coupon'\r\n\r\nimport {\r\n Wrapper,\r\n H1,\r\n WrapperHeader,\r\n BackButton,\r\n PageTitle,\r\n Space\r\n} from './styles'\r\nimport { CartBar } from '../CartBar'\r\nimport history from '../../../history'\r\n\r\nfunction CategoriesProductsCardComponent(props) {\r\n const {\r\n storeName,\r\n selectedCategory,\r\n cart,\r\n selectedProducts,\r\n storeImg,\r\n storeStatus,\r\n searchProductCategory,\r\n handleViewProduct,\r\n handleAddProduct,\r\n setSearchProductCategory,\r\n setProductCategory,\r\n coupon,\r\n close,\r\n storeLogo\r\n } = props\r\n\r\n const categoryId = selectedCategory.id\r\n const categoryName = selectedCategory.name\r\n\r\n const searchText = searchProductCategory && searchProductCategory.text\r\n\r\n const [renderCartBar, setRenderCartBar] = useState(false)\r\n\r\n useEffect(() => {\r\n setSearchProductCategory({ text: '' })\r\n\r\n return () => { }\r\n }, [\r\n setSearchProductCategory\r\n ])\r\n\r\n function handleSearchText(args) {\r\n postSearchText(args)\r\n }\r\n\r\n function postSearchText(args) {\r\n setSearchProductCategory({\r\n text: args\r\n })\r\n }\r\n\r\n function handleSearch() {\r\n const productsResults = selectedProducts.filter(filteredItem => (filteredItem.name.toLowerCase().indexOf(searchText.toLowerCase()) > -1 ||\r\n filteredItem.description.toLowerCase().indexOf(searchText.toLowerCase()) > -1))\r\n\r\n if (searchText.length) {\r\n setProductCategory(productsResults)\r\n\r\n setTimeout(() => {\r\n\r\n }, 100)\r\n\r\n return\r\n }\r\n\r\n setProductCategory({})\r\n\r\n }\r\n\r\n return \r\n \r\n {\r\n close()\r\n }}\r\n >\r\n \r\n {storeName} \r\n \r\n\r\n {\r\n history.push('/cart')\r\n }} />\r\n\r\n \r\n}\r\n\r\nCategoriesProductsCardComponent.propTypes = {\r\n\tstoreName: PropTypes.string,\r\n\tselectedCategory: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tname: PropTypes.string\r\n\t}),\r\n\tcart: PropTypes.shape({\r\n\t\tproducts: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\tselectedProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tstoreImg: PropTypes.string,\r\n\tstoreStatus: PropTypes.number,\r\n\tsearchProductCategory: PropTypes.string,\r\n\thandleViewProduct: PropTypes.func,\r\n\thandleAddProduct: PropTypes.func,\r\n\tsetSearchProductCategory: PropTypes.func,\r\n\tsetProductCategory: PropTypes.func,\r\n\tcoupon: PropTypes.shape({}),\r\n\tclose: PropTypes.func,\r\n\tstoreLogo: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n storeStatus: state.store.store && state.store.store.status,\r\n storeName: state.store.store && state.store.store.name,\r\n storeImg: state.store.store && state.store.store.logo,\r\n selectedProduct: (state.menu.selectedProduct) || null,\r\n selectedCategory: state.store.store && state.store.store.selectedCategory,\r\n cart: state.main.cart,\r\n modalityId: state.main.modality.id,\r\n selectedProducts: state.store.store && state.store.store.products,\r\n searchProductCategory: state.main.searchProductCategory,\r\n searchProducts: (state.store.store && state.store.store.searchProducts) || {},\r\n coupon: state.store.store && state.store.store.coupon\r\n }\r\n}\r\n\r\nconst Connected = connect(mapStateToProps, {\r\n setSearchProductCategory,\r\n setProductCategory\r\n})(withRouter(CategoriesProductsCardComponent))\r\n\r\nexport function CategoriesProductsCard(props) {\r\n return \r\n\t\t{data && \r\n}\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgStoreUnavailable = function SvgStoreUnavailable(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"56.000000pt\",\n height: \"56.000000pt\",\n viewBox: \"0 0 56.000000 56.000000\",\n preserveAspectRatio: \"xMidYMid meet\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0.000000,56.000000) scale(0.100000,-0.100000)\",\n fill: \"#000000\",\n stroke: \"none\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M77 547 l-28 -12 40 -39 c32 -31 38 -42 29 -53 -9 -11 -19 -6 -54 28 l-42 41 -12 -36 c-15 -48 -5 -89 32 -126 22 -23 39 -30 66 -30 34 0 46 -9 125 -88 67 -68 87 -94 87 -115 0 -84 83 -138 166 -107 l27 11 -41 42 c-33 34 -39 46 -30 55 9 9 21 3 55 -30 l42 -41 11 27 c31 83 -23 166 -107 166 -22 0 -47 19 -116 88 -74 74 -87 92 -87 120 0 43 -26 81 -67 98 -39 17 -59 17 -96 1z m105 -46 c26 -23 32 -36 32 -69 1 -39 8 -48 91 -132 84 -85 92 -90 131 -90 35 0 47 -5 68 -31 14 -17 26 -40 26 -52 0 -19 -3 -18 -35 13 l-35 34 -37 -37 -37 -37 34 -35 c31 -32 32 -35 13 -35 -12 0 -35 12 -52 26 -26 21 -31 33 -31 68 0 39 -5 46 -92 132 -85 83 -96 91 -133 92 -31 0 -45 7 -67 31 -16 17 -28 41 -28 53 0 20 2 20 33 -10 18 -18 37 -32 42 -32 12 0 65 52 65 64 0 5 -14 25 -32 43 -30 31 -30 33 -10 33 12 0 36 -13 54 -29z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M383 545 c-37 -16 -58 -52 -66 -115 -5 -42 -3 -48 30 -82 34 -35 38 -36 87 -31 63 8 95 27 112 70 17 39 17 63 4 99 l-11 27 -42 -41 c-34 -33 -46 -39 -55 -30 -9 9 -3 21 30 55 l41 42 -27 11 c-36 13 -64 12 -103 -5z m39 -48 c-18 -18 -32 -38 -32 -43 0 -12 53 -64 65 -64 5 0 24 14 42 32 31 30 33 30 33 10 0 -12 -13 -36 -28 -53 -22 -24 -36 -31 -66 -31 -85 0 -120 97 -57 154 17 15 41 28 53 28 20 0 20 -2 -10 -33z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M82 176 c-88 -90 -98 -115 -62 -154 38 -40 65 -29 157 61 l84 82 -49 48 -48 47 -82 -84z m61 -78 c-69 -69 -87 -77 -107 -46 -9 15 0 29 59 88 l69 70 23 -22 24 -22 -68 -68z\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgStoreUnavailable, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/store-unavailable.525a36cb.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgStoreNoConnection = function SvgStoreNoConnection(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"72.000000pt\",\n height: \"56.000000pt\",\n viewBox: \"0 0 72.000000 56.000000\",\n preserveAspectRatio: \"xMidYMid meet\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0.000000,56.000000) scale(0.100000,-0.100000)\",\n fill: \"#000000\",\n stroke: \"none\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M361 296 c-242 -242 -278 -286 -238 -286 7 0 53 40 102 90 87 87 91 90 135 90 29 0 60 -9 89 -25 49 -29 71 -32 71 -10 0 21 -70 64 -119 73 l-42 7 44 43 44 44 44 -23 c24 -12 58 -33 76 -46 32 -24 53 -24 53 1 0 15 -75 71 -116 86 l-27 11 38 39 39 39 35 -21 c20 -12 51 -34 69 -50 35 -30 47 -34 57 -17 9 13 -19 44 -75 82 -25 17 -47 32 -49 34 -3 2 10 19 29 37 20 22 30 41 27 50 -4 9 -10 16 -14 16 -5 0 -127 -119 -272 -264z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M229 492 c-108 -29 -249 -126 -221 -154 8 -8 16 -8 30 3 151 109 188 123 339 124 130 0 168 16 83 34 -71 15 -154 13 -231 -7z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M245 352 c-60 -21 -145 -78 -145 -97 0 -28 20 -25 67 9 47 33 127 66 162 66 10 0 26 9 36 20 18 20 17 20 -26 20 -24 -1 -66 -8 -94 -18z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M330 76 c-28 -35 11 -93 48 -70 35 22 22 84 -18 84 -10 0 -23 -7 -30 -14z\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgStoreNoConnection, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/store-no-connection.9d88499a.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tflex: 1;\r\n\tbackground: #FFFFFF;\r\n\tborder-radius: 15px;\r\n\tpadding: 20px;\r\n\tmin-width: 100%;\r\n\r\n &.dialog {\r\n\t min-width: calc(100% - 40px);\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n &.actions {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 100%;\r\n flex: 1;\r\n gap: 20px;\r\n\r\n > button {\r\n flex: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n\t> p {\r\n\t\tmargin: 0;\r\n\t\tmargin-bottom: 10px;\r\n\r\n\t\t&:last-child {\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n\r\n > div {\r\n min-width: 100%;\r\n }\r\n\r\n \r\n svg {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const H4 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n font-size: 18px;\r\n line-height: 18px;\r\n padding: 0;\r\n margin: 20px 0;\r\n\tflex: 1;\r\n\ttext-align: center;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont-size: 14px;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n text-align: center;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n\r\n &.warning {\r\n color: #F00;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n\tcolor: #FFFFFF;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: 15px;\r\n font-weight: bold;\r\n flex: 1;\r\n max-height: 40px;\r\n min-height: 40px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 15px;\r\n margin: 0;\r\n font-size: 14px;\r\n line-height: 14px;\r\n box-sizing: border-box;\r\n`\r\n\r\nexport const Input = styled.input`\r\n\tborder: 0 none;\r\n\tborder-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey06Color) || '#EEE'} 1px solid;\r\n\tfont-size: 18px;\r\n\ttext-align: center;\r\n\theight: 30px;\r\n\tmin-height: 30px;\r\n\tmax-height: 30px;\r\n\tline-height: 30px;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.blue06Color) || '#000' };\r\n\tmargin: 0 auto;\r\n\tflex: 0;\r\n\tmargin-bottom: 20px;\r\n\tmin-width: 50%;\r\n flex: 1;\r\n\r\n &[type=number]::-webkit-inner-spin-button,\r\n &[type=number]::-webkit-outer-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n`\r\n\r\nexport const Div = styled.div`\r\n min-width: 100%;\r\n display: flex;\r\n\r\n &.warning {\r\n > input {\r\n color: #f00;\r\n }\r\n }\r\n\r\n &.input {\r\n margin-bottom: 20px;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n > input {\r\n margin-bottom: 5px;\r\n }\r\n\r\n > p {\r\n font-size: 14px;\r\n }\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n padding: 1rem;\r\n background: none;\r\n border: 0 none;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n text-align: end;\r\n position: absolute;\r\n\tright: 0;\r\n\ttop: 0;\r\n\tfont-size: 1.5rem;\r\n\tz-index: 1;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tright: -1rem;\r\n\t\ttop: -3.5rem;\r\n\t}\r\n\r\n @media (max-width: 40rem) {\r\n\t\tdisplay: none;\r\n\t}\r\n`\r\n","import React, { useState, useEffect } from 'react'\r\nimport { Dialog, DialogContent } from '@material-ui/core'\r\nimport { makeStyles } from '@material-ui/core/styles';\r\nimport { ReactComponent as IconStoreOff } from './../../assets/icons/store-off.svg'\r\nimport { ReactComponent as IconStoreUnavailable } from './../../assets/icons/store-unavailable.svg'\r\nimport { ReactComponent as IconStoreNoConnection } from './../../assets/icons/store-no-connection.svg'\r\n\r\nimport {\r\n Wrapper,\r\n H4,\r\n Paragraph,\r\n Button,\r\n Div,\r\n CloseButton\r\n} from './styles'\r\nimport { CustomIcon } from '../../components';\r\n\r\nconst useStyles = makeStyles({\r\n paper: {\r\n margin: 0,\r\n position: 'absolute',\r\n bottom: '-10px'\r\n },\r\n paperWidthMd: {\r\n width: '100%',\r\n },\r\n paperWidthMdMobile: {\r\n width: '400px'\r\n }\r\n});\r\n\r\nexport function StatusOverlay(props) {\r\n const {\r\n overlay,\r\n setOverlay,\r\n status,\r\n actions,\r\n className = '',\r\n isMobile = false\r\n } = props\r\n const classes = useStyles();\r\n const [fullWidth, setFullWidth] = useState(false);\r\n const [maxWidth, setMaxWidth] = useState('md');\r\n const [pageStatus, setPageStatus] = useState(\"\")\r\n const [pageTitle, setPageTitle] = useState(\"\")\r\n const [pageContent, setPageContent] = useState(\"\")\r\n\r\n useEffect(() => {\r\n if (status) {\r\n setFullWidth(true)\r\n setMaxWidth('md')\r\n\r\n if (status === 2) {\r\n setPageStatus(\"fechado\")\r\n setPageTitle(\"Esse estabelecimento está fechado no momento!\")\r\n }\r\n if (status === 3) {\r\n setPageStatus(\"em-manutencao\")\r\n setPageTitle(\"Esta loja está em manutenção no momento!\")\r\n setPageContent(\"Estamos trabalhando para melhorar sua experiência! Infelizmente não será possivel fazer o seu pedido agora!\")\r\n }\r\n if (status === 4) {\r\n setPageStatus(\"sem-conexao\")\r\n setPageTitle(\"Esta loja está sem conexão no momento!\")\r\n setPageContent(\"Perdemos temporariamente a conexão com a loja e não conseguimos finalizar o seu pedido. Tente novamente mais tarde.\")\r\n }\r\n\r\n\t\t\t\t\t\tif (status === 6) {\r\n\t\t\t\t\t\t\tsetPageStatus(\"fechado\")\r\n\t\t\t\t\t\t\tsetPageTitle(\"Esse estabelecimento está fechado temporariamente!\")\r\n\t\t\t\t\t}\r\n }\r\n }, [status])\r\n\r\n return setOverlay(false)}\r\n aria-labelledby={`alert-dialog-title-${pageStatus}`}\r\n aria-describedby={`alert-dialog-description-${pageStatus}`}\r\n fullWidth={fullWidth}\r\n maxWidth={maxWidth}\r\n className='status-notification'\r\n classes={isMobile ? { paper: classes.paper, paperWidthMd: classes.paperWidthMd } : { paperWidthMd: classes.paperWidthMdMobile }}\r\n PaperProps={{ style: { borderRadius: !isMobile ? '16px' : '10px' } }}\r\n >\r\n \r\n \r\n {\r\n setOverlay(false)\r\n }}>\r\n \r\n\r\n {\r\n\t\t\t\t\t\t\t\t\t(status === 2 || status === 6) ? \r\n\t\t\t\t\t\t\t\t\t\t{pageContent} : null}\r\n\r\n {actions ? \r\n \r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n padding: 0;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n\r\n * {\r\n font-family: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.fontFamily) || 'Roboto, sans-serif' };\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: 1.375rem;\r\n margin: 0;\r\n padding: 0;\r\n line-height: 1.375rem;\r\n margin-bottom: 1.875rem;\r\n padding-bottom: 1.875rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'} .063rem solid;\r\n min-width: 100%;\r\n text-align: center;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n opacity: 0;\r\n transition: all .25s ease-in;\r\n min-width: 100%;\r\n padding: 1.875rem .938rem;\r\n box-sizing: border-box;\r\n\r\n &.motion {\r\n opacity: 1;\r\n\r\n > p {\r\n &:nth-child(6) {\r\n margin-bottom: 1.25rem;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const Input = styled.input`\r\n border: 0 none;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'} .063rem solid;\r\n font-size: 1.125rem;\r\n text-align: center;\r\n height: 1.875rem;\r\n line-height: 1.875rem;\r\n padding: 0;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n margin: 0 auto;\r\n flex: 1;\r\n margin-bottom: 1.25rem;\r\n min-width: 100%;\r\n\r\n &::placeholder { /* Chrome, Firefox, Opera, Safari 1.1+ */\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n }\r\n\r\n &:-ms-input-placeholder { /* Internet Explorer 10-11 */\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n }\r\n\r\n &::-ms-input-placeholder { /* Microsoft Edge */\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n }\r\n\r\n &.required {\r\n border-bottom: #f00 .063rem solid;\r\n margin-bottom: .313rem;\r\n\r\n &::placeholder { /* Chrome, Firefox, Opera, Safari 1.1+ */\r\n color: #f00;\r\n }\r\n\r\n &:-ms-input-placeholder { /* Internet Explorer 10-11 */\r\n color: #f00;\r\n }\r\n\r\n &::-ms-input-placeholder { /* Microsoft Edge */\r\n color: #f00;\r\n }\r\n }\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n min-width: 100%;\r\n text-align: center;\r\n margin-bottom: 1.25rem;\r\n\r\n &.warning {\r\n color: #f00;\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: 1.25rem;\r\n margin: 0;\r\n padding: 0;\r\n line-height: 1.5rem;\r\n min-width: 100%;\r\n text-align: center;\r\n margin-bottom: 1.25rem;\r\n`\r\n\r\nexport const Button = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff'};\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: .938rem;\r\n font-size: .875rem;\r\n font-weight: bold;\r\n flex: 1;\r\n max-height: 3.125rem;\r\n min-height: 3.125rem;\r\n line-height: 3.125rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n margin-bottom: 1.25rem;\r\n box-sizing: border-box;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n`\r\n","import React, {\r\n useEffect,\r\n useState,\r\n useContext\r\n} from 'react'\r\nimport { withRouter } from 'react-router-dom'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n withTheme\r\n} from 'styled-components'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../domain/helpers'\r\n\r\nimport history from '../../history'\r\n\r\nimport LoadingGIF from '../assets/loading.gif'\r\n\r\nimport {\r\n modality,\r\n\taddressActions\r\n} from '../../state'\r\n\r\nimport {\r\n setUserHistory,\r\n setUserCard\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n Button,\r\n H1,\r\n H2,\r\n ContentWrapper,\r\n LoadingWrapper,\r\n LoadingImage,\r\n Input,\r\n Paragraph,\r\n Wrapper\r\n} from './styles'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nexport function ModalityPage(props) {\r\n const {\r\n cep,\r\n setCEP,\r\n setUserCard,\r\n setModality,\r\n setAddress,\r\n handlePickup: propsHandlePickup,\r\n handleDelivery: propsHandleDelivery,\r\n theme,\r\n setUserHistory,\r\n handleGTM,\r\n URLParameters\r\n } = props\r\n\r\n const [loaded, setLoaded] = useState(false)\r\n const [ready, setReady] = useState(false)\r\n const [contentMotion, setContentMotion] = useState(false)\r\n const [CEPRequired, setCEPRequired] = useState(false)\r\n\r\n const context = useContext(Context)\r\n\r\n useEffect(() => {\r\n setLoaded(true)\r\n\r\n if (loaded) {\r\n setReady(true)\r\n }\r\n\r\n if (loaded && ready) {\r\n setTimeout(() => setContentMotion(true), 1000)\r\n }\r\n }, [\r\n loaded,\r\n ready,\r\n theme\r\n ])\r\n\r\n function handleSearchCEP() {\r\n if (cep && cep.length === 9) {\r\n handleGTM({\r\n 'event': 'Address_Info',\r\n 'CEP': cep\r\n })\r\n\r\n setCEPRequired(false)\r\n\r\n setUserCard(null)\r\n\r\n propsHandleDelivery()\r\n\r\n setModality({\r\n id: 4\r\n })\r\n setUserHistory({\r\n back: '/'\r\n })\r\n\r\n history.push(`/new-address${URLParameters}`)\r\n\r\n return\r\n }\r\n\r\n setCEPRequired(true)\r\n }\r\n\r\n function handlePickup() {\r\n setModality({\r\n id: 2\r\n })\r\n\r\n setAddress(null)\r\n setUserCard(null)\r\n\r\n propsHandlePickup()\r\n }\r\n\r\n function handleCEP(args) {\r\n postCEP(args)\r\n }\r\n\r\n function postCEP(args) {\r\n setCEP(args)\r\n }\r\n\r\n return \r\n {!loaded && \r\n }\r\n\r\n {loaded && \r\n ou \r\n\r\n {context && context.text } \r\n\r\n {\r\n const {keyCode} = event\r\n\r\n if (!(\r\n (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105) ||\r\n keyCode === 8 ||\r\n keyCode === 9 || \r\n keyCode === 46 || \r\n keyCode === 37 || \r\n keyCode === 39 || \r\n keyCode === 189 \r\n )) {\r\n event.preventDefault()\r\n }\r\n\r\n if (keyCode === 13) {\r\n handleSearchCEP()\r\n }\r\n\r\n if (keyCode === 189 && cep && (cep.indexOf('-') > -1 || cep.length !== 5)) {\r\n event.preventDefault()\r\n }\r\n\r\n if (cep && cep.length === 5 && keyCode !== 8 && keyCode !== 9 && keyCode !== 37 && keyCode !== 39 && keyCode !== 46) {\r\n handleCEP(`${cep}-`)\r\n }\r\n }} onChange={(event) => {\r\n const { value } = event.target\r\n\r\n handleCEP(value)\r\n }} />\r\n\r\n { CEPRequired ? CEP inválido! : null }\r\n\r\n \r\n }\r\n \r\n}\r\n\r\nModalityPage.propTypes = {\r\n handleGTM: PropTypes.func.isRequired,\r\n handleDelivery: PropTypes.func.isRequired,\r\n handlePickup: PropTypes.func.isRequired\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n cep: state.main.cep,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n setModality: modality.setModality,\r\n setAddress: addressActions.setAddress,\r\n setCEP: addressActions.setCEP,\r\n setUserHistory,\r\n setUserCard\r\n})\r\n\r\nexport const Modality = React.memo(pipe(\r\n GetConnection,\r\n GetContent({context: Context, id: 'modality'}),\r\n withRouter,\r\n withTheme\r\n)(ModalityPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n flex: 1;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n display: flex;\r\n ${props => props.maxHeight ?\r\n `max-height: ${ props.maxHeight }px;\r\n min-height: ${ props.maxHeight }px;\r\n overflow: hidden;` :\r\n ``}\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n display: flex;\r\n min-height: 100%;\r\n\t\tflex: 1;\r\n\r\n > main {\r\n background: #fff;\r\n min-height: 100%;\r\n max-height: 100%;\r\n box-sizing: border-box;\r\n position: relative;\r\n\t\t\tdisplay: flex;\r\n \tflex-direction: column;\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: unset;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n > div {\r\n > main {\r\n min-height: calc(100% - 5.625rem);\r\n max-height: calc(100% - 5.625rem);\r\n margin: 0px auto;\r\n box-sizing: unset;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n\t\tdisplay: none;\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: 0 none;\r\n padding: 1.5rem 0 .5rem 0;\r\n margin: 0 1.25rem .5rem;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n padding: 2.25rem 0 .5rem 0;\r\n margin: 0 2rem 1rem;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n`\r\n","import React, {\r\n useContext,\r\n useState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport {\r\n\tuseStoreSettings,\r\n\tuseDeviceLayout,\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n logout,\r\n setModality\r\n} from '../../redux/actions/main'\r\n\r\nimport { cart } from '../../state'\r\n\r\nimport {\r\n pipe,\r\n GetContent,\r\n caculateProductsQuantity\r\n} from '../../domain/helpers'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n DefaultImage as Image,\r\n CustomIcon\r\n} from '../components'\r\n\r\nimport {\r\n Cart,\r\n CartContainer,\r\n MainHeader,\r\n PageContainer,\r\n PageContainerHeader,\r\n PageContainerMain,\r\n PageContainerSide,\r\n Skeleton,\r\n Navigation,\r\n Cards\r\n} from '..'\r\n\r\nimport {\r\n H1,\r\n Wrapper,\r\n LoadingWrapper,\r\n BackButton\r\n} from './styles'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nexport function MyCardsPage(props) {\r\n const {\r\n accessToken,\r\n addressDelivery,\r\n cartProducts,\r\n loading,\r\n theme,\r\n address,\r\n userName,\r\n storeName,\r\n storeImg,\r\n modalityId,\r\n setModality,\r\n payment,\r\n URLParameters\r\n } = props\r\n\r\n const storeImage = theme.headerImage\r\n const storeLogo = theme.logoImage\r\n\r\n\tconst {\r\n\t\tlayoutMode,\r\n\t\tlayoutModeEnum,\r\n\t\thandleLayoutMode\r\n\t} = useLayout()\r\n\r\n\tconst {\r\n\t\tsidebarContent,\r\n\t\tsidebarOpened,\r\n\t\tsidebarContentEnum,\r\n\t\thandleSidebarContent,\r\n\t\thandleSidebarOpened\r\n\t} = useSidebar()\r\n\r\n const context = useContext(Context)\r\n\r\n const newCardContent = context.sections.filter(item => item.id === 'new-card-content')[0]\r\n const newCardContentTitle = newCardContent.data.header.title\r\n\r\n\tconst {\r\n\t\turl,\r\n\t\ttitle,\r\n\t\tdescription\r\n\t} = useStoreSettings()\r\n\r\n const isMobile = useDeviceLayout({\r\n isMobile: true\r\n })\r\n\r\n const [visibleSignIn, setVisibleSignIn] = useState(false)\r\n const [viewCards, setViewCards] = useState(false)\r\n const [newCard, setNewCard] = useState(false)\r\n\r\n async function handleModality(id) {\r\n setModality({ id })\r\n }\r\n\r\n function handleContactUs() {\r\n history.push(`/contact-us${URLParameters}`)\r\n }\r\n\r\n function handleNewCard() {\r\n if (!newCard) {\r\n setNewCard(true)\r\n } else {\r\n setNewCard(false)\r\n }\r\n }\r\n\r\n return (\r\n \r\n\t\t\t\r\n\t\t\t\t{`${title} - Meus cartões`} \r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t \r\n\r\n {loading.includes('my-cards') && \r\n }\r\n\r\n {!loading.includes('my-cards') && \r\n \r\n {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\tsetViewCards(false)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.nav)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tcartClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tisSidebarOpen={sidebarOpened}\r\n />\r\n \r\n \r\n {\r\n if (!newCard) {\r\n window.history.back()\r\n } else {\r\n handleNewCard(false)\r\n }\r\n }}>\r\n \r\n\r\n \r\n \r\n\t\t\t\t\t{!isMobile && layoutMode === layoutModeEnum.sideFullContent &&\r\n \r\n { }}\r\n handleClose={() => { }}\r\n />\r\n }\r\n\r\n\t\t\t\t\t{layoutMode === layoutModeEnum.headerFullContent && handleContactUs()}\r\n\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\tcurrentRoute='my-cards'\r\n\t\t\t\t\t/>}\r\n \r\n }\r\n \r\n )\r\n}\r\n\r\nMyCardsPage.propTypes = {\r\n\taccessToken: PropTypes.string,\r\n\taddressDelivery: PropTypes.string,\r\n\tcartProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tloading: PropTypes.arrayOf(PropTypes.string),\r\n\ttheme: PropTypes.shape({\r\n\t\theaderImage: PropTypes.string,\r\n\t\tlogoImage: PropTypes.string\r\n\t}),\r\n\taddress: PropTypes.shape({}),\r\n\tuserName: PropTypes.string,\r\n\tstoreName: PropTypes.string,\r\n\tstoreImg: PropTypes.string,\r\n\tmodalityId: PropTypes.number,\r\n\tsetModality: PropTypes.func,\r\n\tpayment: PropTypes.bool,\r\n\tURLParameters: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n accessToken: state.user.accessToken,\r\n addressDelivery: state.address.addressByCEP || '',\r\n cartProducts: (state.main.cart && state.main.cart.products) || [],\r\n loading: state.loading.loading || [],\r\n registeredCoupons: state.main.coupons || { coupons: [] },\r\n address: state.address.address || '',\r\n userAddresses: state.userAddress.userAddresses || [],\r\n userHistory: state.main.userHistory || {},\r\n userName: state.user.name || '',\r\n storeImg: (state.store.store && state.store.store.logo) || '',\r\n modalityId: state.main.modality && state.main.modality.id,\r\n storeName: state.store.store && state.store.store.name,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchCart: cart.fetchCart,\r\n logout,\r\n setModality\r\n})\r\n\r\nexport const MyCards = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'my-cards' })\r\n)(MyCardsPage))\r\n","var _path, _path2, _path3;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconSingleCreditCard = function SvgIconSingleCreditCard(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 34,\n height: 30,\n viewBox: \"0 0 34 30\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M23.246 0.190884L0.72301 12.9909C0.559374 13.0823 0.415606 13.2054 0.300109 13.353C0.184612 13.5006 0.0997057 13.6698 0.0503571 13.8506C0.00100847 14.0315 -0.0117918 14.2203 0.0127022 14.4061C0.0371962 14.5919 0.0984941 14.771 0.193011 14.9329L1.63801 17.3959L3.44401 20.4749L8.14401 28.4749C8.33931 28.8026 8.65538 29.0407 9.02429 29.1379C9.39321 29.2351 9.78554 29.1838 10.117 28.9949L32.636 16.1999C32.7996 16.1085 32.9434 15.9854 33.0589 15.8377C33.1744 15.6901 33.2593 15.521 33.3087 15.3401C33.358 15.1593 33.3708 14.9705 33.3463 14.7846C33.3218 14.5988 33.2605 14.4197 33.166 14.2579L28.466 6.25788L26.66 3.17888L25.219 0.710884C25.0237 0.383153 24.7076 0.145101 24.3387 0.0478705C23.9698 -0.04936 23.5775 0.00198832 23.246 0.190884V0.190884ZM31.914 14.9689L9.39101 27.7689L4.69101 19.7639L27.214 6.96388L31.914 14.9689ZM2.89001 16.6839L1.44501 14.2199L23.968 1.41988L25.412 3.88388L2.89001 16.6839Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18.264 18.6198L9.42001 23.6458C9.33763 23.691 9.26522 23.7525 9.20709 23.8263C9.14897 23.9002 9.10631 23.985 9.08167 24.0757C9.05704 24.1664 9.05092 24.2612 9.06369 24.3543C9.07646 24.4474 9.10786 24.537 9.15601 24.6178C9.25357 24.7819 9.4117 24.9011 9.59632 24.9497C9.78093 24.9983 9.97726 24.9725 10.143 24.8778L18.987 19.8518C19.0689 19.806 19.1408 19.7443 19.1985 19.6704C19.2563 19.5965 19.2987 19.5118 19.3233 19.4212C19.3478 19.3307 19.3541 19.2362 19.3417 19.1432C19.3293 19.0502 19.2985 18.9607 19.251 18.8798C19.1533 18.7159 18.9951 18.5968 18.8106 18.5482C18.6261 18.4996 18.4298 18.5253 18.264 18.6198V18.6198Z\",\n fill: \"#F27C25\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M8.74002 22.3898L20.627 15.6358C20.7093 15.5905 20.7815 15.5291 20.8396 15.4554C20.8976 15.3816 20.9402 15.2969 20.9649 15.2063C20.9895 15.1157 20.9956 15.021 20.983 14.928C20.9703 14.835 20.939 14.7455 20.891 14.6648C20.7934 14.5007 20.6353 14.3815 20.4507 14.3329C20.2661 14.2842 20.0698 14.3101 19.904 14.4048L8.01802 21.1588C7.93578 21.2041 7.86348 21.2654 7.80545 21.3392C7.74741 21.413 7.70481 21.4977 7.68018 21.5883C7.65555 21.6789 7.64939 21.7735 7.66207 21.8666C7.67476 21.9596 7.70603 22.0491 7.75402 22.1298C7.85139 22.2938 8.00934 22.413 8.19379 22.4616C8.37824 22.5103 8.57442 22.4845 8.74002 22.3898V22.3898Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconSingleCreditCard, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_single_credit_card.68c6b38c.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2, _path3, _path4, _path5;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconOrder = function SvgIconOrder(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 26,\n height: 30,\n viewBox: \"0 0 26 30\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M22.152 0.999848H3.165C2.34757 0.97834 1.55505 1.28224 0.961578 1.84477C0.368108 2.40731 0.0222472 3.18244 0 3.99985V29.4808L4.351 27.2328L8.702 29.4808L12.658 27.2328L16.616 29.4808L20.967 27.2328L25.316 29.4808V3.99985C25.2938 3.18262 24.948 2.40764 24.3548 1.84514C23.7615 1.28263 22.9693 0.97861 22.152 0.999848ZM23.734 26.8818L21.694 25.8268L20.967 25.4508L20.241 25.8268L16.652 27.6808L13.44 25.8568L12.658 25.4128L11.876 25.8568L8.666 27.6808L5.077 25.8268L4.351 25.4518L3.625 25.8268L1.582 26.8818V3.99985C1.606 3.60311 1.78566 3.23188 2.08191 2.9669C2.37816 2.70192 2.76705 2.56462 3.164 2.58485H22.152C22.549 2.56462 22.9378 2.70192 23.2341 2.9669C23.5303 3.23188 23.71 3.60311 23.734 3.99985V26.8818Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M4.747 8.11984H12.656C12.8658 8.11984 13.067 8.0365 13.2153 7.88816C13.3637 7.73982 13.447 7.53863 13.447 7.32884C13.447 7.11906 13.3637 6.91786 13.2153 6.76952C13.067 6.62118 12.8658 6.53784 12.656 6.53784H4.745C4.53522 6.53784 4.33402 6.62118 4.18568 6.76952C4.03734 6.91786 3.954 7.11906 3.954 7.32884C3.954 7.43289 3.97453 7.53591 4.0144 7.63201C4.05428 7.72811 4.11272 7.81539 4.18639 7.88887C4.26005 7.96235 4.34748 8.02057 4.44368 8.06021C4.53988 8.09984 4.64296 8.1201 4.747 8.11984V8.11984Z\",\n fill: \"#F27C25\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.57 16.0317H4.747C4.53722 16.0317 4.33602 16.1151 4.18768 16.2634C4.03934 16.4118 3.956 16.613 3.956 16.8227C3.956 17.0325 4.03934 17.2337 4.18768 17.3821C4.33602 17.5304 4.53722 17.6137 4.747 17.6137H20.57C20.7798 17.6137 20.981 17.5304 21.1293 17.3821C21.2777 17.2337 21.361 17.0325 21.361 16.8227C21.361 16.613 21.2777 16.4118 21.1293 16.2634C20.981 16.1151 20.7798 16.0317 20.57 16.0317V16.0317Z\",\n fill: \"#F27C25\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.57 11.2849H4.747C4.53722 11.2849 4.33602 11.3682 4.18768 11.5166C4.03934 11.6649 3.956 11.8661 3.956 12.0759C3.956 12.2857 4.03934 12.4869 4.18768 12.6352C4.33602 12.7836 4.53722 12.8669 4.747 12.8669H20.57C20.7798 12.8669 20.981 12.7836 21.1293 12.6352C21.2777 12.4869 21.361 12.2857 21.361 12.0759C21.361 11.8661 21.2777 11.6649 21.1293 11.5166C20.981 11.3682 20.7798 11.2849 20.57 11.2849V11.2849Z\",\n fill: \"#F27C25\"\n })), _path5 || (_path5 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M20.57 20.7788H4.747C4.64309 20.7787 4.54017 20.799 4.44414 20.8388C4.34811 20.8785 4.26086 20.9367 4.18739 21.0102C4.11391 21.0837 4.05565 21.1709 4.01595 21.267C3.97624 21.363 3.95587 21.4659 3.956 21.5698C3.95587 21.6737 3.97624 21.7766 4.01595 21.8727C4.05565 21.9687 4.11391 22.0559 4.18739 22.1294C4.26086 22.2029 4.34811 22.2612 4.44414 22.3009C4.54017 22.3406 4.64309 22.3609 4.747 22.3608H20.57C20.6739 22.3609 20.7768 22.3406 20.8729 22.3009C20.9689 22.2612 21.0561 22.2029 21.1296 22.1294C21.2031 22.0559 21.2614 21.9687 21.3011 21.8727C21.3408 21.7766 21.3611 21.6737 21.361 21.5698C21.3611 21.4659 21.3408 21.363 21.3011 21.267C21.2614 21.1709 21.2031 21.0837 21.1296 21.0102C21.0561 20.9367 20.9689 20.8785 20.8729 20.8388C20.7768 20.799 20.6739 20.7787 20.57 20.7788Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconOrder, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_order.da9ea621.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconRoundedUser = function SvgIconRoundedUser(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 57,\n height: 56,\n viewBox: \"0 0 57 56\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M29.068 55.998C44.495 55.998 57.001 43.4919 57.001 28.065C57.001 12.638 44.495 0.131958 29.068 0.131958C13.641 0.131958 1.13501 12.638 1.13501 28.065C1.13501 43.4919 13.641 55.998 29.068 55.998Z\",\n fill: \"#EFEFEF\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M27.812 0H29.975C30.096 0.016 30.2169 0.0349971 30.3389 0.0469971C31.3389 0.146997 32.3459 0.202999 33.3389 0.362999C37.8589 1.05889 42.1268 2.89612 45.739 5.701C48.9148 8.08095 51.5391 11.1188 53.4324 14.6067C55.3258 18.0946 56.4435 21.9503 56.709 25.91C56.9507 28.8997 56.6853 31.9088 55.924 34.81C54.5964 40.0113 51.7964 44.7192 47.8599 48.369C46.3557 49.7782 44.6933 51.0084 42.9059 52.035C39.2783 54.1635 35.2114 55.433 31.017 55.746C30.593 55.778 30.1689 55.816 29.7449 55.851H28.0369C27.9159 55.836 27.795 55.811 27.673 55.806C26.1937 55.7488 24.7218 55.5668 23.273 55.262C18.1128 54.2104 13.3612 51.7045 9.57904 48.04C7.82764 46.3652 6.30423 44.4673 5.04803 42.395C2.91206 38.9027 1.58273 34.9775 1.15704 30.906C1.09604 30.332 1.04796 29.756 0.993958 29.181V26.67C1.01096 26.559 1.03593 26.449 1.04193 26.337C1.14708 24.288 1.48811 22.2579 2.05804 20.287C3.61931 14.7442 6.87403 9.82793 11.367 6.226C15.5307 2.81172 20.6095 0.702584 25.967 0.163002C26.586 0.100002 27.2 0.054 27.812 0ZM46.758 46.742C50.4025 43.3105 52.9718 38.8944 54.1537 34.0302C55.3357 29.166 55.0794 24.0633 53.416 19.342C51.5724 14.0538 48.0689 9.50304 43.4279 6.36845C38.7869 3.23385 33.2572 1.6833 27.663 1.948C22.1337 2.21382 16.8337 4.23796 12.5349 7.7256C8.236 11.2132 5.16284 15.9822 3.763 21.338C2.56967 25.8362 2.61827 30.5738 3.90375 35.0465C5.18922 39.5193 7.66339 43.5598 11.0629 46.738C11.6389 46.295 12.19 45.829 12.784 45.423C14.7074 44.1669 16.815 43.2188 19.0309 42.613C19.9771 42.3586 20.8633 41.9188 21.638 41.319C22.04 41.0285 22.364 40.6432 22.581 40.1972C22.798 39.7513 22.9015 39.2586 22.882 38.763C22.838 37.672 22.861 36.579 22.842 35.487C22.8329 35.3492 22.7874 35.2163 22.71 35.102C22.3545 34.6344 22.0285 34.1452 21.7339 33.637C21.2039 32.548 20.7499 31.423 20.2609 30.314C20.2278 30.208 20.1675 30.1125 20.086 30.037C19.5956 29.7075 19.1834 29.2744 18.8785 28.7683C18.5735 28.2623 18.3832 27.6955 18.321 27.108C18.1204 26.2095 18.2406 25.2691 18.6609 24.45C18.6909 24.3818 18.6999 24.3063 18.687 24.233C18.552 23.046 18.3689 21.862 18.2869 20.671C18.1047 18.6138 18.2876 16.5406 18.827 14.547C19.2198 12.9108 20.0663 11.4186 21.2692 10.2419C22.4721 9.06518 23.9825 8.25173 25.627 7.895C27.4988 7.4688 29.4299 7.36733 31.336 7.595C31.8994 7.61844 32.4487 7.7785 32.9365 8.06142C33.4242 8.34433 33.8358 8.7416 34.1359 9.219C34.1559 9.251 34.175 9.292 34.205 9.308C34.3394 9.39435 34.4851 9.46166 34.638 9.508C34.991 9.576 35.356 9.581 35.705 9.662C36.5278 9.85278 37.2895 10.2473 37.9201 10.8092C38.5507 11.3711 39.0301 12.0825 39.314 12.878C40.0255 14.7794 40.2906 16.8189 40.0889 18.839C39.9747 20.6011 39.6884 22.3477 39.2339 24.054C39.1978 24.1588 39.2007 24.2731 39.242 24.376C39.6351 25.0566 39.7817 25.8519 39.657 26.628C39.6481 27.2341 39.5036 27.8305 39.2342 28.3735C38.9648 28.9165 38.5773 29.3923 38.1 29.766C37.5933 30.1141 37.239 30.6429 37.1099 31.244C37.0869 31.336 37.054 31.425 37.022 31.514C36.6058 32.8386 35.9629 34.0811 35.122 35.186C35.0659 35.2713 35.0378 35.372 35.0419 35.474C35.0369 36.709 35.013 37.944 35.054 39.174C35.0611 39.562 35.1806 39.9396 35.398 40.261C35.7663 40.7899 36.2229 41.2513 36.748 41.625C37.4431 42.0674 38.1927 42.4177 38.978 42.667C40.9094 43.2255 42.7587 44.0365 44.478 45.079C45.26 45.6 45.993 46.184 46.758 46.742V46.742Z\",\n fill: \"#949494\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconRoundedUser, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_rounded_user.ff687d4a.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _path2;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconLogout = function SvgIconLogout(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 27,\n height: 31,\n viewBox: \"0 0 27 31\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18.42 15.4629C19.2484 15.4629 19.92 14.7913 19.92 13.9629C19.92 13.1345 19.2484 12.4629 18.42 12.4629C17.5916 12.4629 16.92 13.1345 16.92 13.9629C16.92 14.7913 17.5916 15.4629 18.42 15.4629Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M25.854 28.306H23.354V3.336C23.354 2.89774 23.2677 2.46378 23.0999 2.05891C22.9321 1.65403 22.6862 1.28619 22.3762 0.976388C22.0662 0.666585 21.6982 0.420897 21.2933 0.253365C20.8883 0.0858331 20.4543 -0.000262145 20.016 5.99569e-07H6.67201C5.78725 5.99569e-07 4.93873 0.351468 4.31311 0.97709C3.68749 1.60271 3.33601 2.45124 3.33601 3.336V28.306H0.836014C0.614823 28.306 0.40269 28.3939 0.246284 28.5503C0.0898791 28.7067 0.00201416 28.9188 0.00201416 29.14C0.00201416 29.3612 0.0898791 29.5733 0.246284 29.7297C0.40269 29.8861 0.614823 29.974 0.836014 29.974H3.33601V30.023H23.352V29.974H25.852C25.9616 29.9741 26.0701 29.9526 26.1713 29.9108C26.2726 29.8689 26.3646 29.8075 26.442 29.73C26.5195 29.6525 26.5809 29.5606 26.6228 29.4593C26.6647 29.3581 26.6861 29.2496 26.686 29.14C26.686 28.9192 26.5984 28.7073 26.4425 28.551C26.2865 28.3946 26.0749 28.3065 25.854 28.306V28.306ZM5.00002 3.336C5.00054 2.89378 5.17645 2.46982 5.48914 2.15713C5.80184 1.84443 6.2258 1.66853 6.66801 1.668H20.012C20.4542 1.66853 20.8782 1.84443 21.1909 2.15713C21.5036 2.46982 21.6795 2.89378 21.68 3.336V28.306H5.00002V3.336Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconLogout, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_logout.994908cf.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.nav`\r\n display: flex;\r\n flex-direction: column;\r\n background-color: #fff;\r\n\r\n @media (min-width: 60rem) {\r\n padding: 0 0 5rem 0;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n max-width: 22.25rem;\r\n width: 100%;\r\n position: fixed;\r\n \r\n overflow-y: scroll;\r\n max-height: 98%;\r\n \r\n ::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n \r\n ::-webkit-scrollbar-track {\r\n -webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n border-radius: 10px;\r\n }\r\n \r\n ::-webkit-scrollbar-thumb {\r\n border-radius: 10px;\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'}; \r\n -webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n }\r\n }\r\n`\r\n\r\nexport const Header = styled.div`\r\n display: flex;\r\n align-items: center;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 2.5rem 1.5rem;\r\n max-height: 8.5rem;\r\n overflow: hidden; \r\n\r\n img, svg {\r\n margin: 0 1.5rem 0 0;\r\n max-width: 3.5rem;\r\n width: 100%;\r\n }\r\n\r\n span {\r\n font-style: normal;\r\n font-weight: 700;\r\n font-size: 1.5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n margin: 0;\r\n overflow: hidden;\r\n max-height: 6rem;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n max-height: 7rem;\r\n\r\n span {\r\n max-height: 4rem;\r\n }\r\n }\r\n`\r\n\r\nexport const NavListItem = styled.li`\r\n display: flex;\r\n align-items: center;\r\n height: 3rem;\r\n cursor: pointer;\r\n padding: 1rem;\r\n\r\n &:hover {\r\n background-color: #f7f7f7;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n height: 5rem;\r\n }\r\n`\r\n\r\nexport const NavListItemLink = styled.a`\r\n display: flex;\r\n flex: 1;\r\n height: 100%;\r\n max-height: 100%;\r\n max-width: 100%;\r\n min-height: 100%;\r\n min-width: 100%;\r\n width: 100%;\r\n`\r\n\r\nexport const NavListItemImageContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n margin: 0 1.5rem 0 0;\r\n width: 2.15rem;\r\n\r\n svg {\r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n\r\n`\r\n\r\nexport const NavListItemDescription = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n\r\n span {\r\n margin: 0;\r\n font-family: Nunito;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n }\r\n\r\n p {\r\n margin: 0;\r\n font-size: .875rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n }\r\n`\r\n\r\nexport const NavList = styled.ul`\r\n display: flex;\r\n flex-direction: column;\r\n padding: 0;\r\n list-style: inside none;\r\n margin: 0;\r\n\r\n ${NavListItem}:not(:first-of-type) {\r\n margin: 0; \r\n }\r\n`\r\n\r\nexport const MobileHeaderWrapper = styled.header`\r\n width: 100%;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n }\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n`\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n logout,\r\n setUserHistory\r\n} from '../../redux/actions/main'\r\n\r\nimport { ReactComponent as IconCreditCard } from '../assets/icons/icon_single_credit_card.svg'\r\nimport { ReactComponent as IconOrder } from '../assets/icons/icon_order.svg'\r\nimport { ReactComponent as IconUser } from '../assets/icons/icon_rounded_user.svg'\r\nimport { ReactComponent as IconCoupon } from '../assets/icons/icon_coupon.svg'\r\nimport { ReactComponent as IconContactUs } from '../assets/icons/icon_contact_us.svg'\r\nimport { ReactComponent as IconLogout } from '../assets/icons/icon_logout.svg'\r\n\r\nimport {\r\n Wrapper,\r\n Header,\r\n NavListItem,\r\n NavListItemLink,\r\n NavListItemDescription,\r\n NavListItemImageContainer,\r\n NavList,\r\n MobileHeaderWrapper,\r\n CloseButton\r\n} from './styles'\r\nimport { CustomIcon } from '../components'\r\nimport { useDeviceLayout } from '../hooks'\r\n\r\nconst Context = React.createContext({})\r\n\r\nexport function NavigationComponent(props) {\r\n const {\r\n userClicked,\r\n userName,\r\n currentRoute,\r\n logout,\r\n setUserHistory,\r\n setVisibleNavigation,\r\n URLParameters\r\n } = props\r\n\r\n const isMobile = useDeviceLayout({\r\n isMobile: true\r\n })\r\n\r\n return (\r\n \r\n \r\n {\r\n setVisibleNavigation(false)\r\n }}>\r\n \r\n \r\n \r\n \r\n \r\n {\r\n setUserHistory({\r\n back: `${currentRoute}`\r\n })\r\n\r\n history.push(`/coupons${URLParameters}`)\r\n }}>\r\n \r\n \r\n \r\n \r\n Cupons\r\n \r\n \r\n \r\n {\r\n setUserHistory({\r\n back: currentRoute\r\n })\r\n\r\n history.push(`/placed-orders${URLParameters}`)\r\n }}>\r\n \r\n \r\n \r\n \r\n Pedidos\r\n \r\n \r\n \r\n {\r\n setUserHistory({\r\n back: currentRoute\r\n })\r\n\r\n history.push(`/my-cards${URLParameters}`)\r\n }}>\r\n \r\n \r\n \r\n \r\n Cartões\r\n \r\n \r\n \r\n \r\n {\r\n setUserHistory({\r\n back: `${currentRoute}`\r\n })\r\n\r\n history.push(`/contact-us${URLParameters}`)\r\n }}>\r\n \r\n \r\n \r\n Fale conosco\r\n \r\n \r\n \r\n \r\n {\r\n if (isMobile) {\r\n setVisibleNavigation(false)\r\n logout()\r\n\r\n return\r\n }\r\n\r\n if (logout && typeof logout === 'function') {\r\n logout()\r\n }\r\n\r\n if (userClicked && typeof userClicked === 'function') {\r\n userClicked()\r\n }\r\n }}>\r\n \r\n \r\n \r\n Sair\r\n \r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n accessToken: state.user.accessToken,\r\n addressDelivery: state.address.addressByCEP || '',\r\n cartProducts: (state.main.cart && state.main.cart.products) || [],\r\n loading: state.loading.loading || [],\r\n order: state.main.order || {},\r\n orderCpf: state.main.order && state.main.order.cpf,\r\n orderHistory: state.main.orderHistory || { orders: [] },\r\n storeLogo: state.store.store && state.store.store.logo,\r\n storeImage: state.store.store && state.store.store.images && state.store.store.images.headerBackgroundImage,\r\n userAddresses: state.userAddress.userAddresses || [],\r\n userHistory: state.main.userHistory || {},\r\n userName: state.user.name || '',\r\n addressNumber: (state.main.address && state.main.address.number) || null,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n setUserHistory,\r\n logout\r\n})\r\n\r\nexport const Navigation = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'navigation' })\r\n)(NavigationComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n ${props => props.maxHeight ?\r\n `max-height: ${ props.maxHeight }px;\r\n min-height: ${ props.maxHeight }px;\r\n overflow: hidden;` :\r\n ``}\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n > main {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: unset;\r\n }\r\n }\r\n }\r\n }\r\n`\r\nexport const Contened = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n margin: 5rem auto;\r\n box-sizing: border-box;\r\n\r\n button {\r\n max-width: 14rem;\r\n max-height: 2.5rem;\r\n border-radius: 8px;\r\n font-size: .875rem;\r\n padding: .5rem 3rem;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n max-width: 500px;\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n text-align: left;\r\n font-size: 1.25rem;\r\n text-transform: uppercase;\r\n padding: 1rem 0;\r\n margin: 1.5rem 2rem 0 2rem;\r\n min-width: calc(100% - 4rem);\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: 0 none;\r\n padding: 1.5rem 0 .2rem 0;\r\n text-align: center;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n padding: 0;\r\n margin: 2rem 0 0 0;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n font-size: 0.9rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: center;\r\n padding: 0;\r\n` \r\n","import React, { useEffect, useState } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n\tuseStoreSettings,\r\n\tuseDeviceLayout,\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n\tlogout,\r\n\tsetModality\r\n} from '../../redux/actions/main'\r\n\r\nimport { cart } from '../../state'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent,\r\n\tcaculateProductsQuantity\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tDefaultImage as Image,\r\n\tButton\r\n} from '../components'\r\n\r\nimport NoStoreIcon from '../assets/no-store.png'\r\n\r\nimport { MainHeader } from '../main-header'\r\n\r\nimport { CartContainer } from '../cart'\r\n\r\nimport {\r\n\tCart,\r\n\tPageContainer,\r\n\tPageContainerHeader,\r\n\tPageContainerMain,\r\n\tPageContainerSide\r\n} from '..'\r\n\r\nimport {\r\n\tNavigation,\r\n\tSkeleton,\r\n} from '..'\r\n\r\nimport {\r\n\tWrapper,\r\n\tLoadingWrapper,\r\n\tContened,\r\n\tH2,\r\n\tParagraph\r\n} from './styles'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nexport function NoStorePage(props) {\r\n\tconst {\r\n\t\taccessToken,\r\n\t\tloading,\r\n\t\ttheme,\r\n\t\tstoreName,\r\n\t\tstoreImg,\r\n\t\tmodalityId,\r\n\t\taddress,\r\n\t\taddressDelivery,\r\n\t\tuserName,\r\n\t\tcartProducts,\r\n\t\tsetModality,\r\n\t\tURLParameters\r\n\t} = props\r\n\r\n\tconst storeImage = theme.headerImage\r\n\tconst storeLogo = theme.logoImage\r\n\r\n\tconst {\r\n\t\tlayoutMode,\r\n\t\tlayoutModeEnum,\r\n\t\thandleLayoutMode\r\n\t} = useLayout()\r\n\r\n\tconst {\r\n\t\tsidebarContent,\r\n\t\tsidebarOpened,\r\n\t\tsidebarContentEnum,\r\n\t\thandleSidebarContent,\r\n\t\thandleSidebarOpened\r\n\t} = useSidebar()\r\n\r\n\tconst [visibleSignIn, setVisibleSignIn] = useState(false)\r\n\tconst [viewCards, setViewCards] = useState(false)\r\n\tconst [cartSlideDown, setCartSlideDown] = useState(false)\r\n\r\n\tconst {\r\n\t\turl,\r\n\t\ttitle,\r\n\t\tdescription\r\n\t} = useStoreSettings()\r\n\r\n\tconst isMobile = useDeviceLayout({\r\n\t\tisMobile: true\r\n\t})\r\n\r\n\tuseEffect(() => {\r\n\t\tsetCartSlideDown(false)\r\n\t\tsetModality({ id: 4 })\r\n\r\n\t}, [isMobile, setModality])\r\n\r\n\tasync function handleModality(id) {\r\n\t\tsetModality({ id })\r\n\t}\r\n\r\n\tfunction handleContactUs() {\r\n\t\thistory.push(`/contact-us${URLParameters}`)\r\n\t}\r\n\r\n\tfunction handleNoToken() {\r\n\t\tsetVisibleSignIn(true)\r\n\r\n\t\tsetTimeout(() => {\r\n\t\t\tsetVisibleSignIn(false)\r\n\t\t}, 2000)\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{`${title} - Nenhuma loja`} \r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t \r\n\r\n\t\t\t{loading.includes('no-store') && \r\n\t\t\t\t }\r\n\r\n\t\t\t{!loading.includes('no-store') && \r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\tsetViewCards(false)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.nav)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tcartClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tisSidebarOpen={sidebarOpened}\r\n\t\t\t\t\t/>\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tEstamos trabalhando para ampliar nossa área de atendimento.\r\n\t\t\t\t\t\t\t\tInfelizmente não poderemos atende-lo no momento. \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t{!isMobile && layoutMode === layoutModeEnum.sideFullContent &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\t{layoutMode === layoutModeEnum.headerFullContent && handleContactUs()}\r\n\t\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\t\tcurrentRoute='no-store'\r\n\t\t\t\t\t\t/>}\r\n\t\t\t\t \r\n\t\t\t}\r\n\t\t \r\n\t)\r\n}\r\n\r\nNoStorePage.propTypes = {\r\n\taccessToken: PropTypes.string,\r\n\tloading: PropTypes.arrayOf(PropTypes.shape({})),\r\n\ttheme: PropTypes.shape({\r\n\t\theaderImage: PropTypes.string,\r\n\t\tlogoImage: PropTypes.string\r\n\t}),\r\n\tstoreName: PropTypes.string,\r\n\tstoreImg: PropTypes.string,\r\n\tmodalityId: PropTypes.number,\r\n\taddress: PropTypes.shape({}),\r\n\taddressDelivery: PropTypes.shape({}),\r\n\tuserName: PropTypes.string,\r\n\tcartProducts: PropTypes.shape({}),\r\n\tsetModality: PropTypes.func,\r\n\tURLParameters: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\taccessToken: state.user.accessToken,\r\n\t\taddressDelivery: state.address.addressByCEP || '',\r\n\t\tcartProducts: (state.main.cart && state.main.cart.products) || [],\r\n\t\tloading: state.loading.loading || [],\r\n\t\tregisteredCoupons: state.main.coupons || { coupons: [] },\r\n\t\taddress: state.address.address || '',\r\n\t\tuserAddresses: state.userAddress.userAddresses || [],\r\n\t\tuserHistory: state.main.userHistory || {},\r\n\t\tuserName: state.user.name || '',\r\n\t\tstoreImg: (state.store.store && state.store.store.logo) || '',\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t\tstoreName: state.store.store && state.store.store.name,\r\n\t\tstoreId: state.main.store && state.main.store.id,\r\n\t\tstoreStatus: state.store.store && state.store.store.status,\r\n\t\tdeliveryFee: state.store.store && state.store.store.deliveryFee,\r\n\t\tdeliveryMinimumValue: state.store.store && state.store.store.deliveryMinimumValue,\r\n\t\tpickupMinimumValue: state.store.store && state.store.store.pickupMinimumValue,\r\n\t\tdeliveryTime: state.store.store && state.store.store.deliveryTime,\r\n\t\tstoreContact: state.store.store && state.store.store.contact,\r\n\t\topeningHours: state.store.store && state.store.store.openingHours,\r\n\t\tonlineFlags: state.store.store && state.store.store.onlineFlags,\r\n\t\tURLParameters: (state.main.URLParameters) || ''\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tfetchCart: cart.fetchCart,\r\n\tlogout,\r\n\tsetModality\r\n})\r\n\r\nexport const NoStore = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'no-store' })\r\n)(NoStorePage))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n min-width: 100%;\r\n border-radius: .938rem;\r\n padding: 1.25rem;\r\n position: relative;\r\n\tmargin-bottom: 1rem;\r\n\r\n\t&.default {\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.red04) || '#000' };\r\n\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.red04) || '#000' } .063rem solid;\r\n\t}\r\n\r\n\t&.warning {\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.red04) || '#000' };\r\n\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.red04) || '#000' } .063rem solid;\r\n\r\n\t\t> .close-button {\r\n\t\t\tcolor: #fff;\r\n\t\t}\r\n\t}\r\n\r\n\t&.error {\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.red04) || '#000' };\r\n\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.red04) || '#000' } .063rem solid;\r\n\r\n\t\t> .close-button {\r\n\t\t\tcolor: #fff;\r\n\t\t}\r\n\t}\r\n\r\n\t&.info {\r\n\t\tbackground: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\t\tborder: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' } .063rem solid;\r\n\r\n\t\t> .close-button {\r\n\t\t\tcolor: #fff;\r\n\t\t}\r\n\t}\r\n\r\n > .close-button {\r\n position: absolute;\r\n right: .5rem;\r\n top: 50%;\r\n\t\ttransform: translate(0, -50%);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n\r\n > span {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-height: 100%;\r\n }\r\n }\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n\tline-height: 1.25rem;\r\n\tmin-height: 1.25rem;\r\n\tpadding-right: 1.25rem;\r\n\tcolor: #fff;\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n background: none;\r\n border: 0 none;\r\n padding: .5rem;\r\n margin: 0;\r\n\tbox-sizing: border-border;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n`\r\n","import React from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n withTheme\r\n} from 'styled-components'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../components'\r\n\r\nimport {\r\n setNotification\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n Wrapper,\r\n Paragraph,\r\n CloseButton\r\n} from './styles'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nexport function NotificationComponent(props) {\r\n const {\r\n notification,\r\n setNotification,\r\n\t\tid\r\n } = props\r\n\r\n const {\r\n message,\r\n callback,\r\n\t\ttype = 'default'\r\n } = notification\r\n\r\n return message ? \r\n { message ? { message } : null }\r\n\r\n {\r\n setNotification(null)\r\n callback && callback()\r\n } }>\r\n \r\n : null\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n notification: state.main.notification || {}\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n setNotification\r\n})\r\n\r\nexport const Notification = React.memo(pipe(\r\n GetConnection,\r\n GetContent({context: Context, id: 'notification'}),\r\n withTheme\r\n)(NotificationComponent))\r\n","import styled from 'styled-components'\r\n\r\nimport { fadeIn } from '../components'\r\n\r\nexport const Div = styled.div``\r\n\r\nexport const Wrapper = styled.div`\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 3;\r\n \r\n padding: 1.25rem;\r\n box-sizing: border-box;\r\n\r\n ${fadeIn}\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n\r\n &.home {\r\n > div {\r\n &:not(.background) {\r\n top: 11.875rem;\r\n transform: translate(-50%, 0);\r\n }\r\n\r\n &.background {\r\n top: 11.25rem;\r\n border-radius: .625rem .625rem 0 0;\r\n max-height: calc(100% - 11.25rem);\r\n }\r\n }\r\n }\r\n\r\n > div{\r\n &:not(.background) {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 2;\r\n }\r\n\r\n &.background {\r\n background: rgba(100, 100, 100, .7);\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n }\r\n }\r\n`\r\n","import React from 'react'\r\nimport styled from 'styled-components'\r\nimport PropTypes from 'prop-types'\r\n\r\nconst Wrapper = styled.div`\r\n padding: 1.25rem;\r\n border-radius: 0.938rem;\r\n background: #fff;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: center;\r\n max-width: calc(100% - 2.5rem);\r\n min-width: calc(100% - 2.5rem);\r\n box-sizing: border-box;\r\n position: relative;\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-evenly;\r\n align-items: center;\r\n min-width: 100%;\r\n\r\n > button {\r\n margin-right: 0.938rem;\r\n\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n`\r\n\r\nconst H4 = styled.h4`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.thirdColor) || '#000' };\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n margin: 0;\r\n padding: 0;\r\n flex: 1;\r\n text-align: left;\r\n margin-bottom: 1.25rem;\r\n`\r\n\r\nconst Paragraph = styled.p`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n font-size: 0.875rem;\r\n line-height: 0.875rem;\r\n margin: 0;\r\n padding: 0;\r\n flex: 1;\r\n text-align: left;\r\n min-width: 100%;\r\n margin-bottom: 1.25rem;\r\n`\r\n\r\nconst Button = styled.button`\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: 0.938rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#FFF' };\r\n min-height: 2.5rem;\r\n max-height: 2.5rem;\r\n line-height: 1.25rem;\r\n padding: 0.625rem 0.938rem;\r\n box-sizing: border-box;\r\n flex: 1;\r\n font-size: 0.875rem;\r\n font-weight: bold;\r\n white-space: nowrap;\r\n`\r\n\r\nconst Div = styled.div``\r\n\r\nexport function Warning(props) {\r\n const {\r\n title,\r\n message,\r\n actions\r\n } = props\r\n\r\n return \r\n { title ? { message } : null }\r\n\r\n { actions ? \r\n}\r\n\r\nWarning.propTypes = {\r\n title: PropTypes.string,\r\n message: PropTypes.string,\r\n actions: PropTypes.arrayOf(PropTypes.node)\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tflex: 1;\r\n\tbackground: #fff;\r\n\tborder-radius: .938rem;\r\n\tpadding: 1.25rem;\r\n\tmin-width: 100%;\r\n\r\n\t> p {\r\n\t\tmargin: 0;\r\n\t\tmargin-bottom: 1.25rem;\r\n\r\n\t\t&:last-child {\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n\r\n > div {\r\n min-width: 100%;\r\n }\r\n`\r\n\r\nexport const H4 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1.25rem;\r\n padding: 0;\r\n margin: 0;\r\n\tmargin-bottom: 1.25rem;\r\n\tflex: 1;\r\n\ttext-align: center;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textTenthColor) || '#000' };\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont-size: 1rem;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n\r\n &.warning {\r\n color: #F00;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n\tcolor: #fff;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: .938rem;\r\n font-size: .875rem;\r\n font-weight: bold;\r\n flex: 1;\r\n max-height: 3.75rem;\r\n min-height: 3.75rem;\r\n line-height: 3.75rem;\r\n min-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n font-size: 1rem;\r\n box-sizing: border-box;\r\n`\r\n\r\nexport const Input = styled.input`\r\n\tborder: 0 none;\r\n\tborder-bottom: #E1E1E1 .063rem solid;\r\n\tfont-size: 1.125rem;\r\n\ttext-align: center;\r\n\theight: 1.875rem;\r\n\tmin-height: 1.875rem;\r\n\tmax-height: 1.875rem;\r\n\tline-height: 1.875rem;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n\tmargin: 0 auto;\r\n\tflex: 0;\r\n\tmargin-bottom: 1.25rem;\r\n\tmin-width: 50%;\r\n flex: 1;\r\n\r\n &[type=number]::-webkit-inner-spin-button,\r\n &[type=number]::-webkit-outer-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n`\r\n\r\nexport const Div = styled.div`\r\n min-width: 100%;\r\n display: flex;\r\n\r\n &.warning {\r\n > input {\r\n color: #f00;\r\n }\r\n }\r\n\r\n &.input {\r\n margin-bottom: 1.25rem;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n > input {\r\n margin-bottom: .313rem;\r\n }\r\n\r\n > p {\r\n font-size: .875rem;\r\n }\r\n }\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tflex: 1;\r\n\tbackground: #fff;\r\n\tborder-radius: .938rem;\r\n\tpadding: 1.25rem;\r\n\tmin-width: 100%;\r\n\r\n &.dialog {\r\n\t min-width: calc(100% - 2.5rem);\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n &.actions {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 100%;\r\n flex: 1;\r\n gap: 1.25rem;\r\n\r\n > button {\r\n flex: 1;\r\n }\r\n }\r\n }\r\n }\r\n\r\n\t> p {\r\n\t\tmargin: 0;\r\n\t\tmargin-bottom: .625rem;\r\n\r\n\t\t&:last-child {\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n\r\n > div {\r\n min-width: 100%;\r\n }\r\n`\r\n\r\nexport const H4 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: .875rem;\r\n line-height: .875rem;\r\n padding: 0;\r\n margin: 0;\r\n\tmargin-bottom: .625rem;\r\n\tflex: 1;\r\n\ttext-align: left;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textTenthColor) || '#000' };\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont-size: .75rem;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n\r\n &.warning {\r\n color: #F00;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n\tcolor: #fff;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: .938rem;\r\n font-weight: bold;\r\n flex: 1;\r\n max-height: 2.5rem;\r\n min-height: 2.5rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 .938rem;\r\n margin: 0;\r\n font-size: .875rem;\r\n line-height: .875rem;\r\n box-sizing: border-box;\r\n`\r\n\r\nexport const Input = styled.input`\r\n\tborder: 0 none;\r\n\tborder-bottom: #E1E1E1 .063rem solid;\r\n\tfont-size: 1.125rem;\r\n\ttext-align: center;\r\n\theight: 1.875rem;\r\n\tmin-height: 1.875rem;\r\n\tmax-height: 1.875rem;\r\n\tline-height: 1.875rem;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n\tmargin: 0 auto;\r\n\tflex: 0;\r\n\tmargin-bottom: 1.25rem;\r\n\tmin-width: 50%;\r\n flex: 1;\r\n\r\n &[type=number]::-webkit-inner-spin-button,\r\n &[type=number]::-webkit-outer-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n`\r\n\r\nexport const Div = styled.div`\r\n min-width: 100%;\r\n display: flex;\r\n\r\n &.warning {\r\n > input {\r\n color: #f00;\r\n }\r\n }\r\n\r\n &.input {\r\n margin-bottom: 1.25rem;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n > input {\r\n margin-bottom: .313rem;\r\n }\r\n\r\n > p {\r\n font-size: .875rem;\r\n }\r\n }\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n grid-area: details;\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 1.5rem 0;\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column-reverse;\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n padding: 0 2rem 2rem 0;\r\n border-right: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC'};\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n }\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n color: #6B6B6B;\r\n margin: 0;\r\n max-width: 15rem;\r\n text-transform: uppercase;\r\n display: none;\r\n\r\n @media (min-width: 50rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.5rem;\r\n display: flex;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n align-items: center;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n justify-content: center;\r\n color: #fff;\r\n padding: 1.5rem 1rem;\r\n border-radius: 15px;\r\n height: 3.5rem;\r\n position: relative;\r\n cursor: pointer;\r\n display: flex;\r\n margin: 0 1.5rem;\r\n min-width: calc(100% - 3rem);\r\n box-sizing: border-box;\r\n\r\n &:disabled {\r\n opacity: .5;\r\n cursor: default;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const ButtonLabel = styled.span`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n margin: 0 2rem;\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0;\r\n }\r\n`\r\n","import React, { useState } from 'react'\r\n\r\nimport {\r\n CustomLoading,\r\n Div\r\n} from '../../components'\r\n\r\nimport {\r\n Wrapper,\r\n H3,\r\n Button,\r\n ButtonLabel\r\n} from './styles'\r\n\r\nimport {\r\n SelectedItems,\r\n Coupon,\r\n\tPaymentMethodSelection\r\n} from './'\r\nimport { Dialog, Slide } from '@material-ui/core'\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Item = styled.div`\r\n background: #fff;\r\n width: 100%;\r\n padding: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-sizing: border-box;\r\n border-bottom: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'};\r\n\r\n @media (min-width: 50rem) {\r\n border: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'};\r\n border-radius: 15px;\r\n padding: .85rem;\r\n height: 5rem;\r\n min-height: 5rem;\r\n max-height: 5rem;\r\n }\r\n`\r\n","import React from 'react'\r\n\r\nimport {\r\n Item\r\n} from './styles'\r\n\r\nexport function SelectedItem({ children }) {\r\n return - { children }
\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n flex-direction: column;\r\n\r\n margin: 0 0 1.2rem;\r\n\r\n & > :not(:first-child) {\r\n margin: 0;\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n flex-direction: column;\r\n margin: 2rem 0 1.2rem;\r\n\r\n & > :not(:first-child) {\r\n margin: 1.5rem 0 0 0;\r\n }\r\n }\r\n`\r\n\r\nexport const SelectedItemContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n`\r\n\r\nexport const SelectedItemContentText = styled.div`\r\n font-size: 16px;\r\n font-weight: bold;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n`\r\n\r\nexport const ItemLabel = styled.label`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n`\r\n\r\nexport const DeliveryContent = styled.span`\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n display: flex;\r\n align-items: center;\r\n display: inline-block;\r\n\r\n svg {\r\n width: .75rem;\r\n margin: 0 .5rem 0 0;\r\n height: auto\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n }\r\n\r\n >span{\r\n &.scheduling{\r\n font-size: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n }\r\n`\r\n\r\nexport const SelectedItemAction = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n svg {\r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n\r\n`\r\n\r\nexport const EditButton = styled.button`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: transparent;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n svg path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n } \r\n }\r\n`\r\n\r\nexport const PaymentMethodContent = styled.span`\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: #7D7D7D;\r\n display: flex;\r\n align-items: center;\r\n display: flex;\r\n\r\n svg {\r\n width: 2rem;\r\n margin: 0 .5rem 0 0;\r\n height: auto;\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n }\r\n`\r\n\r\nexport const CPFContent = styled.span`\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: #7D7D7D;\r\n display: flex;\r\n align-items: center;\r\n display: flex;\r\n`\r\n\r\nexport const ToggleItemAction = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n\r\n > .MuiSwitch-root + span {\r\n margin-top: 1rem;\r\n }\r\n\r\n svg {\r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n\r\n`\r\n\r\nexport const CPFLabel = styled.span`\r\n font-weight: bold;\r\n font-size: .75rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n`\r\n\r\nexport const BrandImage = styled.img`\r\n width: 2rem;\r\n margin-right: 1rem;\r\n`\r\n\r\nexport const SelectedItemContentScheduling = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n`\r\n","\r\nimport React from 'react'\r\nimport { maskCpf } from '../../../../domain/helpers'\r\nimport history from '../../../../history'\r\n\r\nimport { getCardBrandImageById } from '../../../../infra/utils'\r\n\r\nimport { ReactComponent as LocationIcon } from '../../../assets/icons/icon_checkout_address.svg'\r\nimport { ReactComponent as EditIcon } from '../../../assets/icons/icon_edit_fill.svg'\r\n\r\nimport { SelectedItem } from './SelectedItem'\r\n\r\nimport {\r\n Wrapper,\r\n SelectedItemContent,\r\n PaymentMethodContent,\r\n CPFContent,\r\n DeliveryContent,\r\n ItemLabel,\r\n SelectedItemAction,\r\n EditButton,\r\n BrandImage,\r\n SelectedItemContentText\r\n} from './styles'\r\n\r\nexport function SelectedItems(props) {\r\n const {\r\n userCard,\r\n address,\r\n cpf,\r\n modalityId,\r\n storeAddress,\r\n scheduling, \r\n\t\tabove,\r\n\t\tchangeSelectedPaymentMethod,\r\n changeSelectedDeliveryDate,\r\n selectedDeliveryDate, \r\n } = props\r\n\r\n const selectAddressDelivery = address.main || address.backup\r\n\r\n const displayAddress = modalityId === 4 ?\r\n (selectAddressDelivery && selectAddressDelivery.length > 30 ?\r\n (selectAddressDelivery.slice(0, -17) + '...') : selectAddressDelivery) + (address.number ? `, ` + address.number : '')\r\n : storeAddress.slice(0, -9) + '...'\r\n\r\n const fullDisplayAddress = modalityId === 4 ?\r\n selectAddressDelivery + (address.number ? `, ` + address.number : '') :\r\n storeAddress\r\n\r\n const getFormatedDate = () => {\r\n const date = new Date(selectedDeliveryDate.date)\r\n const week = date.toLocaleDateString('pt-BR', { weekday: 'long' }).split('-')[0]\r\n const month = date.toLocaleDateString('pt-BR', { month: 'long' })\r\n const day = date.toLocaleDateString('pt-BR', { day: 'numeric' })\r\n const year = date.toLocaleDateString('pt-BR', { year: 'numeric' })\r\n return `${week}, ${day} de ${month} de ${year}, ${selectedDeliveryDate.hour.time}`\r\n }\r\n\r\n return \r\n {scheduling && (modalityId === 4 || modalityId === 2) && \r\n \r\n Data da entrega \r\n \r\n changeSelectedDeliveryDate()} style={{\r\n cursor: 'pointer'\r\n }}>\r\n {selectedDeliveryDate ? getFormatedDate() : 'Selecionar data e horário'} \r\n \r\n \r\n \r\n \r\n {\r\n changeSelectedDeliveryDate()\r\n }}>\r\n \r\n \r\n }\r\n\r\n\r\n \r\n \r\n {modalityId === 4 ? 'Local de entrega' : 'Local de retirada'} \r\n \r\n \r\n \r\n \r\n {above && \r\n \r\n Forma de pagamento \r\n \r\n \r\n \r\n \r\n {\r\n\t\t\t\t\tchangeSelectedPaymentMethod()\r\n }}>\r\n \r\n \r\n }\r\n \r\n \r\n CPF na nota \r\n {cpf ? \r\n {maskCpf(cpf)}\r\n : \r\n 000.000.000-00\r\n }\r\n \r\n \r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 0 1.5rem 1.5rem;\r\n border-bottom: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'};\r\n\r\n @media (min-width: 50rem) {\r\n padding: 0;\r\n border-bottom: 0 none;\r\n }\r\n`\r\n\r\nexport const CouponTitle = styled.h3`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n min-width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const CouponForm = styled.form`\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n\r\n button {\r\n width: auto;\r\n height: 3rem;\r\n cursor: pointer;\r\n }\r\n`\r\n\r\nexport const CouponInputContainer = styled.div`\r\n position: relative;\r\n flex: 0 1 70%;\r\n display: flex;\r\n align-items: center;\r\n margin: 0 1rem 0 0;\r\n\r\n input {\r\n flex: 1;\r\n padding: .5rem .5rem .5rem 2.75rem;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#EEE' };\r\n border: 0.15rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC' };\r\n min-height: 3rem;\r\n max-height: 3rem;\r\n box-sizing: border-box;\r\n }\r\n\r\n svg {\r\n position: absolute;\r\n left: .5rem;\r\n width: 1.75rem;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' };\r\n stroke: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' };\r\n }\r\n }\r\n`\r\n\r\nexport const ShowCouponsLink = styled.a`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n flex: 1;\r\n text-decoration: underline;\r\n text-underline-offset: 2px;\r\n text-decoration-thickness: 1.5px;\r\n cursor: pointer;\r\n min-width: 100%;\r\n text-align: center;\r\n`\r\n\r\nexport const Notification = styled.div`\r\n border-radius: 1rem;\r\n padding: 1rem;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFifthColor) || '#EEE' };\r\n border: 0.15rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC' };\r\n min-height: 3rem;\r\n max-height: 3rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333' };\r\n margin-bottom: 1rem;\r\n\r\n > img {\r\n width: 1rem;\r\n height: auto;\r\n min-width: 1rem;\r\n max-width: 1rem;\r\n min-height: auto;\r\n max-height: unset;\r\n margin-left: 1rem;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n`\r\n\r\nexport const Message = styled.div`\r\n padding: .5rem .85rem;\r\n margin: 0 0 1.5rem 0; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n max-height: 7rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1rem;\r\n\r\n span {\r\n max-width: 100%;\r\n position: relative;\r\n max-height: calc(1rem * 3);\r\n overflow: hidden;\r\n padding-right: .5rem;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n &.success{\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #31bf6e;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n }\r\n\r\n &.error{\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n }\r\n`\r\nexport const Div = styled.div`\r\n width: 100%;\r\n`\r\n","import React from 'react'\r\n\r\nimport { ReactComponent as CouponIcon } from '../../../assets/icons/icon_coupon.svg'\r\nimport { ReactComponent as IconCheck } from '../../../assets/icons/icon_check.svg'\r\nimport { ReactComponent as IconClose } from '../../../assets/icons/icon_close.svg'\r\n\r\nimport {\r\n\tButton,\r\n\tInputRounded,\r\n} from '../../../components'\r\n\r\nimport {\r\n\tWrapper,\r\n\tCouponForm,\r\n\tCouponTitle,\r\n\tCouponInputContainer,\r\n\tShowCouponsLink,\r\n\tMessage,\r\n\tDiv\r\n} from './styles'\r\n\r\nexport function Coupon(props) {\r\n\tconst {\r\n\t\thandleAddCoupon,\r\n\t\thandleRemoveCoupon,\r\n\t\thandleViewCoupons,\r\n\t\tcouponField,\r\n\t\tsetCoupon,\r\n\t\tcartCoupon,\r\n\t\terror,\r\n\t\tsuccess\r\n\t} = props\r\n\r\n\treturn \r\n\t\t{!cartCoupon && !cartCoupon.value && Adicionar cupom de desconto? }\r\n\r\n\t\t{cartCoupon && cartCoupon.value ? <>\r\n\t\t\tCupom de desconto aplicado \r\n\t\t : <>}\r\n\r\n\t\t { event.preventDefault() }}>\r\n\t\t\t\r\n\t\t\t\t{cartCoupon.value ? {\r\n\t\t\t\t\t\tsetCoupon(event.target.value)\r\n\t\t\t\t\t}} />}\r\n\r\n\t\t\t\t \r\n\t\t\t{cartCoupon.value ? :\r\n\t\t\t\t}\r\n\t\t \r\n\t\t {\r\n\t\t\thandleViewCoupons()\r\n\t\t}}>Ver meus cupons \r\n\t \r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const LoadingContainer = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tpadding: 5rem;\r\n`\r\n\r\nexport const Dialog = styled.div`\r\n\tpadding: 1rem;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: 1fr;\r\n grid-template-rows: auto 1fr;\r\n\trow-gap: 1.25rem;\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n max-height: 50rem;\r\n\r\n\t@media (min-width: 768px) {\r\n\t\tpadding: 1.5rem;\r\n\t}\r\n`\r\n\r\nDialog.Header = styled.div`\r\n text-align: start;\r\n`\r\nDialog.Content = styled.div`\r\n overflow: auto;\r\n\tpadding: 0 1.5rem;\r\n margin: 0 -1.5rem;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\trow-gap: 1.25rem;\r\n`\r\n\r\nDialog.CloseButton = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n\tposition: absolute;\r\n\ttop: 0.75rem;\r\n right: 0.75rem;\r\n\tcursor: pointer;\r\n\r\n\t.custom-icon svg {\r\n\t\theight: 1.25rem;\r\n width: 1.25rem;\r\n opacity: .6;\r\n\r\n\t\tpath {\r\n\t\t\tfill: #000000;\r\n\t\t}\r\n\t}\r\n`\r\n\r\nDialog.Title = styled.span`\r\n\ttext-align: center;\r\n\tfont-size: 1.125rem;\r\n\tfont-weight: 700;\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n`\r\n\r\nexport const PaymentMethodSection = styled.div``\r\n\r\nPaymentMethodSection.Title = styled.span`\r\n color: #949494;\r\n margin: 0 0 0.5rem 0;\r\n display: block;\r\n font-weight: 600;\r\n font-size: .85rem;\r\n\topacity: .8;\r\n`\r\n\r\nexport const PaymentMethods = styled.ul`\r\n\tdisplay: flex;\r\n flex-direction: column;\r\n row-gap: 1rem;\r\n box-sizing: border-box;\r\n list-style: none;\r\n\tpadding: 0;\r\n margin: 0;\r\n`\r\n\r\nexport const PaymentMethod = styled.li`\r\n border: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n\tborder-radius: 8px;\r\n padding: 0.5rem;\r\n\tdisplay: flex;\r\n align-items: center;\r\n column-gap: 1rem;\r\n\tcursor: pointer;\r\n\theight: 2.5rem;\r\n\tposition: relative;\r\n\r\n\t&:hover {\r\n background-color: #0000000d;\r\n\t}\r\n`\r\n\r\nPaymentMethod.BrandImage = styled.img`\r\n\r\n`\r\n\r\nPaymentMethod.Icon = styled.div`\r\n\tposition: absolute;\r\n\tright: 1rem;\r\n\ttop: 50%;\r\n\ttransform: translateY(-50%);\r\n\topacity: .6;\r\n`\r\n\r\nPaymentMethod.Identification = styled.span`\r\n font-size: 1rem;\r\n color: #7D7D7D;\r\n`\r\n","import React, { useEffect, useState } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport {\r\n\tfetchCards as fetchCardsAction,\r\n\tsetUserCard as setUserCardAction,\r\n\tsetThing as setChangeAction,\r\n} from '../../../../redux/actions/main';\r\nimport { pipe, GetContent } from '../../../../domain/helpers';\r\n\r\nimport { getCardBrandImageById } from '../../../../infra/utils';\r\nimport { ReactComponent as IconArrowRight } from '../../../assets/icons/icon_arrow_right.svg';\r\nimport {\r\n\tCustomIcon,\r\n\tCustomLoading,\r\n\tCustomModalNotification,\r\n} from '../../../components';\r\n\r\nimport {\r\n\tDialog,\r\n\tPaymentMethods,\r\n\tPaymentMethod,\r\n\tLoadingContainer,\r\n\tPaymentMethodSection,\r\n} from './styles';\r\n\r\nconst Context = React.createContext({});\r\n\r\nfunction PaymentMethodSelectionComponent(props) {\r\n\tconst {\r\n\t\tsetUserCard,\r\n\t\tfetchCards,\r\n\t\tuserCards,\r\n\t\tloading,\r\n\t\tclose,\r\n\t\tcard,\r\n\t\tsetChange,\r\n\t} = props;\r\n\tconst [changeOpened, setchangeOpened] = useState(false);\r\n\tconst [changeValue, setChangeValue] = useState('');\r\n\r\n\tconst isLoading = loading && loading.includes('cards');\r\n\tlet { availableOnlineCards = [], availableOfflineCards = [] } = userCards;\r\n\r\n\tuseEffect(() => {\r\n\t\tasync function getCards() {\r\n\t\t\tawait fetchCards();\r\n\t\t}\r\n\r\n\t\tgetCards();\r\n\t}, [fetchCards]);\r\n\r\n\tfunction handleSelectCard(selectCard, isOfflinePayment = false) {\r\n\t\tsetUserCard({\r\n\t\t\t...card,\r\n\t\t\t...selectCard,\r\n\t\t\tisOfflinePayment,\r\n\t\t});\r\n\r\n\t\tif (String(selectCard.brand).toUpperCase() === 'DINHEIRO') {\r\n\t\t\tsetchangeOpened(true);\r\n\t\t} else {\r\n\t\t\tclose();\r\n\t\t}\r\n\t}\r\n\r\n\tfunction handleCloseChangeDialog() {\r\n\t\tclose();\r\n\t}\r\n\r\n\tconst handleChangeSelected = () => {\r\n\t\tsetChange(changeValue);\r\n\t\tclose();\r\n\t};\r\n\r\n\tif (isLoading) {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t \r\n\t\t);\r\n\t}\r\n\r\n\tif (changeOpened) {\r\n\t\treturn (\r\n\t\t\t handleChangeSelected(),\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tlabel: 'Não Preciso de Troco!',\r\n\t\t\t\t\t\tclasses: 'secondary',\r\n\t\t\t\t\t\thandleClick: () => {\r\n\t\t\t\t\t\t\tsetChangeValue('')\r\n\t\t\t\t\t\t\tclose()\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t},\r\n\t\t\t\t]}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t);\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tuserCards: state.main.userCards || [],\r\n\t\tloading: state.loading.loading || [],\r\n\t\tcard: state.main.card || [],\r\n\t};\r\n};\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tfetchCards: fetchCardsAction,\r\n\tsetUserCard: setUserCardAction,\r\n\tsetChange: setChangeAction,\r\n});\r\n\r\nexport const PaymentMethodSelection = React.memo(\r\n\tpipe(\r\n\t\tGetConnection,\r\n\t\tGetContent({ context: Context, id: 'cards' })\r\n\t)(PaymentMethodSelectionComponent)\r\n);\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n grid-area: summary;\r\n width: 100%;\r\n box-sizing: border-box;\r\n padding: 0;\r\n\r\n @media (min-width: 50rem) {\r\n padding: 0 0 2rem 2rem;\r\n\r\n > h3 {\r\n display: none;\r\n }\r\n }\r\n\r\n #cart-content {\r\n #notification {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n color: #6B6B6B;\r\n margin: 2rem 0 1rem 0;\r\n padding: 0 1.25rem;\r\n max-width: 12rem;\r\n text-transform: uppercase;\r\n\r\n @media (min-width: 50rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.25rem;\r\n display: flex;\r\n }\r\n`\r\n\r\nexport const OrderSummaryStore = styled.div`\r\n align-items: center;\r\n border-bottom: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'};\r\n padding: 0 0 1rem 0;\r\n margin: 0 0 1rem 0;\r\n display: none;\r\n\r\n @media (min-width: 50rem) {\r\n display: flex;\r\n }\r\n`\r\n\r\nexport const StoreContainer = styled.label`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1 1 70%;\r\n`\r\n\r\nexport const StoreLabel = styled.label`\r\n font-weight: 600;\r\n font-size: .875rem;\r\n line-height: 1.188rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n`\r\n\r\nexport const StoreName = styled.h3`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' }; \r\n margin: 0;\r\n`\r\n\r\nexport const StoreLogo = styled.img`\r\n flex: 0 1 30%;\r\n max-width: 4rem;\r\n`\r\nexport const BrandImage = styled.img`\r\n width: 2rem;\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Cart } from '../../cart'\r\n\r\nimport {\r\n Wrapper,\r\n OrderSummaryStore,\r\n StoreContainer,\r\n StoreLabel,\r\n StoreLogo,\r\n StoreName,\r\n H3\r\n} from './styles'\r\n\r\nexport function Summary(props) {\r\n const {\r\n storeName,\r\n pathName,\r\n storeImg,\r\n\t\tabove,\r\n\t\tsetAbove\r\n } = props\r\n\r\n return (\r\n \r\n \r\n \r\n Seu pedido em: \r\n {storeName} \r\n \r\n \r\n\r\n \r\n )\r\n}\r\n\r\nSummary.propTypes = {\r\n\tstoreName: PropTypes.string,\r\n\tpathName: PropTypes.string,\r\n\tstoreImg: PropTypes.string\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n flex: 1;\r\n box-sizing: border-box;\r\n width: 100%;\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\r\n #cart-content {\r\n footer {\r\n padding: 0;\r\n display: none;\r\n }\r\n }\r\n\r\n #cart-list {\r\n padding: 0;\r\n min-height: 19rem;\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n #cart-content {\r\n footer {\r\n display: flex;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const Main = styled.div`\r\n grid-area: main;\r\n display: flex;\r\n flex-direction: column-reverse;\r\n width: 100%;\r\n justify-self: center;\r\n margin: 0;\r\n\r\n @media (min-width: 50rem) {\r\n max-width: 50rem;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n grid-template-areas: 'details summary';\r\n margin: 6rem 0 0;\r\n padding-top: 1rem;\r\n }\r\n`\r\n","import React, {\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\nimport { connect } from 'react-redux'\r\nimport {\r\n\tDialog,\r\n\tSlide\r\n} from '@material-ui/core'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport {\r\n\tuseStoreSettings\r\n} from '../hooks'\r\n\r\nimport {\r\n\tcart,\r\n\tcoupon,\r\n\torder\r\n} from '../../state'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent,\r\n\tcalculateCartTotal\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tsetCart,\r\n\tsetUserHistory,\r\n\tsetNotification,\r\n\tsetCVV,\r\n\tsetSelectedDeliveryDate,\r\n\thandleGTM,\r\n\thandlePixel\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tCouponsList\r\n} from '../coupons/simple'\r\n\r\nimport {\r\n\tMainHeader\r\n} from '../main-header'\r\n\r\nimport { DeliveryDateSelecion } from './Details/DeliveryDateSelecion'\r\n\r\nimport {\r\n\tWrapper,\r\n\tMain,\r\n} from './styles'\r\n\r\nimport {\r\n\tDetails,\r\n\tSummary\r\n} from './'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n\t\t\r\n\t\t\t{`${title} - Confirmação de pedido`} \r\n\t\t\t\r\n\t\t\t\r\n\t\t \r\n\r\n\t\t\r\n\t\t\t\r\n\r\n\t\t\t handleCloseDialogCoupons()}\r\n\t\t\t\taria-labelledby=\"coupons-list-dialog\"\r\n\t\t\t\topen={visibleCoupons}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tclassName=\"my-coupons\"\r\n\t\t\t\tfullWidth={true}\r\n\t\t\t>\r\n\t\t\t\t setDeliveryDateSelectionOpened(false)}\r\n\t\t\t\taria-labelledby='delivery-date-selection'\r\n\t\t\t\topen={deliveryDateSelectionOpened}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tPaperProps={{\r\n\t\t\t\t\tstyle: {\r\n\t\t\t\t\t\twidth: '25rem',\r\n\t\t\t\t\t\tborderRadius: '.75rem'\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n\t\t\t\tfullWidth={false}\r\n\t\t\t>\r\n\t\t\t\t setDeliveryDateSelectionOpened(false)} />\r\n\t\t\t\r\n\r\n\t\t \r\n\t \r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tstoreName: state.store.store && state.store.store.name,\r\n\t\tstoreStatus: state.store.store && state.store.store.status,\r\n\t\tcoupon: state.main.coupon || '',\r\n\t\tcouponField: state.main.couponField || '',\r\n\t\tcartCoupon: (state.main.cart && state.main.cart.coupon) || '',\r\n\t\tcpf: state.user.cpf || '',\r\n\t\tuserCard: state.main.userCard || '',\r\n\t\taddress: state.address.address || '',\r\n\t\tloading: state.loading.loading || '',\r\n\t\tproducts: (state.main.cart && state.main.cart.products) || [],\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t\tstoreImg: (state.store.store && state.store.store.logo) || '',\r\n\t\tstoreAddress: state.store.store && state.store.store.address,\r\n\t\tscheduling: state.store.store && state.store.store.scheduling,\r\n\t\tselectedDeliveryDate: state.main.selectedDeliveryDate,\r\n\t\tdeliveryFee: state.store.store && state.store.store.deliveryFee,\r\n\t\tURLParameters: (state.main.URLParameters) || ''\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\taddCoupon: coupon.addCoupon,\r\n\tsetCoupon: coupon.setSelectedCoupon,\r\n\tpostOrder: order.addOrder,\r\n\tsetCartCoupon: cart.setCartCoupon,\r\n\tsetCart,\r\n\tsetUserHistory,\r\n\tsetNotification,\r\n\tsetCVV,\r\n\tsetSelectedDeliveryDate,\r\n\thandleGTM,\r\n\thandlePixel\r\n})\r\n\r\nexport const OrderConfirmation = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'order-confirmation' })\r\n)(OrderConfirmationComponent))\r\n","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconCalendar = function SvgIconCalendar(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 16.499,\n height: 16.5,\n viewBox: \"0 0 16.499 16.5\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6393\",\n \"data-name\": \"Caminho 6393\",\n d: \"M14.067,16H1.931a.154.154,0,0,0-.041-.023A2.136,2.136,0,0,1,0,13.755Q0,8.591,0,3.427a2.548,2.548,0,0,1,.034-.482,2.171,2.171,0,0,1,2.2-1.759h.841c0-.191,0-.367,0-.542A.612.612,0,0,1,3.694,0,.6.6,0,0,1,4.3.649c0,.175,0,.35,0,.525h7.389c0-.063,0-.114,0-.166,0-.135,0-.271,0-.406a.6.6,0,0,1,.593-.6.606.606,0,0,1,.634.581c.01.2,0,.393,0,.605.315,0,.611,0,.907,0A2.18,2.18,0,0,1,16,3.38Q16,6.591,16,9.8c0,1.339,0,2.677,0,4.016a2.136,2.136,0,0,1-1.62,2.107c-.1.027-.207.051-.31.076m.7-9.768H1.237c0,.046-.008.082-.008.118q0,3.741,0,7.482a.953.953,0,0,0,1.036.981H13.732a1.278,1.278,0,0,0,.242-.017.954.954,0,0,0,.795-1.012q0-3.686,0-7.373ZM1.229,5.023H14.753c0-.625.024-1.239-.009-1.851a.792.792,0,0,0-.673-.751,8.025,8.025,0,0,0-1.147-.065c0,.21,0,.382,0,.553a.616.616,0,1,1-1.23,0c0-.175,0-.35,0-.523H4.3a4.153,4.153,0,0,1-.007.587.8.8,0,0,1-.165.392.569.569,0,0,1-.648.157.594.594,0,0,1-.409-.565c-.006-.19,0-.381,0-.582H2.259a.955.955,0,0,0-1.029.988c0,.333,0,.666,0,1v.663\",\n transform: \"translate(0.25 0.25)\",\n fill: \"#4b4b4b\",\n stroke: \"#4b4b4b\",\n strokeWidth: 0.5\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconCalendar, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_calendar.9bc94510.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n flex: 1;\r\n min-width: 100%;\r\n max-width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 1rem;\r\n min-height: 5rem;\r\n max-height: 5rem;\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' } .125rem solid;\r\n border-radius: .938rem;\r\n flex-wrap: nowrap;\r\n overflow: hidden;\r\n\r\n @media(min-width:60rem){\r\n margin: 0;\r\n min-width: calc(50% - .5rem);\r\n max-width: calc(50% - .5rem);\r\n }\r\n\r\n &.ready {\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textGreenColor) || '#000' } .125rem solid;\r\n }\r\n\r\n > div {\r\n flex: 1;\r\n\r\n &.first {\r\n min-width: 3.125rem;\r\n max-width: 3.125rem;\r\n margin-right: .313rem;\r\n max-height: 3.125rem;\r\n min-height: 3.125rem;\r\n\r\n > img {\r\n width: 3.125rem;\r\n height: auto;\r\n max-height: 3.125rem;\r\n }\r\n }\r\n\r\n &.second {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: center;\r\n flex-direction: column;\r\n max-height: 3.125rem;\r\n min-height: 3.125rem;\r\n\r\n > p {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey02) || '#000' };\r\n margin-bottom: .188rem;\r\n font-size: .75rem;\r\n font-weight: bold;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n\r\n > span {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textGreenColor) || '#000' };\r\n }\r\n\r\n svg{\r\n width: .8rem;\r\n margin: 0 6px 0 0;\r\n padding: 4px 0 0 0;\r\n\r\n path{\r\n stroke: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey02) || '#000' };\r\n }\r\n }\r\n }\r\n\r\n > div {\r\n &.steps {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 100%;\r\n max-width: 100%;\r\n margin-top: .188rem;\r\n\r\n > div {\r\n flex: 1;\r\n margin-right: .125rem;\r\n min-height: .188rem;\r\n max-height: .188rem;\r\n border-radius: 1.5px;\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#000' };\r\n\r\n &.active {\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.third {\r\n min-width: 1.25rem;\r\n max-width: 1.25rem;\r\n text-align: right;\r\n\r\n > button {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n background: none;\r\n }\r\n }\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n CustomIcon,\r\n Div,\r\n DefaultParagraph as Paragraph,\r\n Span,\r\n Button,\r\n DefaultImage as Image\r\n} from '../../components'\r\n\r\nimport { ReactComponent as IconCalendar } from '../../assets/icon_calendar.svg'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nconst getStatusLabel = (status = '') => {\r\n return status\r\n}\r\n\r\nconst Steps = (props) => {\r\n const {\r\n total,\r\n current\r\n } = props\r\n\r\n return total ? \r\n \r\n}\r\n\r\nSteps.propTypes = {\r\n\ttotal: PropTypes.number,\r\n\tcurrent: PropTypes.number\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: center;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n flex: none;\r\n overflow: hidden;\r\n padding: 0 1rem;\r\n\r\n @media (min-width: 60rem) {\r\n min-width: calc(100% - 2rem);\r\n max-width: calc(100% - 2rem);\r\n padding-right: 0;\r\n\t\tpadding: 0 0 0 2rem;\r\n }\r\n`\r\n\r\nexport const ItemsWrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n flex: none;\r\n flex-wrap: nowrap;\r\n overflow: hidden;\r\n overflow-x: scroll;\r\n max-height: 7rem;\r\n min-height: 7rem;\r\n\tpadding: 0 0 1rem 0;\r\n\tgap: 1rem;\r\n\r\n @media(min-width: 60rem){\r\n overflow-x: scroll;\r\n ::-webkit-scrollbar {\r\n\t\t height: 4px;\r\n\t }\r\n\t \r\n\t ::-webkit-scrollbar-track {\r\n -webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC'}; \r\n border-radius: 10px;\r\n\t }\r\n\t \r\n\t ::-webkit-scrollbar-thumb {\r\n border-radius: 10px;\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#000'}; \r\n -webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#CCC'}; \r\n\t }\r\n }\r\n\r\n @media(max-width: 60rem){\r\n ::-webkit-scrollbar {\r\n display:none;\r\n }\r\n }\r\n \r\n`\r\n\r\nexport const ItemWrapper = styled.div`\r\n flex: 1;\r\n min-width: 100%;\r\n max-width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n padding: 1rem;\r\n min-height: 5rem;\r\n max-height: 5rem;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'} .125rem solid;\r\n border-radius: .938rem;\r\n flex-wrap: nowrap;\r\n overflow: hidden;\r\n\r\n &.ready {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textGreenColor) || '#000'} .125rem solid;\r\n }\r\n\r\n > div {\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n &.first {\r\n min-width: 3.125rem;\r\n max-width: 3.125rem;\r\n max-height: 3.125rem;\r\n min-height: 3.125rem;\r\n\r\n > img {\r\n width: 3.125rem;\r\n height: auto;\r\n max-height: 3.125rem;\r\n }\r\n }\r\n\r\n &.second {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n flex-direction: column;\r\n\r\n > p {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n margin-bottom: .188rem;\r\n font-size: .75rem;\r\n font-weight: bold;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n\r\n > span {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textGreenColor) || '#000'};\r\n }\r\n }\r\n\r\n > div {\r\n &.steps {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n min-width: 100%;\r\n max-width: 100%;\r\n margin-top: .188rem;\r\n\r\n > div {\r\n flex: 1;\r\n margin-right: .125rem;\r\n min-height: .188rem;\r\n max-height: .188rem;\r\n border-radius: 1.5px;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#000'};\r\n\r\n &.active {\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n }\r\n\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.third {\r\n min-width: 1.25rem;\r\n max-width: 1.25rem;\r\n text-align: right;\r\n\r\n > button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n padding: 1rem;\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n margin: 0;\r\n padding: 0;\r\n text-transform: uppercase;\r\n min-width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey00) || '#EEE'} .1rem solid;\r\n padding-bottom: 1.25rem;\r\n margin-top: 2rem;\r\n margin-bottom: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n font-size: 1.125rem;\r\n`\r\n","import React, {\r\n useCallback,\r\n useEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n order,\r\n modality\r\n} from '../../state'\r\n\r\nimport {\r\n pipe\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n useInterval\r\n} from '../hooks'\r\n\r\nimport {\r\n setUserHistory\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n Wrapper,\r\n ItemsWrapper,\r\n H2\r\n} from './styles'\r\n\r\nimport {\r\n Order\r\n} from '.'\r\n\r\nfunction itemsMap({\r\n handleOrder,\r\n scheduling\r\n}) {\r\n return (mappedItem, index) => {\r\n const key = `order-tracking-item-${ index }-${ new Date().getTime() }`\r\n\r\n return \r\n }\r\n}\r\n\r\nconst Items = (props) => {\r\n const {\r\n handleOrder,\r\n orders,\r\n scheduling\r\n } = props\r\n\r\n return \r\n { orders && orders.orders && orders.orders.map(itemsMap({\r\n handleOrder,\r\n scheduling\r\n })) }\r\n \r\n}\r\n\r\nfunction OrderTrackingComponent(props) {\r\n const {\r\n fetchOrders,\r\n setOrder,\r\n setUserHistory,\r\n setModality,\r\n orders,\r\n scheduling,\r\n URLParameters\r\n } = props\r\n\r\n const getOrders = useCallback(async () => {\r\n await fetchOrders()\r\n }, [\r\n fetchOrders\r\n ])\r\n\r\n useInterval(() => {\r\n if (orders.retry) {\r\n getOrders()\r\n }\r\n }, 5000)\r\n\r\n useEffect(() => {\r\n fetchOrders()\r\n\r\n return () => {}\r\n }, [\r\n fetchOrders\r\n ])\r\n\r\n function handleOrder({\r\n id,\r\n modalityId\r\n }) {\r\n setOrder({\r\n id\r\n })\r\n setUserHistory({\r\n back: 'store',\r\n next: 'store'\r\n })\r\n setModality({\r\n id: modalityId\r\n })\r\n\r\n history.push(`/receipt${URLParameters}`)\r\n }\r\n\r\n return orders && orders.orders && orders.orders.length ? \r\n \r\n : null\r\n}\r\n\r\nOrderTrackingComponent.propTypes = {\r\n orders: PropTypes.shape({}),\r\n fetchOrders: PropTypes.func,\r\n setOrder: PropTypes.func,\r\n setOrders: PropTypes.func,\r\n setUserHistory: PropTypes.func,\r\n setModality: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n orders: state.main.orders || [],\r\n scheduling: state.store.store && state.store.store.scheduling,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchOrders: order.fetchOrders,\r\n setOrders: order.setOrders,\r\n setOrder: order.setOrder,\r\n\r\n setUserHistory,\r\n setModality: modality.setModality\r\n})\r\n\r\nexport const OrderTracking = React.memo(pipe(\r\n GetConnection\r\n)(OrderTrackingComponent))\r\n","import styled, { css } from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n padding: 2rem 1.5rem;\r\n`\r\n\r\nconst message = css`\r\n padding: .5rem .85rem;\r\n margin: 0 0 1.5rem 0; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n max-height: 7rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1rem;\r\n\r\n span {\r\n max-width: 85%;\r\n position: relative;\r\n max-height: calc(1rem * 3);\r\n overflow: hidden;\r\n padding-right: 1rem;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n`\r\n\r\nexport const ErrorMessage = styled.div`\r\n ${message}; \r\n\r\n svg {\r\n background-color: #fd5b5d;\r\n }\r\n`\r\n\r\nexport const SuccessMessage = styled.div`\r\n ${message}; \r\n \r\n svg {\r\n background-color: #3abe71;\r\n }\r\n`\r\n\r\nexport const Form = styled.form`\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n`\r\n\r\nexport const Title = styled.h1`\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n text-align: start;\r\n flex: 1 0 100%;\r\n margin: 0 0 1.5rem 0;\r\n`\r\n\r\nexport const FormField = styled.div`\r\n flex: 0 0 100%;\r\n`\r\n\r\nexport const ActionsWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1 0 100%;\r\n margin: 2rem 0 0 0;\r\n\r\n button {\r\n flex: 0 0 calc(50% - .5rem);\r\n height: 3rem;\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general \r\n && props.theme.main.general.primaryColor) || '#000' }; \r\n cursor: pointer;\r\n\r\n &:hover {\r\n opacity: .9;\r\n } \r\n\r\n &:disabled {\r\n opacity: .5;\r\n cursor: default;\r\n }\r\n\r\n &:first-of-type {\r\n margin: 0 1rem 0 0;\r\n background-color: transparent;\r\n border: 2px solid ${ props => (props.theme && props.theme.main && props.theme.main.general \r\n && props.theme.main.general.primaryColor) || '#000' };\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general \r\n && props.theme.main.general.primaryColor) || '#000' }; \r\n\r\n &:hover {\r\n background-color: #f7f7f7;\r\n } \r\n }\r\n }\r\n`\r\n","import React from 'react'\r\nimport { useState } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nimport { pipe, GetContent } from '../../../domain/helpers'\r\n\r\nimport { ReactComponent as IconClose } from '../../assets/icons/icon_close.svg'\r\nimport { ReactComponent as IconCheck } from '../../assets/icons/icon_check.svg'\r\n\r\nimport { InputRounded, Button } from '../../components'\r\n\r\nimport {\r\n\tsetNotification,\r\n\tpostSendNewPassword\r\n} from '../../../redux/actions/main'\r\n\r\nimport {\r\n\tWrapper,\r\n\tErrorMessage,\r\n\tSuccessMessage,\r\n\tForm,\r\n\tTitle,\r\n\tActionsWrapper,\r\n\tFormField\r\n} from './styles'\r\n\r\nexport const useForgotPasswordDialogStyles = makeStyles((theme) => ({\r\n\tscrollPaper: {\r\n\t\t[theme.breakpoints.down(460)]: {\r\n\t\t\talignItems: 'flex-end',\r\n\t\t}\r\n\t},\r\n\tpaper: {\r\n\t\tborderRadius: '.75rem',\r\n\t\t[theme.breakpoints.down(460)]: {\r\n\t\t\tborderRadius: '.75rem .75rem 0 0',\r\n\t\t\tmargin: 0,\r\n\t\t\twidth: '100%',\r\n\t\t\tmaxWidth: 'none',\r\n\t\t}\r\n\t}\r\n}))\r\nconst Context = React.createContext({})\r\n\r\nfunction ForgotPasswordPage(props) {\r\n\tconst {\r\n\t\tpostSendNewPassword,\r\n\t\tbackStep\r\n\t} = props\r\n\r\n\tconst [email, setEmail] = useState(null)\r\n\tconst [pending, setPending] = useState(false)\r\n\tconst [success, setSuccess] = useState(false)\r\n\tconst [isValid, setIsValid] = useState(false)\r\n\tconst [errorMessage, setErrorMessage] = useState(null)\r\n\r\n\tconst handleSubmit = async () => {\r\n\t\tsetPending(true)\r\n\t\tconst result = await postSendNewPassword(email)\r\n\r\n\t\tif (result && result.success) {\r\n\t\t\tsetErrorMessage(null)\r\n\t\t\tsetSuccess(true)\r\n\t\t} else {\r\n\t\t\tsetErrorMessage(result.message)\r\n\t\t}\r\n\r\n\t\tsetPending(false)\r\n\t}\r\n\t\r\n\tconst handleEmailChange = (value) => {\r\n\t\tsetEmail(value)\r\n\t\tvalidateEmail(value)\r\n\t}\r\n\r\n\tconst validateEmail = (email) => {\r\n\t\tconst emailRegex = /\\S+@\\S+\\.\\S+/\r\n\t\tsetIsValid(emailRegex.test(email))\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{ errorMessage && \r\n\t\t\t\t\r\n\t\t\t\t\t{ errorMessage }\r\n\t\t\t\t\t \r\n\t\t\t}\r\n\r\n\t\t\t{ success && \r\n\t\t\t\t\r\n\t\t\t\t\tNova senha enviada para seu e-mail!\r\n\t\t\t\t\t \r\n\t\t\t}\r\n\t\t\t\r\n\t\t \r\n\t)\r\n}\r\n\r\nForgotPasswordPage.propTypes = {\r\n\tpostSendNewPassword: PropTypes.func,\r\n\tbackStep: PropTypes.number\r\n}\r\n\r\nconst mapStateToProps = () => { return {} }\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tpostSendNewPassword,\r\n\tsetNotification\r\n})\r\n\r\nexport const ForgotPassword = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'forgotPassword' })\r\n)(ForgotPasswordPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n height: 7rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n border: .1rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n border-radius: .8rem;\r\n padding: .8rem;\r\n background-color: #fff;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n\r\n ${props => props.selected ? `\r\n border: .1rem solid ${ (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n ` : ''}\r\n\r\n ${props => props.inProgress ? `\r\n border: .1rem solid ${ (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n ` : ''}\r\n\r\n &:hover {\r\n background-color: #f7f7f7;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n border-radius: 1rem;\r\n height: 8rem;\r\n padding: .75rem 1rem;\r\n ${props => props.selected ? `\r\n filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, .25));\r\n border: .2rem solid ${ (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n ` : `\r\n border: .1rem solid ${ (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n `\r\n }\r\n }\r\n\r\n @media (max-width: 60rem) {\r\n ${props => props.selected ? `\r\n filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, .25));\r\n border: .2rem solid ${ (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n ` : `\r\n border: .1rem solid ${ (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n `\r\n }\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n pointer-events: none;\r\n }\r\n\r\n label {\r\n cursor: pointer;\r\n }\r\n`\r\n\r\nexport const CardSide = styled.div`\r\n flex: 0 1 3.5rem;\r\n padding: 0 .8rem 0 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n\r\n svg {\r\n width: inherit;\r\n height: inherit;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n padding: 0 1rem 0 0;\r\n flex: 0 1 6rem;\r\n }\r\n`\r\n\r\nexport const StoreLogoContainer = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0;\r\n border: .063px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n border-radius: 50%;\r\n width: 4.5rem;\r\n height: 4.5rem;\r\n overflow: hidden;\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n width: 5rem;\r\n height: 5rem;\r\n }\r\n`\r\n\r\nexport const CardContent = styled.div`\r\n flex: 1 1 70%;\r\n display: flex;\r\n flex-wrap: wrap;\r\n overflow: hidden;\r\n\r\n @media (min-width: 60rem) {\r\n height: 100%;\r\n }\r\n`\r\n\r\nexport const OrderDate = styled.h3`\r\n margin: 0 0 .5rem 0;\r\n width: 100%;\r\n padding: 0;\r\n font-weight: 700;\r\n font-size: .7rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: .063px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n display: flex;\r\n align-items: flex-end;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n margin: 0 0 .875rem 0;\r\n }\r\n`\r\n\r\nexport const OrderItems = styled.div`\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n margin: 0 0 .3rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0 0 .875rem 0;\r\n }\r\n`\r\n\r\nexport const OrderItemsAmount = styled.div`\r\n border: .1rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-weight: bold;\r\n font-size: .9rem;\r\n height: 1.7rem;\r\n width: 1.7rem;\r\n border-radius: 25%;\r\n margin: 0 .2rem 0 0;\r\n\r\n @media (min-width: 60rem) {\r\n border: .2rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n font-size: .875rem;\r\n height: 1.625rem;\r\n width: 1.625rem;\r\n margin: 0 .5rem 0 0;\r\n }\r\n`\r\n\r\nexport const OrderItemsLabel = styled.label`\r\n font-weight: 600;\r\n font-size: .6rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n span {\r\n font-weight: bold;\r\n font-size: .9rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n padding-left: .5rem;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n font-weight: 600;\r\n font-size: .875rem;\r\n\r\n span {\r\n font-size: 1rem;\r\n padding-left: 1rem;\r\n }\r\n }\r\n`\r\n\r\nexport const OrderItemsAddress = styled.label`\r\n width: 100%;\r\n font-weight: bold;\r\n font-size: .7rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n align-self: flex-end;\r\n margin-top: .5rem;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n }\r\n`\r\n","import React from 'react'\r\n\r\nimport {\r\n DefaultImage as Image\r\n} from '../../components'\r\n\r\nimport {\r\n Wrapper,\r\n CardSide,\r\n StoreLogoContainer,\r\n CardContent,\r\n OrderDate,\r\n OrderItems,\r\n OrderItemsAmount,\r\n OrderItemsLabel,\r\n OrderItemsAddress\r\n} from './styles'\r\n\r\nexport function Order(props) {\r\n const {\r\n address,\r\n date,\r\n id,\r\n modalityId,\r\n qty,\r\n total,\r\n handleClick,\r\n inProgress,\r\n selected,\r\n store\r\n } = props\r\n\r\n return handleClick(id)}>\r\n \r\n \r\n \r\n \r\n \r\n {date} \r\n \r\n {qty} \r\n \r\n {`Ite${qty === 1 ? 'm' : 'ns'}`} por R$ {Number(total).toFixed(2).replace('.', ',')}\r\n \r\n \r\n {modalityId === 4 ?\r\n Entregue em: {address} :\r\n Retirado em: {store && store.address} }\r\n \r\n \r\n}\r\n","import styled from 'styled-components'\r\n\r\nimport { Wrapper as Card } from '../order/styles'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n width: 100%;\r\n height: auto;\r\n padding: 0 1rem;\r\n\r\n @media (min-width: 60rem) {\r\n padding: 0 2rem;\r\n }\r\n\r\n ${Card} {\r\n flex: 1;\r\n margin: 0 0 1.25rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n flex: 0 1 calc(50% - .5rem);\r\n max-width: calc(50% - .5rem);\r\n margin: 0 0 1.25rem 0;\r\n min-width: unset;\r\n\r\n &:nth-child(2n + 1) {\r\n max-width: calc(50% - .775rem);\r\n margin: 0 1.25rem 1.75rem 0;\r\n min-width: unset;\r\n }\r\n }\r\n }\r\n`\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconComprovante = function SvgIconComprovante(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 142.245,\n height: 160,\n viewBox: \"0 0 142.245 160\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9505\",\n \"data-name\": \"Grupo 9505\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5929\",\n \"data-name\": \"Caminho 5929\",\n d: \"M77.464,4H-29.219C-39.039,4-47,11.542-47,20.84V164l24.448-12.631L1.9,164l22.226-12.631L46.361,164,70.81,151.369,95.245,164V20.84C95.245,11.542,87.283,4,77.464,4Zm8.89,145.4-11.46-5.924L70.81,141.36l-4.081,2.111L46.561,153.889,28.514,143.64l-4.392-2.493L19.73,143.64,1.7,153.889l-20.168-10.418-4.081-2.107-4.081,2.107L-38.11,149.4V20.84c0-4.382,3.987-7.951,8.89-7.951H77.464c4.9,0,8.89,3.569,8.89,7.951Z\",\n transform: \"translate(47 -4)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5930\",\n \"data-name\": \"Caminho 5930\",\n d: \"M-37.555,19.89H6.9A4.445,4.445,0,1,0,6.9,11H-37.555A4.444,4.444,0,0,0-42,15.445,4.444,4.444,0,0,0-37.555,19.89Z\",\n transform: \"translate(64.226 20.111)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5931\",\n \"data-name\": \"Caminho 5931\",\n d: \"M51.348,23h-88.9A4.444,4.444,0,0,0-42,27.445a4.444,4.444,0,0,0,4.445,4.445h88.9a4.445,4.445,0,1,0,0-8.89Z\",\n transform: \"translate(64.226 61.444)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5932\",\n \"data-name\": \"Caminho 5932\",\n d: \"M51.348,17h-88.9A4.444,4.444,0,0,0-42,21.445a4.444,4.444,0,0,0,4.445,4.445h88.9a4.445,4.445,0,1,0,0-8.89Z\",\n transform: \"translate(64.226 40.777)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5933\",\n \"data-name\": \"Caminho 5933\",\n d: \"M51.348,29h-88.9A4.441,4.441,0,0,0-42,33.445a4.441,4.441,0,0,0,4.445,4.445h88.9a4.445,4.445,0,1,0,0-8.89Z\",\n transform: \"translate(64.226 82.11)\",\n fill: \"#191750\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconComprovante, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_comprovante.cfff3ccb.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react'\r\n\r\nimport {Order} from '../order'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nexport function Content({\r\n data,\r\n handleOrder,\r\n orderId\r\n}) {\r\n return \r\n { data.map((data, index) => {\r\n const key = `placed-orders-content-list-item-${ index }}`\r\n\r\n const {\r\n amountPaid: total,\r\n deliveryPlace: address,\r\n store,\r\n id,\r\n inProgress,\r\n items,\r\n modalityId,\r\n shortDate: date,\r\n } = data\r\n\r\n const qty = items.length || 0\r\n\r\n return (\r\n \r\n}\r\n","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconPhone = function SvgIconPhone(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 14,\n height: 14,\n viewBox: \"0 0 14 14\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M2.04305 9.53308C2.83045 9.53451 3.61301 9.40992 4.36105 9.16406C4.53674 9.1072 4.72425 9.09731 4.90495 9.13538C5.08565 9.17344 5.25323 9.25819 5.39104 9.3811L6.85305 10.4811C8.42681 9.69855 9.70208 8.42365 10.485 6.8501L9.41405 5.42615C9.27724 5.28975 9.18075 5.11817 9.13523 4.93042C9.0897 4.74267 9.09691 4.54597 9.15605 4.36206C9.40245 3.61241 9.52736 2.82817 9.52605 2.03906C9.52631 1.76252 9.63628 1.49742 9.83183 1.30188C10.0274 1.10634 10.2925 0.996359 10.569 0.996094H12.957C13.2336 0.996359 13.4987 1.10634 13.6943 1.30188C13.8898 1.49742 13.9998 1.76252 14 2.03906C13.9963 5.20912 12.7354 8.2483 10.4938 10.4899C8.25226 12.7314 5.2131 13.9924 2.04305 13.9961C1.76702 13.9964 1.50213 13.8873 1.30629 13.6927C1.11046 13.4982 0.999633 13.2341 0.998047 12.9581V10.5781C0.998047 10.301 1.10814 10.0352 1.30412 9.83923C1.50009 9.64326 1.76589 9.53308 2.04305 9.53308Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconPhone, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_phone.55d36641.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n padding: 1.25rem;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n > div {\r\n flex: 1;\r\n\r\n &.header {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 12.5rem;\r\n flex: 0;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\r\n svg {\r\n opacity: .2;\r\n\r\n g {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n g {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n path {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n &.content {\r\n text-align: center;\r\n margin: 0 0 2rem 0;\r\n\r\n > h2 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: .6rem 0;\r\n\r\n @media (max-width: 60rem) {\r\n font-size: 1.2rem;\r\n margin: 0 1rem;\r\n }\r\n }\r\n\r\n > p {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n font-size: 1rem;\r\n\r\n @media (max-width: 60rem) {\r\n font-size: .9rem;\r\n margin: 0 1rem;\r\n }\r\n }\r\n\r\n > button {\r\n max-width: 14rem;\r\n max-height: 2.5rem;\r\n border-radius: 8px;\r\n font-size: .875rem;\r\n padding: .8rem 3rem;\r\n margin: 2rem 0;\r\n\r\n @media(max-width: 60rem){\r\n margin: 2rem 1rem;\r\n padding: 1rem 3rem;\r\n max-height: 3rem;\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n max-width: 90%;\r\n min-width: 90%;\r\n }\r\n }\r\n }\r\n\r\n &.footer {\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 4.375rem;\r\n max-height: 4.375rem;\r\n }\r\n }\r\n`\r\n\r\nexport const PageTitle = styled.h2`\r\n font-weight: 700;\r\n font-size: .8rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: .063rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n padding: 1.5rem 0 .5rem 0;\r\n margin: 0 1rem 1rem;\r\n text-transform: uppercase;\r\n width: 100%;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n padding: 2.25rem 0 .5rem 0;\r\n margin: 0 2rem 2rem;\r\n }\r\n\r\n @media (max-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport history from '../../../history'\r\n\r\nimport { ReactComponent as IconReceipt } from '../../assets/icon_comprovante.svg'\r\n\r\nimport {\r\n Div,\r\n DefaultParagraph as Paragraph,\r\n H2,\r\n Button\r\n} from '../../components'\r\n\r\nimport {\r\n Wrapper,\r\n PageTitle\r\n} from './styles'\r\n\r\nexport function EmptyContent({\r\n URLParameters,\r\n data\r\n}) {\r\n const {\r\n content\r\n } = data\r\n\r\n return \r\n HISTÓRICO DE PEDIDOS \r\n \r\n}\r\n\r\nEmptyContent.propTypes = {\r\n\tURLParameters: PropTypes.string,\r\n data: PropTypes.shape({\r\n\t\tcontent: PropTypes.shape({\r\n\t\t\ttitle: PropTypes.string,\r\n\t\t\ttext: PropTypes.string\r\n\t\t})\r\n\t})\r\n}\r\n","var _path, _path2, _path3, _path4;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconTyping = function SvgIconTyping(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 21,\n viewBox: \"0 0 22 21\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11 11.2422C11.6152 11.2422 12.114 10.7434 12.114 10.1282C12.114 9.51291 11.6152 9.01416 11 9.01416C10.3847 9.01416 9.88599 9.51291 9.88599 10.1282C9.88599 10.7434 10.3847 11.2422 11 11.2422Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M15.0849 11.2422C15.7002 11.2422 16.1989 10.7434 16.1989 10.1282C16.1989 9.51291 15.7002 9.01416 15.0849 9.01416C14.4697 9.01416 13.9709 9.51291 13.9709 10.1282C13.9709 10.7434 14.4697 11.2422 15.0849 11.2422Z\",\n fill: \"#F27C25\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M6.91405 11.2422C7.52929 11.2422 8.02805 10.7434 8.02805 10.1282C8.02805 9.51291 7.52929 9.01416 6.91405 9.01416C6.2988 9.01416 5.80005 9.51291 5.80005 10.1282C5.80005 10.7434 6.2988 11.2422 6.91405 11.2422Z\",\n fill: \"#F27C25\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M11 1C5.477 1 1 5.029 1 10C1.01575 11.293 1.32288 12.5659 1.89856 13.7238C2.47423 14.8817 3.30362 15.8949 4.325 16.688L3 20L8.334 18.666C9.20571 18.8857 10.101 18.9978 11 19C16.523 19 21 14.97 21 10C21 5.03 16.523 1 11 1ZM11 18C10.1825 17.9989 9.36815 17.8981 8.575 17.7L8.333 17.64L8.091 17.701L4.655 18.56L5.255 17.06L5.529 16.376L4.955 15.912C4.05159 15.2104 3.31711 14.315 2.8057 13.2918C2.29428 12.2686 2.01895 11.1437 2 10C2 5.589 6.037 2 11 2C15.963 2 20 5.589 20 10C20 14.411 15.962 18 11 18Z\",\n fill: \"#F27C25\",\n stroke: \"#F27C25\",\n strokeWidth: 0.5\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconTyping, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_typing.6b515f8d.svg\";\nexport { ForwardRef as ReactComponent };","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconClock = function SvgIconClock(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 25,\n height: 25,\n viewBox: \"0 0 29 29\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9286\",\n \"data-name\": \"Grupo 9286\",\n transform: \"translate(-261.5 -329.5)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Elipse_444\",\n \"data-name\": \"Elipse 444\",\n transform: \"translate(264 332)\",\n fill: \"none\",\n stroke: \"#191750\",\n strokeWidth: 2.5\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: 12,\n cy: 12,\n r: 12,\n stroke: \"none\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: 12,\n cy: 12,\n r: 13.25,\n fill: \"none\"\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9267\",\n \"data-name\": \"Grupo 9267\",\n transform: \"translate(276 337.25)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6050\",\n \"data-name\": \"Caminho 6050\",\n d: \"M784,8079.637v-7.5\",\n transform: \"translate(-784.001 -8072.137)\",\n fill: \"none\",\n stroke: \"#191750\",\n strokeLinecap: \"round\",\n strokeWidth: 2.5\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6051\",\n \"data-name\": \"Caminho 6051\",\n d: \"M0,6V0\",\n transform: \"translate(6 7.5) rotate(90)\",\n fill: \"none\",\n stroke: \"#191750\",\n strokeLinecap: \"round\",\n strokeWidth: 2.5\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconClock, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_clock.80458a02.svg\";\nexport { ForwardRef as ReactComponent };","import styled, { css } from 'styled-components'\r\n\r\nimport { Button } from '../../components'\r\n\r\nexport const Container = styled.div`\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n margin-top: border-top: ${props => {\r\n if (props.scheduling) {\r\n return 'none'\r\n }\r\n\r\n return `1.5rem`\r\n\r\n }};\r\n border-top: ${props => {\r\n if (props.scheduling) {\r\n return 'none'\r\n }\r\n\r\n return `1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}`\r\n\r\n }};\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n`\r\n\r\nexport const OrderSummaryTitle = styled.h3`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin: 2rem 0 0 0;\r\n text-align: start;\r\n flex: 1;\r\n padding: 0;\r\n `\r\n\r\nexport const ItemsList = styled.ul`\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0;\r\n padding: 0 1.5rem;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tpadding: 1.5rem 0 0;\r\n\t}\r\n`\r\n\r\nexport const Item = styled.li`\r\n flex: 1;\r\n display: flex;\r\n margin: 0 0 2rem 0;\r\n`\r\n\r\nexport const ItemDetails = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1 1 auto;\r\n overflow: hidden;\r\n`\r\n\r\nexport const ItemName = styled.p`\r\n font-weight: 600;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin: 0;\r\n`\r\n\r\nexport const ItemDescription = styled.p`\r\n font-weight: 400;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n margin: 0 0 .5rem 0;\r\n`\r\n\r\nexport const ItemPrice = styled.p`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin: 0;\r\n`\r\n\r\nexport const ItemAmount = styled.span`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n flex: 0 0 35px;\r\n height: 35px;\r\n border: 3px solid rgba(84, 84, 84, .2);\r\n border-radius: 10px;\r\n margin: 0 0 0 .5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n`\r\n\r\nexport const TotalsWrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0;\r\n padding: 1.5rem 0;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n`\r\n\r\nexport const TotalsItem = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n`\r\n\r\nconst normalLabel = css`\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n`\r\n\r\nexport const SubTotalLabel = styled.div`\r\n ${normalLabel}\r\n`\r\n\r\nexport const SubTotalValue = styled.div`\r\n ${normalLabel}\r\n`\r\n\r\nexport const DeliveryFeeLabel = styled.div`\r\n ${normalLabel}\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const DeliveryFeeValue = styled.div`\r\n ${normalLabel}\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nconst boldLabel = css`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n`\r\n\r\nexport const TotalLabel = styled.div`\r\n ${boldLabel}\r\n`\r\n\r\nexport const TotalValue = styled.div`\r\n ${boldLabel}\r\n`\r\n\r\nexport const DeliveryAddressWrapper = styled.div`\r\n padding: 1.5rem 0;\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const DeliveryAddressLabel = styled.span`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n`\r\nexport const DeliveryEarnedPointsLabel = styled.span`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n`\r\nexport const DeliveryAddress = styled.div`\r\n font-weight: 400; \r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n display: flex;\r\n align-items: center;\r\n\r\n &.schedule{\r\n font-size: .9rem;\r\n }\r\n\r\n >span{\r\n margin-left: 5px;\r\n font-weight: bold;\r\n }\r\n\r\n svg {\r\n margin: 0 .5rem 0 0;\r\n width: .75rem;\r\n\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const DeliveryPaymentWrapper = styled.div`\r\n padding: 1.5rem 0;\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\nexport const DeliveryEarnedPointsWrapper = styled.div`\r\n padding: 1.5rem 0;\r\n display: flex;\r\n flex-direction: column;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const DeliveryPaymentCPF = styled.span`\r\n font-weight: 400;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: #7D7D7D;\r\n`\r\n\r\nexport const DeliveryPaymentCard = styled.span`\r\n margin: .5rem 0 0 0;\r\n font-weight: normal;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: #7D7D7D;\r\n display: flex;\r\n align-items: center;\r\n\r\n svg {\r\n margin: 0 .5rem 0 0;\r\n display: block;\r\n width: 2rem;\r\n\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n }\r\n }\r\n`\r\nexport const DeliveryEarnedPoints = styled.span`\r\n margin: .5rem 0 0 0;\r\n font-weight: normal;\r\n font-size: 1rem;\r\n line-height: 1.688rem;\r\n color: #7D7D7D;\r\n display: flex;\r\n align-items: center;\r\n\r\n svg {\r\n margin: 0 .5rem 0 0;\r\n display: block;\r\n width: 2rem;\r\n\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const ActionButton = styled(Button)`\r\n flex: 0 0 3rem;\r\n margin: 1.5rem 0 0;\r\n font-weight: bold;\r\n font-size: .875rem;\r\n line-height: 1.188rem;\r\n color: #fff;\r\n cursor: pointer;\r\n`\r\nexport const CardImage = styled.img`\r\n\twidth: 50px;\r\n\tpadding: 0 1rem 0 0;\r\n`\r\n\r\nexport const Help = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n flex-wrap: wrap;\r\n padding: 1.25rem 1.25rem;\r\n padding-bottom: 0;\r\n width: 100%;\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const HelpLabel = styled.label`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.188.rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0 0 1rem 0;\r\n width: 100%;\r\n`\r\n\r\nexport const HelpButton = styled.button`\r\n border: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: 15px;\r\n font-weight: 400;\r\n font-size: .75rem;\r\n line-height: 1.188.rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n flex: 1 1 calc(50% - .5rem);\r\n max-width: calc(50% - .5rem);\r\n height: 2.5rem;\r\n background-color: #fff;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: .5rem .25rem;\r\n\r\n &:hover {\r\n background-color: #f7f7f7;\r\n }\r\n\r\n &:first-of-type {\r\n margin: 0 1rem 0 0;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n font-size: .875rem;\r\n }\r\n\r\n svg {\r\n margin: 0 0 0 .5rem;\r\n\r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n stroke: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n`\r\n","import React, {\r\n useEffect\r\n} from 'react'\r\n\r\nimport {\r\n Details,\r\n Summary\r\n} from './'\r\n\r\nexport function Delivery(props) {\r\n const {\r\n userName,\r\n cpf,\r\n cardBrand,\r\n cardNumber,\r\n deliveryTime,\r\n hasCpf,\r\n date,\r\n products,\r\n notification,\r\n deliveryAddress,\r\n handleStatus,\r\n storeName,\r\n logoStore,\r\n modalityId,\r\n scheduling,\r\n orderId,\r\n URLParameters,\r\n\t\tfollowLink,\r\n\t\trequestNumber,\r\n earnedPoints\r\n } = props\r\n\r\n const statusProgress = notification && notification.status\r\n\r\n const status0 = notification && notification.statuses && notification.statuses[0] && (notification.statuses[0].active || notification.statuses[0].time)\r\n const status1 = notification && notification.statuses && notification.statuses[1] && (notification.statuses[1].active || notification.statuses[1].time)\r\n const status2 = notification && notification.statuses && notification.statuses[2] && (notification.statuses[2].active || notification.statuses[2].time)\r\n const status3 = notification && notification.statuses && notification.statuses[3] && (notification.statuses[3].active || notification.statuses[3].time)\r\n\r\n const statusDate0 = notification && notification.statuses && notification.statuses[0] && notification.statuses[0].time\r\n const statusDate1 = notification && notification.statuses && notification.statuses[1] && notification.statuses[1].time\r\n const statusDate2 = notification && notification.statuses && notification.statuses[2] && notification.statuses[2].time\r\n const statusDate3 = notification && notification.statuses && notification.statuses[3] && notification.statuses[3].time\r\n\r\n const propStatus = {\r\n statusProgress,\r\n status0,\r\n status1,\r\n status2,\r\n status3,\r\n statusDate0,\r\n statusDate1,\r\n statusDate2,\r\n statusDate3\r\n }\r\n\r\n useEffect(() => {\r\n handleStatus(1)\r\n\r\n if (status3) {\r\n handleStatus(2)\r\n }\r\n\r\n return () => { }\r\n }, [\r\n handleStatus,\r\n status0,\r\n status1,\r\n status2,\r\n status3\r\n ])\r\n\r\n return (\r\n <>\r\n \r\n {userName},
seu pedido {(requestNumber && requestNumber >= 1) ? `#${requestNumber}` : '...'} foi confirmado! \r\n {date} \r\n {!scheduling && \r\n }\r\n {scheduling && \r\n Data da entrega \r\n \r\n {scheduling}\r\n \r\n }\r\n \r\n Local de entrega \r\n \r\n \r\n \r\n \r\n Forma de pagamento \r\n \r\n \r\n \r\n \r\n CPF na nota \r\n \r\n {hasCpf ? formatCpf(cpf) : '000.000.000-00'}\r\n \r\n \r\n {(hasLoyalty && earnedPoints > 0) &&\r\n (\r\n Pontos Ganhos \r\n \r\n \r\n )\r\n }\r\n {\r\n (hasCashback && earnedPoints > 0) && (\r\n \r\n Cashback Ganho \r\n \r\n \r\n \r\n )\r\n }\r\n {status <= 4 ? { if (!followLink || status !== 4) { event.preventDefault(); return false } }} className={`${!followLink && status !== 4 ? 'disabled' : ''}`} target={'_blank'}>Acompanhe a entrega : <>}\r\n \r\n )\r\n}\r\n","import React from 'react'\r\nimport styled from 'styled-components'\r\n\r\nimport LoadingGIF from '../../assets/ipiranga-loading.gif'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport {\r\n getCardBrandImageById,\r\n numberToCurrency,\r\n formatCpf\r\n} from '../../../infra/utils'\r\n\r\nconst Wrapper = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 100%;\r\n margin-top: 0;\r\n\r\n > div {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n background: #fff;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n flex: 1;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#CCC' } 0.063rem solid;\r\n padding: 1.25rem;\r\n\r\n > p {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#444' };\r\n font-size: 0.875rem;\r\n }\r\n }\r\n`\r\n\r\nconst H2 = styled.h2`\r\n font-size: 1.25rem;\r\n line-height: 1.5rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: left;\r\n margin: 0;\r\n padding: 0;\r\n min-width: 100%;\r\n flex: 1;\r\n\r\n > span.name {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n > span.status_0 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n > span.status_1 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEighthColor) || '#444' };\r\n }\r\n`\r\n\r\nconst H3 = styled.h3`\r\n font-size: 1.125rem;\r\n color: #000;\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: 1.25rem;\r\n min-width: 100%;\r\n`\r\n\r\nconst List = styled.ul`\r\n list-style: inside none;\r\n min-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n flex: 1;\r\n`\r\n\r\nconst ListItem = styled.li`\r\n min-width: 100%;\r\n margin-bottom: 0.625rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n color: #000;\r\n font-size: 1rem;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n > span {\r\n flex: 1;\r\n\r\n &:nth-child(1) {\r\n flex: 0;\r\n padding-right: 0.625rem;\r\n }\r\n\r\n &:nth-child(2) {\r\n > span {\r\n display: block;\r\n font-size: 0.75rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEleventhColor) || '#333' };\r\n }\r\n }\r\n\r\n &:nth-child(3) {\r\n text-align: right;\r\n }\r\n }\r\n`\r\n\r\nconst ImageContainer = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nconst Paragraph = styled.p` \r\n min-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n color: #7D7D7D;\r\n`\r\n\r\nconst Div = styled.div``\r\n\r\nconst Summary = styled.div`\r\n min-width: 100%;\r\n text-align: right;\r\n flex: 1;\r\n \r\n > p {\r\n margin: 0 auto;\r\n\r\n &.date {\r\n color: #757575;\r\n }\r\n\r\n &:nth-child(2) {\r\n margin-bottom: 0.938rem;\r\n }\r\n\r\n > strong {\r\n color: #000;\r\n }\r\n }\r\n`\r\n\r\nconst Footer = styled.footer` \r\n flex: 1;\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding-bottom: 0.938rem;\r\n padding-top: 1.25rem;\r\n\r\n > p {\r\n margin-bottom: 0.938rem;\r\n }\r\n`\r\n\r\nconst Button = styled.button`\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n margin: 0 1.25rem;\r\n font-size: 1.25rem;\r\n padding: 0.5rem 0.938rem;\r\n box-sizing: border-box;\r\n min-width: calc(100% - 2.5rem);\r\n max-width: calc(100% - 2.5rem);\r\n color: #fff;\r\n text-transform: uppercase;\r\n border-radius: 7px;\r\n font-weight: bold;\r\n`\r\n\r\nconst SelectedCardContainer = styled.p`\r\n margin: 0;\r\n width: 100%;\r\n max-width: 280px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n > span {\r\n font-size: 0.75rem;\r\n font-weight: bold;\r\n color: #686868;\r\n\r\n &:nth-child(2) {\r\n font-size: 0.875rem;\r\n font-weight: normal;\r\n }\r\n\r\n > img {\r\n margin-right: 0.313rem;\r\n }\r\n\r\n > a {\r\n margin-left: 0.313rem;\r\n\r\n > img {\r\n width: 0.938rem;\r\n height: auto;\r\n }\r\n }\r\n }\r\n`\r\n\r\nconst Span = styled.span``\r\n\r\nconst SelectedCard = ({ brand, number}) => {\r\n return \r\n \r\n { brand && number ? <>\r\n })
\r\n\r\n { number }\r\n : '' }\r\n \r\n \r\n}\r\n\r\nexport function Counter(props) {\r\n const {\r\n userName,\r\n cpf,\r\n cardBrand,\r\n cardNumber,\r\n useCpf,\r\n status,\r\n orderDate,\r\n requestNumber,\r\n products,\r\n handleFinishOrder,\r\n cashChange,\r\n deliveryAddress,\r\n scheduling\r\n } = props\r\n\r\n const {\r\n date,\r\n schedule\r\n } = scheduling\r\n\r\n const DiscountText = () => (\r\n products.summary.discount ?\r\n \r\n Desconto: {`R$ ${products.summary.discount.toFixed(2).replace('.', ',')}` }\r\n : null\r\n )\r\n\r\n return \r\n \r\n Subtotal {`${numberToCurrency(products.summary.subtotal)}`} \r\n Total: {`${numberToCurrency(products.summary.total)}`} \r\n }\r\n\r\n \r\n }\r\n \r\n}\r\n","export function PWAClose() {\r\n window.PWAClose && window.PWAClose()\r\n}\r\n\r\nexport function PWAFinish(data) {\r\n window.PWAFinish && window.PWAFinish(data)\r\n}\r\n\r\nexport function PWAAnalytics(data) {\r\n window.PWAAnalytics && window.PWAAnalytics(data)\r\n}\r\n\r\nexport function PWACall(data) {\r\n window.PWACall && window.PWACall(data)\r\n}\r\n","export const sizes = {\r\n\tmobile: 959,\r\n\tdesktop: 960\r\n}\r\n\r\nexport const device = {\r\n\tmobile: `(max-width: ${sizes.mobile}px)`,\r\n\tdesktop: `(min-width: ${sizes.desktop}px)`\r\n}\r\n","import styled from 'styled-components'\r\n\r\nimport { device } from '../../../domain/enum/responsive'\r\n\r\nexport const Wrapper = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 100%;\r\n max-width: 960px;\r\n margin-top: 0;\r\n\r\n @media ${ device.desktop } {\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: flex-start;\r\n }\r\n\r\n > div {\r\n background: #fff;\r\n box-sizing: border-box;\r\n\r\n @media ${ device.desktop } {\r\n padding: 1.25rem;\r\n border-radius: .625rem;\r\n box-shadow: #ddd .188rem .188rem .375rem;\r\n min-width: 620px;\r\n max-width: 620px;\r\n text-align: left;\r\n\r\n &.status_0 {\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#333' } .125rem solid;\r\n }\r\n\r\n &.status_1 {\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#333' } .125rem solid;\r\n }\r\n }\r\n\r\n @media ${ device.mobile } {\r\n &.status_0 {\r\n border: 0 none;\r\n }\r\n\r\n &.status_1 {\r\n border: 0 none;\r\n }\r\n }\r\n\r\n &.sidebar {\r\n min-width: 280px;\r\n max-width: 280px;\r\n\r\n @media ${ device.desktop } {\r\n margin-left: 1.25rem;\r\n min-width: 320px;\r\n max-width: 320px;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport const HeaderBox = styled.div`\r\n > p {\r\n font-size: 1.125rem;\r\n line-height: 1.5rem;\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: left;\r\n margin: 1.25rem 0 1.875rem 0;\r\n padding: 0;\r\n min-width: 280px;\r\n flex: 1;\r\n\r\n &.date {\r\n font-weight: 400;\r\n font-size: .938rem;\r\n }\r\n }\r\n\r\n @media ${ device.desktop } {\r\n min-width: unset;\r\n max-width: unset;\r\n text-align: left;\r\n margin-bottom: 0;\r\n }\r\n\r\n > div {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: 1.25rem;\r\n }\r\n\r\n > span.status_0 {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#FB9D19' };\r\n }\r\n\r\n > span.status_1 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEighthColor) || '#444' };\r\n }\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n font-size: 1.125rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: 1.25rem;\r\n min-width: 280px;\r\n max-width: 280px;\r\n`\r\n\r\nexport const List = styled.ul`\r\n list-style: inside none;\r\n min-width: 280px;\r\n max-width: 280px;\r\n padding: 0;\r\n margin: 0;\r\n flex: 1;\r\n padding-bottom: 1.25rem;\r\n margin-bottom: 1.25rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#B8B8B8'} .063rem solid;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin: 0 -1.25rem;\r\n padding: 0 1.25rem;\r\n padding-bottom: 1.25rem;\r\n margin-bottom: 1.25rem;\r\n }\r\n`\r\n\r\nexport const ListItem = styled.li`\r\n width: 100%;\r\n margin-bottom: .625rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n > span {\r\n flex: 1;\r\n font-weight: bold;\r\n\r\n &:nth-child(1) {\r\n max-width: 1.875rem;\r\n }\r\n\r\n &:nth-child(2) {\r\n > span {\r\n display: block;\r\n font-size: .75rem;\r\n font-weight: 400;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#999' };\r\n }\r\n }\r\n\r\n &:nth-child(3) {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#999' };\r\n text-align: right;\r\n }\r\n }\r\n`\r\n\r\nexport const ImageContainer = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const Paragraph = styled.p` \r\n min-width: 280px;\r\n padding: 0;\r\n margin: 0;\r\n color: #7D7D7D;\r\n`\r\n\r\nexport const SummaryParagraph = styled.p`\r\n color: '#7D7D7D';\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tfont-size: 1rem;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n`\r\n\r\nexport const StatusBox = styled.div`\r\n min-width: 280px;\r\n max-width: 280px;\r\n flex: 1;\r\n margin-bottom: 1.875rem;\r\n border: #000 .125rem solid;\r\n padding: .938rem;\r\n box-sizing: border-box;\r\n border-radius: .625rem;\r\n text-align: center;\r\n\r\n @media ${ device.desktop } {\r\n min-width: unset;\r\n max-width: unset;\r\n text-align: left;\r\n padding: 0;\r\n margin-bottom: 0;\r\n\r\n > p:nth-child(3) {\r\n text-align: center;\r\n > strong {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n }\r\n\r\n &.status_0 {\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#333' } .125rem solid;\r\n background: #fff;\r\n\r\n @media ${ device.desktop } {\r\n border: 0 none;\r\n background: none;\r\n }\r\n }\r\n\r\n &.status_1 {\r\n border: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEighthColor) || '#444' } .125rem solid;\r\n background: #fff;\r\n\r\n @media ${ device.desktop } {\r\n border: 0 none;\r\n background: none;\r\n\r\n > p {\r\n color: #000;\r\n\r\n &.requestNumber {\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSeventhColor) || '#333' };\r\n\r\n > span {\r\n display: inline-block;\r\n color: #fff;\r\n font-size: 2.5rem;\r\n }\r\n\r\n > strong {\r\n color: #fff;\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n > strong {\r\n color: #000;\r\n }\r\n }\r\n }\r\n\r\n @media ${ device.mobile } {\r\n > p {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n\r\n > div {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: 1.25rem;\r\n }\r\n\r\n &.requestNumber {\r\n > span {\r\n display: none;\r\n }\r\n\r\n > strong {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n }\r\n\r\n > strong {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n }\r\n }\r\n }\r\n\r\n > p {\r\n min-width: unset;\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: 1.875rem;\r\n\r\n &.only-mobile {\r\n @media ${ device.mobile } {\r\n display: block;\r\n }\r\n\r\n @media ${ device.desktop } {\r\n display: none;\r\n }\r\n }\r\n\r\n &.only-desktop {\r\n @media ${ device.mobile } {\r\n display: none;\r\n }\r\n\r\n @media ${ device.desktop } {\r\n display: block;\r\n }\r\n }\r\n\r\n &.date {\r\n margin-bottom: .938rem;\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey) || '#000' };\r\n\r\n @media ${ device.desktop } {\r\n margin-bottom: 1.875rem;\r\n }\r\n }\r\n\r\n &.requestNumber {\r\n margin-bottom: 0;\r\n\r\n @media ${ device.desktop } {\r\n background: #F7F7F7;\r\n flex: 1;\r\n border: #DDD .063rem solid;\r\n padding: .938rem 0;\r\n box-sizing: border-box;\r\n border-radius: .313rem;\r\n text-align: center;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n\r\n > span {\r\n display: inline-block;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n text-transform: uppercase;\r\n font-size: 2.5rem;\r\n font-weight: bold;\r\n }\r\n\r\n > strong {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n @media ${ device.mobile } {\r\n > strong {\r\n color: #000;\r\n font-size: 2.5rem;\r\n }\r\n\r\n > span {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n > strong {\r\n color: #000;\r\n font-size: 1.25rem;\r\n }\r\n }\r\n`\r\n\r\nexport const PreviewDeliveryBox = styled.div`\r\n background: #F7F7F7;\r\n min-width: 280px;\r\n max-width: 280px;\r\n flex: 1;\r\n margin-bottom: 1.875rem;\r\n border: #DDD .063rem solid;\r\n padding: .938rem 0;\r\n box-sizing: border-box;\r\n border-radius: .313rem;\r\n text-align: center;\r\n max-height: 3.125rem;\r\n\r\n @media ${ device.desktop } {\r\n margin-bottom: 0;\r\n min-width: unset;\r\n max-width: unset;\r\n display: none;\r\n }\r\n \r\n > p {\r\n font-size: .875rem;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n`\r\n\r\nexport const SummaryWrapper = styled.div`\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmin-width: 280px;\r\n\t\r\n\tflex: 1;\r\n\tpadding: 0;\r\n\tpadding-bottom: 2.5rem;\r\n\tborder-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333'} .063rem solid;\r\n\r\n\t> p {\r\n\t\tline-height: 1rem;\r\n font-size: 1rem;\r\n max-width: 280px;\r\n margin: 0 auto;\r\n\r\n\t\t&.subtotal {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n\t\t\tmargin-bottom: .625rem;\r\n\t\t}\r\n\r\n\t\t&.fee {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n\t\t\tmargin-bottom: 1.25rem;\r\n\t\t}\r\n\r\n\t\t&.total {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333' };\r\n\t\t\tfont-size: 1.125rem;\r\n\t\t\tline-height: 1.125rem;\r\n\r\n\t\t\t> span {\r\n\t\t\t\tfont-weight: bold;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t> span {\r\n\t\t\tflex: 1;\r\n\r\n\t\t\t&.value {\r\n\t\t\t\talign-self: flex-end;\r\n\t\t\t\tflex: none;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`\r\nexport const Span = styled.span``\r\n\r\nexport const Footer = styled.footer` \r\n flex: 1;\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding-bottom: .938rem;\r\n padding-top: 0;\r\n margin-top: 0;\r\n\r\n @media ${ device.desktop } {\r\n margin: 0 -1.25rem;\r\n }\r\n\r\n > p {\r\n margin-bottom: .938rem;\r\n }\r\n\r\n > button {\r\n font-size: 1rem;\r\n padding: .938rem .938rem;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n color: #fff;\r\n border-radius: .938rem;\r\n font-weight: bold;\r\n }\r\n`\r\n\r\nexport const Button = styled.button`\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && !props.disabled ? props.theme.main.general.primaryColor : '#999') || '#000' };\r\n cursor: pointer;\r\n`\r\n\r\nexport const Block = styled.div`\r\n flex: 1;\r\n display: flex;\r\n justify-content: center;\r\n flex-direction: column;\r\n\r\n @media ${ device.desktop } {\r\n max-width: 12.5rem;\r\n min-width: 12.5rem;\r\n }\r\n\r\n &.sidebar {\r\n display: unset;\r\n justify-content: unset;\r\n }\r\n\r\n > img {\r\n margin: 0 auto;\r\n flex: none;\r\n max-height: 6.25rem;\r\n }\r\n`\r\n\r\nexport const PlaceBox = styled.div`\r\n flex: 1;\r\n margin-bottom: .625rem;\r\n padding: .938rem 0 .938rem 0;\r\n box-sizing: border-box;\r\n\tborder-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333'} .063rem solid;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin: 0 -1.25rem;\r\n padding: 0 1.25rem;\r\n margin-bottom: 1.875rem;\r\n }\r\n\r\n > h3 {\r\n margin-bottom: .625rem;\r\n }\r\n\r\n > p {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n font-size: .875rem;\r\n } \r\n\r\n @media ${ device.mobile } {\r\n display: block;\r\n }\r\n\r\n &.only-mobile {\r\n @media ${ device.desktop } {\r\n display: none;\r\n }\r\n }\r\n\r\n &.only-desktop {\r\n @media ${ device.mobile } {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const HelpBox = styled.div`\r\n flex: 1;\r\n margin-bottom: .625rem;\r\n padding: .625rem 0 .938rem 0;\r\n box-sizing: border-box;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin: 0 -1.25rem;\r\n padding: 0 1.25rem;\r\n margin-bottom: 1.875rem;\r\n }\r\n\r\n > h3 {\r\n margin-bottom: .625rem;\r\n }\r\n\r\n > div{\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: .625rem;\r\n \r\n > button {\r\n width: 100%;\r\n padding: .625rem;\r\n border-radius: .938rem;\r\n background: #fff;\r\n margin: 0;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333'} .125rem solid;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333' };\r\n font-size: .813rem;\r\n\r\n &.off {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333' };\r\n }\r\n }\r\n }\r\n\r\n @media ${ device.mobile } {\r\n display: block;\r\n }\r\n\r\n &.only-mobile {\r\n @media ${ device.desktop } {\r\n display: none;\r\n }\r\n }\r\n\r\n &.only-desktop {\r\n @media ${ device.mobile } {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const SelectedCardContainer = styled.p`\r\n margin: 0;\r\n width: 100%;\r\n max-width: 280px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n > span {\r\n font-size: .75rem;\r\n font-weight: bold;\r\n color: #686868;\r\n\r\n &:nth-child(2) {\r\n font-size: .875rem;\r\n font-weight: normal;\r\n }\r\n\r\n > img {\r\n margin-right: .313rem;\r\n }\r\n\r\n > a {\r\n margin-left: .313rem;\r\n\r\n > img {\r\n width: .938rem;\r\n height: auto;\r\n }\r\n }\r\n }\r\n`\r\nexport const Div = styled.div``\r\n","import styled from 'styled-components'\r\n\r\nimport { device } from '../../../domain/enum/responsive'\r\nimport CheckedIcon from '../../assets/icon_checked.png'\r\nimport UncheckedIcon from '../../assets/icon_unchecked.png'\r\nimport Loading from './../../assets/receipt_loading.gif'\r\n\r\n\r\nexport const Wrapper = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 100%;\r\n max-width: 960px;\r\n margin-top: 0;\r\n\r\n @media ${ device.desktop } {\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: flex-start;\r\n }\r\n\r\n > div {\r\n background: #fff;\r\n box-sizing: border-box;\r\n\r\n @media ${ device.desktop } {\r\n padding: 1.25rem;\r\n border-radius: .625rem;\r\n box-shadow: #ddd .188rem .188rem .375rem;\r\n min-width: 620px;\r\n max-width: 620px;\r\n text-align: left;\r\n }\r\n\r\n &.sidebar {\r\n min-width: 280px;\r\n max-width: 280px;\r\n\r\n @media ${ device.desktop } {\r\n margin-left: 1.25rem;\r\n min-width: 320px;\r\n max-width: 320px;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport const H2 = styled.h2`\r\n font-size: 1.125rem;\r\n line-height: 1.5rem;\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: left;\r\n margin: 1.25rem 0 1.875rem 0;\r\n padding: 0;\r\n min-width: 280px;\r\n flex: 1;\r\n \r\n @media ${ device.desktop } {\r\n font-size: 1.5rem;\r\n text-align: left;\r\n line-height: 1.75rem;\r\n max-width: unset;\r\n min-width: unset;\r\n margin-bottom: 3.125rem;\r\n }\r\n\r\n > div {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: 1.25rem;\r\n }\r\n\r\n > span {\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey) || '#000' };\r\n display: block;\r\n font-weight: normal;\r\n font-size: 1rem;\r\n }\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n font-size: 1.125rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: 1.25rem;\r\n min-width: 280px;\r\n max-width: 280px;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n font-size: 1.5rem;\r\n }\r\n\r\n &.only-mobile {\r\n @media ${ device.desktop } {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const List = styled.ul`\r\n list-style: inside none;\r\n min-width: 280px;\r\n max-width: 280px;\r\n padding: 0;\r\n margin: 0;\r\n flex: 1;\r\n padding-bottom: 1.25rem;\r\n margin-bottom: 1.25rem;\r\n border-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#B8B8B8'} .063rem solid;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin: 0 -1.25rem;\r\n padding: 0 1.25rem;\r\n padding-bottom: 1.25rem;\r\n margin-bottom: 1.25rem;\r\n }\r\n`\r\n\r\nexport const ListItem = styled.li`\r\n width: 100%;\r\n margin-bottom: .625rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n > span {\r\n flex: 1;\r\n font-weight: bold;\r\n\r\n &:nth-child(1) {\r\n max-width: 1.875rem;\r\n }\r\n\r\n &:nth-child(2) {\r\n > span {\r\n display: block;\r\n font-size: .75rem;\r\n font-weight: 400;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#999' };\r\n }\r\n }\r\n\r\n &:nth-child(3) {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#999' };\r\n text-align: right;\r\n }\r\n }\r\n`\r\n\r\nexport const ImageContainer = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const Paragraph = styled.p` \r\n min-width: 280px;\r\n padding: 0;\r\n margin: 0;\r\n color: #7D7D7D;\r\n`\r\n\r\nexport const Stepper = styled.div`\r\n min-width: 280px;\r\n max-width: 280px;\r\n margin-bottom: 1.563rem;\r\n \r\n @media ${ device.desktop } {\r\n margin-bottom: 3.125rem;\r\n }\r\n`\r\n\r\nexport const StepperItem = styled.div`\r\n background: ${ props => {\r\n if(props.status){\r\n return `url('${ Loading }') no-repeat 0 .313rem;`\r\n }\r\n\r\n return `url('${ UncheckedIcon }') no-repeat 0 .313rem;`\r\n }};\r\n min-width: 280px;\r\n max-width: 280px;\r\n line-height: 1.875rem;\r\n min-height: 1.875rem;\r\n padding: 0;\r\n padding-left: 1.875rem;\r\n box-sizing: border-box;\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n background-size: 1.25rem;\r\n padding-bottom: 1.25rem;\r\n color: ${ props => {\r\n if(props.status){\r\n return `${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' }`\r\n }\r\n\r\n return ``\r\n }};\r\n font-size: ${ props => {\r\n if(props.status){\r\n return `1.25rem`\r\n }\r\n\r\n return `16px`\r\n }};\r\n font-weight: bold;\r\n \r\n @media ${ device.desktop } {\r\n font-size: ${ props => {\r\n if(props.status){\r\n return `32px`\r\n }\r\n \r\n return `1.25rem`\r\n }};\r\n padding-top: 0;\r\n padding-bottom: 44px;\r\n }\r\n\r\n &.active {\r\n background-image: url('${ CheckedIcon }');\r\n background-size: 1.25rem;\r\n padding-bottom: 9px;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#999' };\r\n font-weight: bold;\r\n }\r\n\r\n &:before {\r\n content: '';\r\n position: absolute;\r\n left: 9px;\r\n top: 1.75rem;\r\n border-left: #E2E2E2 .063rem solid;\r\n height: 34px;\r\n width: .063rem;\r\n\r\n @media ${ device.desktop } {\r\n height: 46px;\r\n }\r\n }\r\n\r\n &:last-child {\r\n padding-bottom: 0;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n\r\n > span {\r\n display: inline-block;\r\n font-size: .875rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n font-weight: normal;\r\n padding-left: .313rem;\r\n }\r\n`\r\n\r\nexport const ProgressBar = styled.ul`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-direction: row;\r\n max-width: 280px;\r\n min-width: 280px;\r\n list-style: inside none;\r\n padding: 0;\r\n margin: 0;\r\n margin-bottom: 1.25rem;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin-bottom: 3.125rem;\r\n }\r\n`\r\n\r\nexport const ProgressBarItem = styled.li`\r\n background: #B1B1B1;\r\n flex: 1;\r\n max-width: 24%;\r\n min-width: 24%;\r\n min-height: .313rem;\r\n max-height: .313rem;\r\n border-radius: .125rem;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &.active {\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#999' };\r\n }\r\n\r\n @media ${ device.desktop } {\r\n max-height: .375rem;\r\n min-height: .375rem;\r\n border-radius: 4px;\r\n }\r\n`\r\n\r\nexport const DeliveryBox = styled.div`\r\n flex: 1;\r\n margin-bottom: .625rem;\r\n padding: .938rem 0;\r\n box-sizing: border-box;\r\n\tborder-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333'} .063rem solid;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin: 0 -1.25rem;\r\n padding: 0 1.25rem;\r\n margin-bottom: 1.875rem;\r\n }\r\n\r\n > p {\r\n min-width: 280px;\r\n padding: 0;\r\n margin: 0;\r\n color: #7D7D7D;\r\n }\r\n\r\n > h3 {\r\n margin-bottom: .625rem;\r\n }\r\n\r\n @media ${ device.mobile } {\r\n display: block;\r\n }\r\n\r\n &.only-mobile {\r\n @media ${ device.desktop } {\r\n display: none;\r\n }\r\n }\r\n\r\n &.only-desktop {\r\n @media ${ device.mobile } {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const HelpBox = styled.div`\r\n flex: 1;\r\n margin-bottom: .625rem;\r\n padding: .625rem 0 .938rem 0;\r\n box-sizing: border-box;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n @media ${ device.desktop } {\r\n max-width: unset;\r\n min-width: unset;\r\n margin: 0 -1.25rem;\r\n padding: 0 1.25rem;\r\n margin-bottom: 1.875rem;\r\n }\r\n\r\n > h3 {\r\n margin-bottom: .625rem;\r\n }\r\n\r\n > div {\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: .625rem;\r\n \r\n > button {\r\n width: 100%;\r\n padding: .625rem;\r\n border-radius: .938rem;\r\n background: #fff;\r\n margin: 0;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333'} .125rem solid;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333' };\r\n font-size: .75rem;\r\n\r\n &.off {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333' };\r\n }\r\n }\r\n }\r\n\r\n @media ${ device.mobile } {\r\n display: block;\r\n }\r\n\r\n &.only-mobile {\r\n @media ${ device.desktop } {\r\n display: none;\r\n }\r\n }\r\n\r\n &.only-desktop {\r\n @media ${ device.mobile } {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const PreviewDeliveryBox = styled.div`\r\n background: #F7F7F7;\r\n min-width: 280px;\r\n max-width: 280px;\r\n flex: 1;\r\n margin-bottom: 1.875rem;\r\n border: #DDD .063rem solid;\r\n padding: .938rem 0;\r\n box-sizing: border-box;\r\n border-radius: .313rem;\r\n text-align: center;\r\n max-height: 3.125rem;\r\n\r\n @media ${ device.desktop } {\r\n margin-bottom: 0;\r\n min-width: unset;\r\n max-width: unset;\r\n display: none;\r\n }\r\n \r\n > p {\r\n font-size: .875rem;\r\n margin: 0;\r\n padding: 0;\r\n min-width: 280px;\r\n color: #7D7D7D;\r\n }\r\n`\r\n\r\nexport const SummaryWrapper = styled.div`\r\n\tpadding: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmin-width: 280px;\r\n\t\r\n\tflex: 1;\r\n\tpadding: 0;\r\n\tpadding-bottom: 2.5rem;\r\n\tborder-bottom: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#333'} .063rem solid;\r\n\r\n\t> p {\r\n\t\tline-height: 1rem;\r\n font-size: 1rem;\r\n max-width: 280px;\r\n margin: 0 auto;\r\n color: '#7D7D7D';\r\n padding: 0;\r\n margin: 0;\r\n font-size: 1rem;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n flex: 1;\r\n min-width: 100%;\r\n\r\n\t\t&.subtotal {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n\t\t\tmargin-bottom: .625rem;\r\n\t\t}\r\n\r\n\t\t&.fee {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n\t\t\tmargin-bottom: 1.25rem;\r\n\t\t}\r\n\r\n &.discount {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333' };\r\n margin-bottom: .625rem;\r\n }\r\n\r\n\t\t&.total {\r\n\t\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333' };\r\n\t\t\tfont-size: 1.25rem;\r\n\t\t\tline-height: 1.25rem;\r\n\r\n\t\t\t> span {\r\n\t\t\t\tfont-weight: bold;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t> span {\r\n\t\t\tflex: 1;\r\n\r\n\t\t\t&.value {\r\n\t\t\t\talign-self: flex-end;\r\n\t\t\t\tflex: none;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const Footer = styled.footer` \r\n flex: 1;\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding-bottom: .938rem;\r\n padding-top: 0;\r\n margin-top: 0;\r\n\r\n @media ${ device.desktop } {\r\n margin: 0 -1.25rem;\r\n }\r\n\r\n > p {\r\n min-width: 280px;\r\n padding: 0;\r\n margin: 0;\r\n margin-bottom: .938rem;\r\n color: #7D7D7D;\r\n }\r\n\r\n > button {\r\n font-size: 1rem;\r\n padding: .938rem .938rem;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n color: #fff;\r\n border-radius: .938rem;\r\n font-weight: bold;\r\n }\r\n`\r\n\r\nexport const Block = styled.div`\r\n flex: 1;\r\n\r\n @media ${ device.desktop } {\r\n max-width: 12.5rem;\r\n min-width: 12.5rem;\r\n }\r\n`\r\n\r\nexport const SelectedCardContainer = styled.p`\r\n margin: 0;\r\n width: 100%;\r\n max-width: 280px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n > span {\r\n font-size: .75rem;\r\n font-weight: bold;\r\n color: #686868;\r\n\r\n &:nth-child(2) {\r\n font-size: .875rem;\r\n font-weight: normal;\r\n }\r\n\r\n > img {\r\n margin-right: .313rem;\r\n }\r\n\r\n > a {\r\n margin-left: .313rem;\r\n\r\n > img {\r\n width: .938rem;\r\n height: auto;\r\n }\r\n }\r\n }\r\n`\r\n","import React from 'react'\r\n\r\nimport {\r\n Details,\r\n Summary\r\n} from './'\r\n\r\nexport function Pickup(props) {\r\n const {\r\n userName,\r\n cpf,\r\n cardBrand,\r\n cardNumber,\r\n deliveryTime,\r\n hasCpf,\r\n status,\r\n date,\r\n products,\r\n requestNumber,\r\n storeAddress,\r\n deliveryAddress,\r\n storeName,\r\n logoStore,\r\n phone,\r\n whattsapp,\r\n earnedPoints,\r\n scheduling\r\n } = props\r\n\r\n return (\r\n <>\r\n \r\n {userName},
seu pedido {(requestNumber && requestNumber >= 1) ? `#${requestNumber}` : '...'} foi confirmado! \r\n {date} \r\n\r\n {scheduling && \r\n Data da entrega \r\n \r\n {scheduling}\r\n \r\n }\r\n\r\n \r\n {!scheduling && deliveryTime ? \r\n : null}\r\n \r\n Local de retirada \r\n \r\n \r\n \r\n \r\n Forma de pagamento \r\n \r\n \r\n \r\n \r\n CPF na nota \r\n \r\n {hasCpf ? formatCpf(cpf) : '000.000.000-00'}\r\n \r\n \r\n\r\n {(hasLoyalty && earnedPoints > 0) &&\r\n \r\n Pontos Ganhos \r\n \r\n \r\n \r\n }\r\n\r\n {\r\n (hasCashback && earnedPoints > 0) && (\r\n \r\n Cashback Ganho \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\nimport { device } from '../../../../domain/enum/responsive'\r\n\r\n\r\nexport const ReceiptSumaryContainer = styled.div`\r\n grid-area: summary;\r\n width: 100%;\r\n box-sizing: border-box;\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n padding: 0 0 0 1.5rem;\r\n }\r\n\r\n #cart-content {\r\n margin: 2rem 0 0 0;\r\n \r\n #notification {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const ReceiptSummaryStore = styled.div`\r\n display: none;\r\n align-items: center;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 0 0 1rem 0;\r\n margin: 0 0 1rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n display: flex;\r\n }\r\n`\r\n\r\nexport const ReceiptSummaryContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n @media (min-width: 60rem) {\r\n overflow: auto;\r\n\r\n &::-webkit-scrollbar {\r\n width: 1.5rem;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n border-left: 1rem solid rgba(0, 0, 0, 0);\r\n background-clip: padding-box;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n }\r\n\r\n &::-webkit-scrollbar-button {\r\n width: 0;\r\n height: 0;\r\n display: none;\r\n }\r\n\r\n &::-webkit-scrollbar-corner {\r\n background-color: transparent;\r\n }\r\n }\r\n`\r\n\r\nexport const StoreContainer = styled.label`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1 1 70%;\r\n`\r\n\r\nexport const StoreLabel = styled.label`\r\n font-weight: 600;\r\n font-size: .875rem;\r\n line-height: 1.188rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n`\r\n\r\nexport const StoreName = styled.h3`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' }; \r\n margin: 0;\r\n`\r\n\r\nexport const StoreLogo = styled.img`\r\n flex: 0 1 30%;\r\n max-width: 4rem;\r\n`\r\n\r\nexport const StatusBox = styled.div`\r\n flex: 1;\r\n margin-bottom: 1.875rem;\r\n border: #000 .125rem solid;\r\n padding: .938rem;\r\n box-sizing: border-box;\r\n border-radius: .625rem;\r\n text-align: center;\r\n\r\n @media ${device.desktop} {\r\n min-width: unset;\r\n max-width: unset;\r\n text-align: left;\r\n padding: 0;\r\n margin-bottom: 0;\r\n\r\n > p:nth-child(3) {\r\n text-align: center;\r\n > strong {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n }\r\n\r\n &.status_0 {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textBlueColor) || '#333'} .125rem solid;\r\n background: #fff;\r\n margin: 0 1.5rem 0;\r\n\r\n\r\n @media ${device.desktop} {\r\n border: 0 none;\r\n background: none;\r\n }\r\n }\r\n\r\n &.status_1 {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEighthColor) || '#444'} .125rem solid;\r\n background: #fff;\r\n margin: 0 1.5rem 0;\r\n\r\n @media ${device.desktop} {\r\n border: 0 none;\r\n background: none;\r\n\r\n > p {\r\n color: #000;\r\n\r\n &.requestNumber {\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSeventhColor) || '#333'};\r\n\r\n > span {\r\n display: inline-block;\r\n color: #fff;\r\n font-size: 2.5rem;\r\n }\r\n\r\n > strong {\r\n color: #fff;\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n > strong {\r\n color: #000;\r\n }\r\n }\r\n }\r\n\r\n @media ${device.mobile} {\r\n > p {\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n\r\n > div {\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-size: 1.25rem;\r\n }\r\n\r\n &.requestNumber {\r\n > span {\r\n display: none;\r\n }\r\n\r\n > strong {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n }\r\n }\r\n\r\n > strong {\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n }\r\n }\r\n }\r\n }\r\n\r\n > p {\r\n min-width: unset;\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: 1.875rem;\r\n\r\n &.only-mobile {\r\n @media ${device.mobile} {\r\n display: block;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n };\r\n\r\n @media ${device.desktop} {\r\n display: none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n }\r\n\r\n &.only-desktop {\r\n @media ${device.mobile} {\r\n display: none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n\r\n @media ${device.desktop} {\r\n display: block;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n }\r\n\r\n &.date {\r\n margin-bottom: .938rem;\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey) || '#000'};\r\n\r\n @media ${device.desktop} {\r\n margin-bottom: 1.875rem;\r\n }\r\n }\r\n\r\n &.requestNumber {\r\n margin-bottom: 0;\r\n\r\n @media ${device.desktop} {\r\n background: #F7F7F7;\r\n flex: 1;\r\n border: #DDD .063rem solid;\r\n padding: .938rem 0;\r\n box-sizing: border-box;\r\n border-radius: .313rem;\r\n text-align: center;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n\r\n > span {\r\n display: inline-block;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n text-transform: uppercase;\r\n font-size: 2.5rem;\r\n font-weight: bold;\r\n }\r\n\r\n > strong {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-size: 2.5rem;\r\n }\r\n }\r\n\r\n @media ${device.mobile} {\r\n > strong {\r\n color: #000;\r\n font-size: 2.5rem;\r\n }\r\n\r\n > span {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n > strong {\r\n color: #000;\r\n font-size: 1.25rem;\r\n }\r\n }\r\n`\r\n\r\nexport const HeaderBox = styled.div`\r\n > h3 {\r\n font-size: 1.2rem;\r\n line-height: 1.5rem;\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n text-align: center;\r\n margin: 0 0 1.875rem 0;\r\n padding: 0;\r\n min-width: 280px;\r\n flex: 1;\r\n\r\n &.date {\r\n font-weight: 400;\r\n font-size: .938rem;\r\n }\r\n \r\n > span{\r\n &.status_0 {\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#FB9D19'};\r\n }\r\n\r\n &.status_1 {\r\n color:${props => (props.theme && props.theme.colors && props.theme.colors.positive) || '#FB9D19'};\r\n }\r\n }\r\n\r\n }\r\n\r\n @media ${device.desktop} {\r\n min-width: unset;\r\n max-width: unset;\r\n text-align: left;\r\n margin-bottom: 0;\r\n }\r\n\r\n > div {\r\n color:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-size: 1.25rem;\r\n }\r\n\r\n`\r\n","import React from 'react'\r\n\r\nimport { OrderSummary } from '../../'\r\n\r\nimport {\r\n ReceiptSumaryContainer,\r\n ReceiptSummaryStore,\r\n ReceiptSummaryContent,\r\n StoreContainer,\r\n StoreLabel,\r\n StoreLogo,\r\n StoreName,\r\n StatusBox,\r\n HeaderBox\r\n} from './styles'\r\n\r\nimport {\r\n Strong,\r\n Span,\r\n DefaultParagraph as Paragraph\r\n} from '../../../components'\r\n\r\nexport function Summary({\r\n storeLogo,\r\n storeAddress,\r\n products,\r\n storeName,\r\n deliveryAddress,\r\n cardBrand,\r\n cardNumber,\r\n cpf,\r\n hasCpf,\r\n status,\r\n requestNumber,\r\n phone,\r\n whattsapp\r\n}) {\r\n return (\r\n \r\n \r\n \r\n Seu pedido em: \r\n {storeName} \r\n \r\n \r\n \r\n {status === 1 && <>\r\n \r\n \r\n\r\n \r\n Para retirar, fique atento à mudança de status nesta tela ou à chamada pela senha: \r\n\r\n PEDIDO CONFIRMADO! \r\n\r\n Para retirar, fique atento à mudança de status nesta tela ou à chamada pela senha: \r\n\r\n Senha: {(requestNumber && requestNumber >= 1) ? requestNumber : '…'} \r\n \r\n }\r\n\r\n {status === 2 && requestNumber && <>\r\n \r\n Uhuul, chegou a hora! Já pode vir retirar o seu pedido aqui no balcão \r\n\r\n VENHA AQUI RETIRAR! \r\n\r\n Hmmm, chegou a hora. Já pode vir retirar o seu pedido aqui no balcão. \r\n\r\n Senha: {requestNumber} \r\n \r\n }\r\n \r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 17px;\r\n }\r\n }\r\n\r\n > div {\r\n min-width: 100%;\r\n\r\n > .overlay {\r\n min-width: 100%;\r\n\r\n > .receipt-is-not-paid {\r\n min-width: 100%;\r\n top: calc(100% - 4.375rem);\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n transition: all .25s ease-in;\r\n flex: 1;\r\n min-width: 100%;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n &#receipt-waiting {\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\r\n > p {\r\n color: #fff;\r\n font-size: 1rem;\r\n font-weight: bold;\r\n margin: 0;\r\n }\r\n\r\n > img {\r\n margin-top: 2.5rem;\r\n }\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n cursor: pointer;\r\n z-index: 1;\r\n\r\n &.white {\r\n color: #fff;\r\n }\r\n`\r\n\r\nexport const ReceiptPageContainer = styled.div`\r\n\tflex: 1;\r\n\tbox-sizing: border-box;\r\n\twidth: 100%;\r\n\theight: 0;\r\n\tbackground-color: #fff;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: auto;\r\n\tgrid-template-rows: 5.625rem auto;\r\n\tgrid-template-areas: \r\n\t\t\t\"header\"\r\n\t\t\t\"main\";\r\n`\r\n\r\nexport const ReceiptHeader = styled.header`\r\n\tgrid-area: header;\r\n\tbackground: #fff;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n\tmax-height: 5.625rem;\r\n\tmin-height: 5.625rem;\r\n\r\n\tbutton {\r\n\t\tmax-width: 11rem;\r\n\t\theight: 2.5rem;\r\n\t\tborder-radius: 8px;\r\n\t\tfont-size: .875rem;\r\n\t}\r\n`\r\n\r\nexport const ReceiptMain = styled.div`\r\n\tgrid-area: main;\r\n\tdisplay: grid;\r\n\tgrid-template-columns: auto;\r\n\tgrid-template-rows: auto auto;\r\n\tgrid-template-areas: 'details'\r\n\t\t\t\t\t\t\t\t\t\t\t\t'summary';\r\n\twidth: 100%;\r\n\tjustify-self: center;\r\n\tmargin: 1.5rem 0 0;\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\tgrid-template-columns: 1fr 1fr;\r\n\t\tgrid-template-rows: auto;\r\n\t\tgrid-template-areas: 'details summary';\r\n\t\tmax-width: 48rem;\r\n\t\tmargin-bottom: 1.5rem;\r\n\t\tpadding: 0;\r\n\t}\r\n`\r\n\r\nexport const LoadingContainer = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 0;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n position: relative;\r\n`\r\n\r\nexport const MobileHeader = styled.div`\r\n\tmax-height: 5.625rem;\r\n\tmin-height: 5.625rem;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n\r\n @media (min-width: 40rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const WhattsAppImg = styled.div`\r\n width: 4rem;\r\n height: 4rem;\r\n position: fixed;\r\n bottom: 1.25rem;\r\n right: 1.25rem;\r\n cursor: pointer;\r\n \r\n img, svg {\r\n width: 4rem;\r\n height: 4rem;\r\n display: block;\r\n }\r\n`\r\n","import React, {\r\n useState,\r\n useEffect,\r\n useCallback\r\n} from 'react'\r\nimport { connect } from 'react-redux'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../domain/helpers'\r\nimport {\r\n //PWAAnalytics,\r\n PWAClose\r\n} from '../../domain/helpers/ipiranga/PWA'\r\n\r\nimport {\r\n useCustomLayout,\r\n useDeviceLayout,\r\n useInterval\r\n} from '../hooks'\r\n\r\nimport {\r\n CustomLoading,\r\n CustomIcon,\r\n DefaultImage as Image,\r\n} from '../components'\r\n\r\nimport {\r\n fetchReceipt,\r\n setReceipt,\r\n fetchRequestNumber,\r\n fetchReceiptStatus,\r\n setCart,\r\n setReceiptNotification,\r\n handleGTM,\r\n fetchStatusAntiFraud,\r\n setAntiFraudConfirmation\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n ReceiptPageContainer,\r\n ReceiptMain,\r\n LoadingContainer,\r\n MobileHeader,\r\n BackButton,\r\n H1,\r\n WhattsAppImg\r\n} from './styles'\r\n\r\nimport {\r\n Pickup,\r\n Delivery,\r\n AntiFraud\r\n} from './'\r\nimport { MainHeader } from '../main-header'\r\nimport WhattsAppImage from '../assets/whatsapp_icone.png'\r\nimport { WHATSAPP, WHATSAPP_NUMBER } from '../../config'\r\nimport { Dialog, Slide } from '@material-ui/core'\r\n\r\nfunction sleep(ms) {\r\n return new Promise(resolve => setTimeout(resolve, ms))\r\n}\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return \r\n \r\n {\r\n history.push(`/home${URLParameters}`)\r\n }}>\r\n \r\n \r\n {!isMobile && \r\n }\r\n {!loading.includes('receipt') && \r\n {WHATSAPP === 'true' &&\r\n handleWhattsApp()}>\r\n }\r\n {modalityId === 4 && deliveryAddress && notification && }\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n deliveryAddress: (state.main.receipt && state.main.receipt.deliveryAddress) || '',\r\n notification: (state.main.receiptStatus && state.main.receiptStatus.notification) || {},\r\n deliveryTime: (state.main.receipt && state.main.receipt.notification && state.main.receipt.notification.deliveryTime) || '',\r\n products: (state.main.receipt && state.main.receipt.list && state.main.receipt.summary && {\r\n list: state.main.receipt.list,\r\n summary: state.main.receipt.summary\r\n }) || { list: [], summary: {} },\r\n device: (state.main.params && state.main.params.device) || '',\r\n isPaid: (state.main.receipt && state.main.receipt.isPaid) || '',\r\n loading: state.loading.loading || [],\r\n modalityId: (state.main.receipt && state.main.receipt.modalityId) || 0,\r\n completed: (state.main.receiptStatus && state.main.receiptStatus.completed) || false,\r\n orderId: (state.main.order && state.main.order.id) || (state.main.order && state.main.order.finishData && state.main.order.finishData.vqpOrderId) || 0,\r\n receipt: state.main.receipt || null,\r\n earnedPoints: (state.main.receipt && state.main.receipt.earnedPoints) || '',\r\n storeName: (state.main.receipt && state.main.receipt.store && state.main.receipt.store.name) || '',\r\n storeAddress: (state.main.receipt && state.main.receipt.store && state.main.receipt.store.address) || '',\r\n logoStore: (state.main.receipt && state.main.receipt.store && state.main.receipt.store.logoUrl) || '',\r\n phone: (state.main.receipt && state.main.receipt.store && state.main.receipt.store.phone) || '',\r\n whattsapp: (state.main.receipt && state.main.receipt.store && state.main.receipt.store.whattsapp) || '',\r\n date: state.main.receipt && state.main.receipt.orderDate,\r\n requestNumber: (state.main.receipt && state.main.receipt.requestNumber) || -1,\r\n userName: state.user.name || '',\r\n cardBrand: (state.main.receipt && state.main.receipt.cardBrand) || '',\r\n cardNumber: (state.main.receipt && state.main.receipt.cardNumber) || '',\r\n scheduling: state.main.receipt && state.main.receipt.scheduling,\r\n cpf: state.main.receipt && state.main.receipt.cpf,\r\n URLParameters: (state.main.URLParameters) || '',\r\n antifraudCheck: (state.main.antifraudCheck) || false,\r\n antifraud: (state.main.order && state.main.order.antifraud) || {},\r\n\t\tfollowLink: (state.main.receiptStatus && state.main.receiptStatus.followLink) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchReceipt,\r\n fetchRequestNumber,\r\n fetchReceiptStatus,\r\n setCart,\r\n handleGTM,\r\n setReceipt,\r\n setReceiptNotification,\r\n fetchStatusAntiFraud,\r\n setAntiFraudConfirmation\r\n})\r\n\r\nexport const Receipt = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'receipt' })\r\n)(ReceiptPage))\r\n","import React from 'react'\r\nimport styled from 'styled-components'\r\n\r\nimport LoadingGIF from '../../assets/ipiranga-loading.gif'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../../components'\r\n\r\nimport {\r\n getCardBrandImageById,\r\n numberToCurrency,\r\n formatCpf\r\n} from '../../../infra/utils'\r\n\r\nconst Wrapper = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n min-width: 100%;\r\n max-width: 960px;\r\n margin-top: 0;\r\n\r\n > div {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-direction: column;\r\n background: #fff;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n flex: 1;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#CCC' } 0.063rem solid;\r\n padding: 1.25rem;\r\n\r\n > p {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#444' };\r\n font-size: 0.875rem;\r\n }\r\n }\r\n`;\r\n\r\nconst H2 = styled.h2`\r\n font-size: 1.25rem;\r\n line-height: 1.5rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: left;\r\n margin: 0;\r\n padding: 0;\r\n min-width: 100%;\r\n flex: 1;\r\n\r\n > span.name {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n > span.status_0 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n > span.status_1 {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEighthColor) || '#444' };\r\n }\r\n`\r\n\r\nconst H3 = styled.h3`\r\n font-size: 1.125rem;\r\n color: #000;\r\n margin: 0;\r\n padding: 0;\r\n margin-bottom: 1.25rem;\r\n min-width: 100%;\r\n`\r\n\r\nconst List = styled.ul`\r\n list-style: inside none;\r\n min-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n flex: 1;\r\n`\r\n\r\nconst ListItem = styled.li`\r\n min-width: 100%;\r\n margin-bottom: 0.625rem;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n color: #000;\r\n font-size: 1rem;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n > span {\r\n flex: 1;\r\n\r\n &:nth-child(1) {\r\n flex: 0;\r\n padding-right: 0.625rem;\r\n }\r\n\r\n &:nth-child(2) {\r\n > span {\r\n display: block;\r\n font-size: 0.75rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEleventhColor) || '#333' };\r\n }\r\n }\r\n\r\n &:nth-child(3) {\r\n text-align: right;\r\n }\r\n }\r\n`\r\n\r\nconst ImageContainer = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nconst Paragraph = styled.p` \r\n min-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n color: #7D7D7D;\r\n`\r\n\r\nconst Div = styled.div``\r\n\r\nconst Summary = styled.div`\r\n min-width: 100%;\r\n text-align: right;\r\n flex: 1;\r\n \r\n > p {\r\n margin: 0 auto;\r\n\r\n &.date {\r\n color: #757575;\r\n }\r\n\r\n &:nth-child(2) {\r\n margin-bottom: 0.938rem;\r\n }\r\n\r\n > strong {\r\n color: #000;\r\n }\r\n }\r\n`\r\n\r\nconst Footer = styled.footer` \r\n flex: 1;\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n padding-bottom: 0.938rem;\r\n padding-top: 1.25rem;\r\n\r\n > p {\r\n margin-bottom: 0.938rem;\r\n }\r\n`\r\n\r\nconst Button = styled.button`\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n margin: 0 1.25rem;\r\n font-size: 1.25rem;\r\n padding: 0.5rem 0.938rem;\r\n box-sizing: border-box;\r\n min-width: calc(100% - 2.5rem);\r\n max-width: calc(100% - 2.5rem);\r\n color: #fff;\r\n text-transform: uppercase;\r\n border-radius: 7px;\r\n font-weight: bold;\r\n`\r\n\r\nconst SelectedCardContainer = styled.p`\r\n margin: 0;\r\n width: 100%;\r\n max-width: 280px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n > span {\r\n font-size: 0.75rem;\r\n font-weight: bold;\r\n color: #686868;\r\n\r\n &:nth-child(2) {\r\n font-size: 0.875rem;\r\n font-weight: normal;\r\n }\r\n\r\n > img {\r\n margin-right: 0.313rem;\r\n }\r\n\r\n > a {\r\n margin-left: 0.313rem;\r\n\r\n > img {\r\n width: 0.938rem;\r\n height: auto;\r\n }\r\n }\r\n }\r\n`\r\n\r\nconst Span = styled.span``\r\n\r\nconst SelectedCard = ({ brand, number}) => {\r\n return \r\n \r\n { brand && number ? <>\r\n \r\n\r\n { number }\r\n : '' }\r\n \r\n \r\n}\r\n\r\nexport function Table(props) {\r\n const {\r\n userName,\r\n cpf,\r\n cardBrand,\r\n cardNumber,\r\n useCpf,\r\n status,\r\n orderDate,\r\n requestNumber,\r\n products,\r\n handleFinishOrder,\r\n cashChange,\r\n deliveryAddress,\r\n scheduling = {}\r\n } = props\r\n\r\n const {\r\n date,\r\n schedule\r\n } = scheduling\r\n\r\n const DiscountText = () => (\r\n products.summary.discount ?\r\n \r\n Desconto: {`R$ ${products.summary.discount.toFixed(2).replace('.', ',')}` }\r\n : null\r\n )\r\n\r\n return \r\n \r\n Subtotal {`${numberToCurrency(products.summary.subtotal)}`} \r\n Total: {`${numberToCurrency(products.summary.total)}`} \r\n }\r\n\r\n \r\n }\r\n \r\n}\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconAntiFraud = function SvgIconAntiFraud(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 160,\n height: 160,\n viewBox: \"0 0 160 160\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9761\",\n \"data-name\": \"Grupo 9761\",\n transform: \"translate(-578 -254.283)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9759\",\n \"data-name\": \"Grupo 9759\",\n transform: \"translate(620.339 276.165)\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Ret\\\\xE2ngulo_4270\",\n \"data-name\": \"Ret\\\\xE2ngulo 4270\",\n width: 76,\n height: 96,\n rx: 10,\n transform: \"translate(-0.339 15.118)\",\n fill: \"#fff\"\n }), /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Ret\\\\xE2ngulo_4271\",\n \"data-name\": \"Ret\\\\xE2ngulo 4271\",\n width: 38,\n height: 97,\n rx: 6,\n transform: \"translate(18.661 0.118)\",\n fill: \"#fff\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5955\",\n \"data-name\": \"Caminho 5955\",\n d: \"M79.519,20.771a10.98,10.98,0,0,0-3.638-.7c-1.418-.083-2.8-.065-4.268-.046-.637.009-1.279.015-1.934.015h-.75V13.858c0-.434-.009-.868-.015-1.306-.015-.985-.034-2,.034-3.018A3.3,3.3,0,0,0,67.145,6H29.174a3.11,3.11,0,0,0-1.857,3.31c.08,2.374.065,4.616.049,6.993-.006.988-.012,1.983-.012,2.993v.754H26.6c-.707,0-1.405-.006-2.094-.009-1.547-.009-3.01-.018-4.5.018A8.7,8.7,0,0,0,12.76,23.97a8.967,8.967,0,0,0-1.577,5.352v77.567c0,5.441,2.337,8.483,7.577,9.859a.844.844,0,0,1,.237.1H77.382a2.422,2.422,0,0,1,.341-.145l.1-.025a8.862,8.862,0,0,0,7.22-8.354c.031-.406.04-.788.04-1.17q-.014-38.7,0-77.413C85.078,25.328,83.261,22.393,79.519,20.771ZM32.692,11.392a1.71,1.71,0,0,1,1.261-.428q14.267.023,28.533.022a3.839,3.839,0,0,1,.461.037l.935.1V37.272H32.412l-.083-.967a7.029,7.029,0,0,1-.049-.721q.009-11.408-.015-22.81A1.882,1.882,0,0,1,32.692,11.392ZM80.085,29.937v77.016c0,3.489-1.415,4.911-4.886,4.911H20.964c-3.376,0-4.816-1.456-4.816-4.871V29.87c0-3.4,1.448-4.843,4.846-4.843h6.3l-.012,12.326-1.516-.006c-.477-.006-.938-.012-1.4.006a2.388,2.388,0,0,0-1.79.684,2.458,2.458,0,0,0,1.654,4.231c.351.025.661.022.966.022H71.019c.344,0,.686,0,1.024-.028a2.457,2.457,0,0,0-.1-4.9c-.458-.018-.922-.012-1.405-.006l-1.544.006V25.118h.75c.7,0,1.408-.009,2.106-.018,1.648-.022,3.352-.043,5.031.059A3.763,3.763,0,0,1,80.069,28.7c.025.289.022.61.018.93Z\",\n transform: \"translate(-10.374 -6)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5956\",\n \"data-name\": \"Caminho 5956\",\n d: \"M66.791,37.016q.018-7.142,0-14.28l.009-.112a2.716,2.716,0,0,0,0-.756,2.571,2.571,0,0,0-1.007-1.695A2.507,2.507,0,0,0,63.9,19.7l-.113.009H40.832q-11.593,0-23.176,0a3.038,3.038,0,0,0-.728-.009,2.543,2.543,0,0,0-1.711.983,2.62,2.62,0,0,0-.526,1.922c0,4.854,0,9.615.006,14.376a2.939,2.939,0,0,0-.006.768,2.577,2.577,0,0,0,.964,1.732,2.514,2.514,0,0,0,1.879.529c15.5,0,30.914,0,46.325-.006h.055l.052.006a2.364,2.364,0,0,0,.725,0A2.537,2.537,0,0,0,66.8,37.131ZM61.808,34.9H19.725V24.8H61.808Z\",\n transform: \"translate(-3.014 22.332)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5957\",\n \"data-name\": \"Caminho 5957\",\n d: \"M26.859,28.112c-3.153-.022-6.31-.022-9.419,0a2.96,2.96,0,0,0-.4,0,2.529,2.529,0,1,0,.345,5.047c1.067.012,2.068.009,3.069,0l1.514,0,4.963,0h.012a2.55,2.55,0,0,0,2.55-2.534v-.174a2.471,2.471,0,0,0-.821-1.695A2.541,2.541,0,0,0,26.859,28.112Z\",\n transform: \"translate(-2.992 39.909)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5958\",\n \"data-name\": \"Caminho 5958\",\n d: \"M23.361,33.152c3.135.025,6.251.025,9.323,0a3.254,3.254,0,0,0,.429,0,2.531,2.531,0,0,0-.37-5.047c-1.073-.009-2.1-.006-3.128,0l-1.549,0-1.623,0c-1,0-2-.006-3.007,0a3.146,3.146,0,0,0-.451,0,2.532,2.532,0,1,0,.376,5.05Z\",\n transform: \"translate(9.174 39.906)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5959\",\n \"data-name\": \"Caminho 5959\",\n d: \"M26.725,31.968c-3.128-.019-6.176-.016-9.23,0a3.736,3.736,0,0,0-.491,0,2.541,2.541,0,0,0-2.317,2.737,2.555,2.555,0,0,0,2.733,2.317c1.1.009,2.124.006,3.15,0l1.549-.006,1.592,0c.98.006,1.953.006,2.929,0a3,3,0,0,0,.554,0,2.539,2.539,0,1,0-.47-5.056Z\",\n transform: \"translate(-2.992 47.929)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5960\",\n \"data-name\": \"Caminho 5960\",\n d: \"M23.3,37.019c1.076.012,2.1.009,3.128,0l1.552,0,4.758.006A2.572,2.572,0,0,0,35.443,34.5a2.6,2.6,0,0,0-2.64-2.522c-3.175-.034-6.363-.031-9.513,0a2.389,2.389,0,0,0-.261,0,2.523,2.523,0,1,0,.271,5.038Z\",\n transform: \"translate(9.176 47.931)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5961\",\n \"data-name\": \"Caminho 5961\",\n d: \"M29.273,33.16c1.107.012,2.158.006,3.209,0l1.586,0,1.508,0c1,0,2.006.006,3.007,0a3.938,3.938,0,0,0,.46.006,2.534,2.534,0,0,0-.351-5.056c-3.144-.019-6.232-.019-9.317,0a3.033,3.033,0,0,0-.339,0,2.527,2.527,0,1,0,.236,5.047Z\",\n transform: \"translate(21.454 39.908)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5962\",\n \"data-name\": \"Caminho 5962\",\n d: \"M29.337,37.029c1.073,0,2.074,0,3.076,0l1.514,0h1.3c1.11,0,2.22.006,3.321-.009a2.877,2.877,0,0,0,.457.006,2.533,2.533,0,1,0-.351-5.053c-3.128-.019-6.244-.022-9.314,0-.127-.006-.2-.009-.274-.009h-.037a2.5,2.5,0,0,0-2.435,2.547c0,.068,0,.128.009.193A2.546,2.546,0,0,0,29.337,37.029Z\",\n transform: \"translate(21.48 47.925)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5963\",\n \"data-name\": \"Caminho 5963\",\n d: \"M27.087,35.51c-3.3-.056-6.63-.056-9.917,0a2.49,2.49,0,0,0-2.491,2.482,2.54,2.54,0,0,0,2.534,2.5h.037c1.076.012,2.124.009,3.175,0l1.586,0,1.437,0c1.175.006,2.348.012,3.526-.016H27a2.481,2.481,0,0,0,2.5-2.447A2.447,2.447,0,0,0,27.087,35.51Z\",\n transform: \"translate(-2.99 55.069)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5964\",\n \"data-name\": \"Caminho 5964\",\n d: \"M20.642,37.981l0,.106a2.5,2.5,0,0,0,2.625,2.407c1.1.006,2.152,0,3.2,0l1.586,0,1.645,0c1,0,1.993,0,2.992,0h.022l.121.006h.081a2.548,2.548,0,0,0,2.538-2.466v-.149a2.5,2.5,0,0,0-2.6-2.382c-3.219-.044-6.443-.044-9.625,0h-.149a2.464,2.464,0,0,0-2.435,2.478\",\n transform: \"translate(9.175 55.072)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5965\",\n \"data-name\": \"Caminho 5965\",\n d: \"M38.826,35.51c-3.259-.053-6.515-.056-9.727,0h-.233A2.412,2.412,0,0,0,26.6,38.029v.134a2.52,2.52,0,0,0,2.584,2.332c1.092.009,2.143,0,3.194,0l1.583,0,2.161,0c.858.006,1.72.006,2.584.006a2.553,2.553,0,0,0,2.659-2.423v-.267a2.441,2.441,0,0,0-2.538-2.3Z\",\n transform: \"translate(21.485 55.07)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5966\",\n \"data-name\": \"Caminho 5966\",\n d: \"M20.55,13.722a2.522,2.522,0,0,0,1.881.51c1.95,0,3.775,0,5.616,0l2.761,0,2.957,0c1.776,0,3.548,0,5.327,0a3,3,0,0,0,.709,0A2.563,2.563,0,0,0,42.06,11.38a2.558,2.558,0,0,0-2.849-2.214c-5.616,0-11.136,0-16.656.006-.143-.012-.264-.019-.373-.019a2.589,2.589,0,0,0-.277.012l-.137.016a2.549,2.549,0,0,0-1.219,4.54Z\",\n transform: \"translate(6.894 0.636)\",\n fill: \"#008780\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_5967\",\n \"data-name\": \"Caminho 5967\",\n d: \"M39.428,12.685c-5.722-.028-11.475-.028-17.15,0l-.174,0h-.009a2.511,2.511,0,0,0-2.513,2.5c0,.04,0,.09.006.14a2.551,2.551,0,0,0,.889,1.757,2.487,2.487,0,0,0,1.857.6c1.922,0,3.785,0,5.65,0l2.8,0,2.395,0q3.041,0,6.1-.006l.106.006a2.67,2.67,0,0,0,1.866-.709A2.481,2.481,0,0,0,42,15.22a1.918,1.918,0,0,0,0-.227A2.423,2.423,0,0,0,39.428,12.685Z\",\n transform: \"translate(6.935 7.846)\",\n fill: \"#008780\"\n })), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9760\",\n \"data-name\": \"Grupo 9760\",\n transform: \"translate(578 254)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Elipse_429\",\n \"data-name\": \"Elipse 429\",\n transform: \"translate(0 0.283)\",\n fill: \"none\",\n stroke: \"#e00017\",\n strokeWidth: 10\n }, /*#__PURE__*/React.createElement(\"circle\", {\n cx: 80,\n cy: 80,\n r: 80,\n stroke: \"none\"\n }), /*#__PURE__*/React.createElement(\"circle\", {\n cx: 80,\n cy: 80,\n r: 75,\n fill: \"none\"\n })), /*#__PURE__*/React.createElement(\"line\", {\n id: \"Linha_699\",\n \"data-name\": \"Linha 699\",\n x1: 106.997,\n y2: 106.997,\n transform: \"translate(26.499 26.885)\",\n fill: \"none\",\n stroke: \"#e00017\",\n strokeWidth: 10\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconAntiFraud, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_anti_fraud.1c4f0121.svg\";\nexport { ForwardRef as ReactComponent };","import styled, { css } from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n \r\n svg {\r\n g {\r\n path{\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const H2 = styled.h1`\r\n font-size: 1.5rem;\r\n line-height: 1.5rem;\r\n margin-bottom: .7rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n`\r\n\r\nexport const H3 = styled.h2`\r\n font-size: 1.25rem;\r\n line-height: 1.5rem;\r\n margin-bottom: 0;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n font-size: 1rem;\r\n text-align: center;\r\n`\r\n\r\nexport const Button = styled.button`\r\n align-items: center;\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n justify-content: center;\r\n color: #fff;\r\n padding: 1.5rem 1rem;\r\n border-radius: 15px;\r\n height: 3.5rem;\r\n position: relative;\r\n cursor: pointer;\r\n display: flex;\r\n margin: 0 1.5rem 1rem 1.5rem;\r\n min-width: calc(100% - 3rem);\r\n box-sizing: border-box;\r\n\r\n &.disabled {\r\n opacity: .5;\r\n cursor: default;\r\n }\r\n`\r\n\r\nexport const ButtonLabel = styled.span`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.25rem;\r\n margin: 0 2rem;\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0;\r\n }\r\n`\r\n\r\nconst message = css`\r\n padding: .5rem .85rem;\r\n margin: 0 0 1.5rem 0; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n max-height: 7rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1rem;\r\n\r\n span {\r\n max-width: 85%;\r\n position: relative;\r\n max-height: calc(1rem * 3);\r\n overflow: hidden;\r\n padding-right: 1rem;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n`\r\n\r\nexport const ErrorMessage = styled.div`\r\n ${message}; \r\n\r\n svg {\r\n background-color: #fd5b5d;\r\n }\r\n`\r\n","import React, { useState } from 'react'\r\nimport { Checkbox, FormControlLabel, Typography } from '@material-ui/core'\r\nimport { withStyles } from '@material-ui/core/styles'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { ReactComponent as IconClose } from '../../assets/icons/icon_close.svg'\r\nimport { ReactComponent as AntiFraudIcon } from '../../assets/icons/icon_anti_fraud.svg'\r\nimport THEME from '../../../theme.json'\r\n\r\nimport {\r\n Wrapper,\r\n H2,\r\n H3,\r\n Paragraph,\r\n ButtonLabel,\r\n Button,\r\n ErrorMessage\r\n} from './styles'\r\n\r\nconst GreenCheckbox = withStyles({\r\n root: {\r\n color: THEME.main.general.primaryColor,\r\n '&$checked': {\r\n color: THEME.main.general.primaryColor,\r\n },\r\n },\r\n checked: {},\r\n})((props) => \r\n {errorMessage &&\r\n \r\n {errorMessage}\r\n \r\n }\r\n Não aceite cobranças
\r\n Seu pedido já foi pago pelo
site com sucesso \r\n Li e entendi a dica de segurança. }\r\n />\r\n { if (checked) { handleAntiFraudConfirmation() } }}\r\n className={!checked ? 'disabled' : ''}\r\n >\r\n Continuar \r\n \r\n \r\n}\r\n\r\nAntiFraud.propTypes = {\r\n\thandleAntiFraudConfirmation: PropTypes.func,\r\n\terrorMessage: PropTypes.string\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const ReceiptSumaryContainer = styled.div`\r\n grid-area: summary;\r\n width: 100%;\r\n box-sizing: border-box;\r\n box-sizing: border-box;\r\n\tpadding: 1.5rem;\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n padding: 0 0 0 1.5rem;\r\n }\r\n\r\n #cart-content {\r\n margin: 2rem 0 0 0;\r\n \r\n #notification {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const ReceiptSummaryStore = styled.div`\r\n display: none;\r\n align-items: center;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 0 0 1rem 0;\r\n margin: 0 0 1rem 0;\r\n\r\n @media (min-width: 60rem) {\r\n display: flex;\r\n }\r\n`\r\n\r\nexport const ReceiptSummaryContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n\t> div {\r\n\t\t> ul {\r\n\t\t\tpadding: 1.5rem 0 0;\r\n\t\t}\r\n\t}\r\n\r\n @media (min-width: 40rem) {\r\n overflow: auto;\r\n\r\n\t\t> div {\r\n\t\t\t> ul {\r\n\t\t\t\tpadding: 1.5rem 0 0;\r\n\t\t\t}\r\n\t\t}\r\n\r\n &::-webkit-scrollbar {\r\n width: 1.5rem;\r\n }\r\n\r\n &::-webkit-scrollbar-thumb {\r\n border-left: 1rem solid rgba(0, 0, 0, 0);\r\n background-clip: padding-box;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n }\r\n\r\n &::-webkit-scrollbar-button {\r\n width: 0;\r\n height: 0;\r\n display: none;\r\n }\r\n\r\n &::-webkit-scrollbar-corner {\r\n background-color: transparent;\r\n }\r\n }\r\n`\r\n\r\nexport const StoreContainer = styled.label`\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1 1 70%;\r\n`\r\n\r\nexport const StoreLabel = styled.label`\r\n font-weight: 600;\r\n font-size: .875rem;\r\n line-height: 1.188rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n`\r\n\r\nexport const StoreName = styled.h3`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' }; \r\n margin: 0;\r\n`\r\n\r\nexport const StoreLogo = styled.img`\r\n flex: 0 1 30%;\r\n max-width: 4rem;\r\n`\r\n","import React from 'react'\r\n\r\nimport { OrderStatus } from './../'\r\nimport { OrderSummary } from '../../'\r\n\r\nimport {\r\n ReceiptSumaryContainer,\r\n ReceiptSummaryStore,\r\n ReceiptSummaryContent,\r\n StoreContainer,\r\n StoreLabel,\r\n StoreLogo,\r\n StoreName,\r\n} from './styles'\r\n\r\nexport function Summary({\r\n storeLogo,\r\n products,\r\n storeName,\r\n deliveryAddress,\r\n cardBrand,\r\n cardNumber,\r\n cpf,\r\n hasCpf,\r\n modalityId,\r\n scheduling,\r\n URLParameters,\r\n earnedPoints,\r\n ...propStatus\r\n}) {\r\n return (\r\n \r\n \r\n \r\n Seu pedido em: \r\n {storeName} \r\n \r\n \r\n \r\n {!scheduling && \r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\n\r\nimport { device } from '../../../../domain/enum/responsive'\r\nimport CheckedIconSuccess from '../../../assets/icon_checked_success.png'\r\nimport OnlyCheckIcon from '../../../assets/icon_only_check.svg'\r\nimport UncheckedIcon from '../../../assets/icon_unchecked.png'\r\nimport Loading from './../../../assets/receipt_loading.gif'\r\n\r\nexport const OrderStatusTitle = styled.h2`\r\n font-weight: 7000;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0 0 2rem 0;\r\n`\r\n\r\nexport const ProgressBar = styled.ul`\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-direction: row;\r\n min-width: 100%;\r\n max-width: 100%;\r\n list-style: inside none;\r\n padding: 0;\r\n margin: 0;\r\n margin-bottom: 3rem;\r\n\r\n\r\n @media ${device.desktop} {\r\n max-width: unset;\r\n min-width: unset;\r\n margin-bottom: 3.125rem;\r\n }\r\n`\r\n\r\nexport const ProgressBarItem = styled.li`\r\n background: #B1B1B1;\r\n flex: 1;\r\n max-width: 24%;\r\n min-width: 24%;\r\n min-height: .313rem;\r\n max-height: .313rem;\r\n border-radius: .125rem;\r\n padding: 0;\r\n margin: 0;\r\n\r\n &.active {\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#999'};\r\n }\r\n\r\n @media ${device.desktop} {\r\n max-height: .375rem;\r\n min-height: .375rem;\r\n border-radius: 4px;\r\n }\r\n`\r\n\r\nexport const StatusStepper = styled.ul`\r\n position: relative;\r\n list-style: none;\r\n padding: 0 0 2rem;\r\n box-sizing: border-box;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n margin: 0;\r\n\r\n * {\r\n box-sizing: border-box;\r\n }\r\n`\r\n\r\nexport const StatusTitle = styled.span` \r\n font-weight: 600;\r\n font-size: 1rem;\r\n line-height: 1.375rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n margin: 0 0 0 2rem;\r\n`\r\n\r\nexport const StepperItemBorder = styled.span`\r\n border-left: 2px solid #E2E2E2;\r\n position: absolute;\r\n top: 20px;\r\n bottom: -2px;\r\n left: 10px;\r\n`\r\n\r\nexport const StatusStepperItem = styled.li`\r\n position: relative;\r\n padding: 0 0 3rem;\r\n margin: 0;\r\n display: flex;\r\n flex-direction: column;\r\n max-height: 4.375rem;\r\n /* margin: 0 0 0 .5rem; */\r\n\r\n &:before {\r\n content: '';\r\n width: 8px;\r\n height: 8px;\r\n background: #B1B1B1;\r\n border-radius: 50%;\r\n position: absolute;\r\n left: 7.35px;\r\n top: 8px;\r\n }\r\n\r\n &:last-child {\r\n border: 0;\r\n padding-bottom: 0;\r\n }\r\n\r\n &.active { \r\n &:before {\r\n content: '';\r\n width: 24px;\r\n height: 24px;\r\n background: #3ABE71;\r\n left: 0;\r\n top: 0;\r\n background-image: url('${OnlyCheckIcon}');\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n }\r\n\r\n ${StepperItemBorder} {\r\n border-left: 2px solid #3ABE71;\r\n }\r\n\r\n ${StatusTitle} {\r\n color: #3ABE71;\r\n }\r\n\r\n ${StepperItemBorder} {\r\n top: 30px;\r\n left: .65rem;\r\n }\r\n\r\n &.next-active {\r\n ${StepperItemBorder} {\r\n bottom: 5px;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const StatusHour = styled.span` \r\n font-weight: 600;\r\n font-size: .875rem;\r\n line-height: 1.188rem;\r\n margin: 0 0 0 2rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n`\r\n\r\nexport const Stepper = styled.div`\r\n min-width: 280px;\r\n max-width: 280px;\r\n`\r\n\r\nexport const StepperItem = styled.div`\r\n background: ${ props => {\r\n if(props.status){\r\n return `url('${ Loading }') no-repeat 0 .313rem;`\r\n }\r\n\r\n return `url('${ UncheckedIcon }') no-repeat 0 .313rem;`\r\n }};\r\n min-width: 280px;\r\n max-width: 280px;\r\n line-height: 2rem;\r\n min-height: 2rem;\r\n padding-left: 1.875rem;\r\n box-sizing: border-box;\r\n position: relative;\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n background-size: 1.5rem;\r\n padding-bottom: 2rem;\r\n color: ${ props => {\r\n if(props.status){\r\n return `#B1B1B1`\r\n }\r\n\r\n return `#B1B1B1`\r\n }};\r\n font-size: ${ props => {\r\n if(props.status){\r\n return `18px;`\r\n }\r\n\r\n return `16px;`\r\n }};\r\n font-weight: bold;\r\n \r\n @media ${ device.desktop } {\r\n font-size: ${ props => {\r\n if(props.status){\r\n return `18px;`\r\n }\r\n \r\n return `16px;`\r\n }};\r\n padding-top: 0;\r\n padding-bottom: 2rem;\r\n }\r\n\r\n &.active {\r\n background-image: url('${ CheckedIconSuccess }');\r\n background-size: 1.25rem;\r\n padding-bottom: 2rem;\r\n color: ${ props => (props.theme && props.theme.colors && props.theme.colors.positive) || '#999' };\r\n font-weight: bold;\r\n\r\n &:before {\r\n content: '';\r\n position: absolute;\r\n left: 9px;\r\n top: 1.75rem;\r\n border-left: ${ props => (props.theme && props.theme.colors && props.theme.colors.positive) || '#999' } .120rem solid;\r\n height: 25px;\r\n width: .063rem;\r\n \r\n @media ${ device.desktop } {\r\n height: 2rem;\r\n }\r\n }\r\n }\r\n\r\n &:before {\r\n content: '';\r\n position: absolute;\r\n left: .7rem;\r\n top: 2.1rem;\r\n border-left: #E2E2E2 .063rem solid;\r\n height: 2rem;\r\n width: .063rem;\r\n }\r\n\r\n &:last-child {\r\n padding-bottom: 0;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n }\r\n\r\n > span {\r\n display: inline-block;\r\n font-size: .875rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n font-weight: normal;\r\n padding-left: .313rem;\r\n }\r\n`\r\n","import React from 'react'\r\n\r\nimport {\r\n ProgressBar,\r\n ProgressBarItem,\r\n OrderStatusTitle,\r\n Stepper,\r\n StepperItem\r\n} from './styles'\r\n\r\nexport function OrderStatus({\r\n ...propStatus\r\n}) {\r\n const {\r\n statusProgress,\r\n status0,\r\n status1,\r\n status2,\r\n status3,\r\n statusDate0,\r\n statusDate1,\r\n statusDate2,\r\n statusDate3\r\n } = propStatus\r\n\r\n return (\r\n <>\r\n Status da Compra \r\n \r\n \r\n\r\n \r\n \r\n Recebido com sucesso\r\n {status0 && {statusDate0}}\r\n \r\n \r\n Em andamento\r\n {status1 && {statusDate1}}\r\n \r\n \r\n Saiu para entrega\r\n {status2 && {statusDate2}}\r\n \r\n \r\n Chegou! Bom apetite!\r\n {status3 && {statusDate3}}\r\n \r\n \r\n \r\n )\r\n}\r\n\r\nOrderStatus.propTypes = {\r\n\t\r\n}\r\n","import React from 'react'\r\n\r\nimport { selectMonth } from '../../../domain/helpers/SelectedMonth'\r\n\r\nimport {\r\n formatCpf,\r\n getCardBrandImageById,\r\n getCardBrandImageByPaymentTypeAndId,\r\n numberToCurrency\r\n} from '../../../infra/utils'\r\nimport Selo from '../../assets/icone_menu_fidelidade.png'\r\n\r\nimport history from '../../../history'\r\n\r\nimport { ReactComponent as LocationIcon } from '../../assets/icons/icon_checkout_address.svg'\r\nimport { ReactComponent as IconPhone } from '../../assets/icons/icon_phone.svg'\r\nimport { ReactComponent as IconTyping } from '../../assets/icons/icon_typing.svg'\r\n\r\nimport {\r\n Container,\r\n OrderSummaryTitle,\r\n ItemsList,\r\n Item,\r\n ItemDetails,\r\n ItemName,\r\n ItemDescription,\r\n ItemPrice,\r\n ItemAmount,\r\n TotalsWrapper,\r\n TotalsItem,\r\n SubTotalLabel,\r\n SubTotalValue,\r\n DeliveryFeeLabel,\r\n DeliveryFeeValue,\r\n TotalLabel,\r\n TotalValue,\r\n DeliveryAddressWrapper,\r\n DeliveryAddressLabel,\r\n DeliveryAddress,\r\n DeliveryPaymentWrapper,\r\n DeliveryPaymentCard,\r\n ActionButton,\r\n CardImage,\r\n Help,\r\n HelpLabel,\r\n HelpButton,\r\n DeliveryEarnedPointsWrapper,\r\n DeliveryEarnedPointsLabel,\r\n DeliveryEarnedPoints\r\n} from './styles'\r\nimport { HAS_CASHBACK, HAS_LOYALTY } from '../../../config'\r\nimport { CashbackPoints } from '../Delivery'\r\n\r\nconst SubtotalText = ({ subtotal }) => (<>\r\n Subtotal: \r\n {numberToCurrency(subtotal)} \r\n)\r\n\r\nconst DiscountText = ({ discount }) => (<>\r\n {discount ? <>Desconto: \r\n {numberToCurrency(discount)} :\r\n null}\r\n)\r\n\r\nconst DeliveryFeeText = ({ deliveryFee, modalityId }) => (<>\r\n {modalityId === 4 ? 'Taxa de entrega' : 'Taxa de retirada'}: \r\n {deliveryFee ? `${numberToCurrency(deliveryFee)}` : 'Grátis'} \r\n)\r\n\r\nconst TotalText = ({ total }) => (<>\r\n TOTAL: \r\n {numberToCurrency(total)} \r\n)\r\n\r\nconst SelectedCard = ({ brand, number, payOnDelivery }) => {\r\n return <>\r\n {brand && number && !payOnDelivery ? <>\r\n \r\n Resumo do Pedido \r\n {\r\n products && products.list && products.list.map((item, index) => {\r\n const {\r\n quantity,\r\n product,\r\n value,\r\n description,\r\n id\r\n } = item\r\n\r\n const key = `checkout-listitem-${index}-${id}`\r\n\r\n return \r\n - \r\n
\r\n {product} \r\n {`${description}`} \r\n {numberToCurrency(value)} \r\n \r\n {quantity} \r\n \r\n \r\n })\r\n }\r\n {products.summary && \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n }\r\n {scheduling && \r\n Data da Entrega \r\n \r\n {scheduling}\r\n \r\n }\r\n \r\n {\r\n modalityId === 4 ?\r\n 'Local de entrega' :\r\n 'Local de retirada'}\r\n \r\n \r\n \r\n \r\n \r\n Forma de Pagamento \r\n \r\n \r\n \r\n {(hasLoyalty && earnedPoints > 0) && (\r\n \r\n Pontos Ganhos \r\n \r\n \r\n \r\n )\r\n }\r\n {(hasCashback && earnedPoints > 0) && (\r\n \r\n Cashback Ganho \r\n \r\n \r\n \r\n )\r\n }\r\n \r\n CPF na nota \r\n \r\n {hasCpf ? formatCpf(cpf) : '000.000.000-00'}\r\n \r\n \r\n {(phone || whatsapp) && \r\n Precisa de ajuda? \r\n {whatsapp && openWhattsApp(whatsapp)}>\r\n Fale conosco\r\n }\r\n {phone && {\r\n if (setOverlay) {\r\n setOverlay(true)\r\n }\r\n }}>\r\n Ligar para loja\r\n }\r\n }\r\n {\r\n if (handleTrackOrder) {\r\n handleTrackOrder()\r\n\r\n return\r\n }\r\n\r\n history.push(`/${URLParameters}`)\r\n }}>{buttonName} \r\n \r\n )\r\n}\r\n","import styled from 'styled-components'\r\nimport { OrderSummary } from '../../receipt/OrderSummary'\r\nimport { ActionButton, DeliveryAddressWrapper, DeliveryPaymentWrapper, Item, OrderSummaryTitle, TotalsWrapper } from '../../receipt/OrderSummary/styles'\r\nimport {\r\n Button as DefaultButton\r\n} from '../../components'\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n align-items: flex-end;\r\n flex-wrap: wrap;\r\n align-items: flex-start;\r\n flex-direction: column;\r\n min-width: 100%;\r\n\tbackground: #fff;\r\n\r\n #cart {\r\n padding: 1.25rem 1rem;\r\n\r\n @media (min-width: 60rem) {\r\n padding: 2rem 1.5rem;\r\n }\r\n\r\n #notification {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const Header = styled.header`\r\n display: flex;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n border-bottom: .125rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 1.25rem;\r\n\tmin-width: calc(100% - 2.5rem);\r\n\r\n @media (min-width: 60rem) {\r\n padding: 2rem 1.5rem;\r\n min-width: 100%;\r\n min-width: 100%;\r\n }\r\n`\r\n\r\nexport const StoreOrder = styled.div`\r\n display: flex;\r\n align-items: center;\r\n flex: 1 0 100%;\r\n margin: 0 0 .5rem 0;\r\n`\r\n\r\nexport const StoreOrderLogo = styled.div`\r\n border: .125rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n padding: 0;\r\n border-radius: 50%;\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n min-width: 3.5rem;\r\n min-height: 3.5rem;\r\n max-width: 3.5rem;\r\n max-height: 3.5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 1rem 0 0;\r\n overflow: hidden;\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n }\r\n\r\n svg {\r\n width: calc(100% - .65rem);\r\n }\r\n`\r\n\r\nexport const StoreOrderDetails = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n`\r\n\r\nexport const StoreOrderName = styled.div`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n }\r\n`\r\n\r\nexport const StoreOrderDate = styled.div`\r\n font-weight: 400;\r\n font-size: .875rem;\r\n line-height: .875rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n }\r\n`\r\n\r\nexport const StoreOrderModality = styled.div`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0 .5rem 0 0;\r\n padding: 0 .5rem 0 0;\r\n border-right: 2px solid${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.25rem; \r\n }\r\n`\r\n\r\nexport const StoreOrderStatus = styled.div`\r\n font-weight: 700;\r\n font-size: 1rem;\r\n line-height: 1rem;\r\n\r\n &.inprogress{\r\n color: #00892E;\r\n }\r\n\r\n &.finish{\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.25rem;\r\n }\r\n`\r\n\r\nexport const Help = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n flex-wrap: wrap;\r\n padding: 1.25rem 1.25rem 0;\r\n\tmin-width: 100%;\r\n\tbox-sizing: border-box;\r\n\r\n @media (min-width: 60rem) {\r\n padding: 1.25rem 1.5rem 0; \r\n width: 100%;\r\n }\r\n`\r\n\r\nexport const HelpLabel = styled.label`\r\n font-weight: 700;\r\n font-size: .875rem;\r\n line-height: 1.188.rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0 0 1rem 0;\r\n width: 100%;\r\n`\r\n\r\nexport const HelpButton = styled.a`\r\n border: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: 7px;\r\n font-weight: 400;\r\n font-size: .75rem;\r\n line-height: 1.188.rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n flex: 1 1 calc(50% - .5rem);\r\n max-width: calc(50% - .5rem);\r\n height: 2.5rem;\r\n background-color: #fff;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: .5rem .25rem;\r\n\r\n &:hover {\r\n background-color: #f7f7f7;\r\n }\r\n\r\n &:first-of-type {\r\n margin: 0 1rem 0 0;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n font-size: .875rem;\r\n }\r\n\r\n svg {\r\n margin: 0 0 0 .5rem;\r\n\r\n path {\r\n fill: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n stroke: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const CustomOrderSummary = styled(OrderSummary)`\r\n ${OrderSummaryTitle} {\r\n display: none;\r\n }\r\n\r\n ${Item} {\r\n padding: 0;\r\n margin: 0;\r\n\r\n &:not(:last-of-type) {\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 0 0 1.5rem 0;\r\n }\r\n\r\n &:first-of-type {\r\n padding: 1.5rem 0;\r\n\r\n\t\t\t@media (min-width: 40rem) {\r\n\t\t\t\tpadding: 1.5rem 1.25rem;\r\n\t\t\t}\r\n }\r\n }\r\n\r\n ${TotalsWrapper} {\r\n padding: 1.25rem;\r\n }\r\n\r\n ${ActionButton} {\r\n margin: 1.25rem !important;\r\n }\r\n\r\n ${DeliveryAddressWrapper}, ${DeliveryPaymentWrapper} {\r\n display: flex !important;\r\n padding: 1.5rem 1.25rem !important;\r\n }\r\n`\r\nexport const MobileHeader = styled.div`\r\n width: 100%\r\n`\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n\r\n @media (min-width: 40rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const DialogWrapper = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n min-width: 100%;\r\n max-width: 100%;\r\n margin: 0;\r\n padding: 1rem;\r\n box-sizing: border-box;\r\n background: #fff;\r\n border-radius: 1rem;\r\n bottom: 0 !important;\r\n top: auto !important;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000' };\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n color: ${props => props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor };\r\n text-align: left;\r\n margin: 0 .8rem;\r\n padding: 0;\r\n`\r\n\r\nexport const H3 = styled.h3`\r\n text-transform: uppercase;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: ${props => props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor };\r\n text-align: left;\r\n min-width: 100%;\r\n margin: 0 0 1.5rem 0;\r\n padding: 0;\r\n`\r\n\r\nexport const Button = styled(DefaultButton)`\r\n flex: 0;\r\n max-height: 3rem;\r\n min-height: 3rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n`\r\n\r\nexport const Paragraph = styled.div`\r\n color: ${props => props.theme.main && props.theme.main.general && props.theme.main.general.blue01Color };\r\n min-width: 100%;\r\n max-width: 100%;\r\n text-align: left;\r\n font-size: 1rem;\r\n margin: 0;\r\n padding: 0;\r\n\r\n &.quick-description {\r\n font-size: 1rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n &.description {\r\n font-size: .8rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n &.created-at {\r\n font-size: .8rem;\r\n }\r\n\r\n &.expires-at {\r\n font-size: .8rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n &.highlight {\r\n font-size: 1.4rem;\r\n color: ${props => props.theme.main && props.theme.main.general && props.theme.main.general.blue06Color };\r\n font-weight: bold;\r\n }\r\n`\r\n\r\nexport const Title = styled.div`\r\n display : flex;\r\n flex: 1;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n min-width: 100%;\r\n max-width: 100%;\r\n margin-bottom: 1rem;\r\n\r\n svg {\r\n width: 1.425rem;\r\n height: 1.425rem;\r\n align-self: center;\r\n cursor: pointer;\r\n\r\n g {\r\n stroke: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n\r\n path {\r\n fill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n padding: 1rem;\r\n background: none;\r\n border: 0 none;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n text-align: end;\r\n position: absolute;\r\n\tright: 0;\r\n\ttop: 0;\r\n\tfont-size: 1.5rem;\r\n\tz-index: 1;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tright: -1rem;\r\n\t\ttop: -3.5rem;\r\n\t}\r\n\r\n @media (max-width: 40rem) {\r\n\t\tdisplay: none;\r\n\t}\r\n`\r\n\r\n","import React, { useState } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Dialog, DialogContent } from '@material-ui/core'\r\nimport { makeStyles } from '@material-ui/core/styles'\r\nimport { ReactComponent as IconPhone } from '../../assets/icons/icon_phone.svg'\r\nimport { ReactComponent as IconTyping } from '../../assets/icons/icon_typing.svg'\r\n\r\nimport {\r\n CustomIcon,\r\n DefaultImage as Image\r\n} from '../../components'\r\n\r\nimport {\r\n Wrapper,\r\n Header,\r\n StoreOrder,\r\n StoreOrderLogo,\r\n StoreOrderDetails,\r\n StoreOrderName,\r\n StoreOrderDate,\r\n StoreOrderModality,\r\n StoreOrderStatus,\r\n Help,\r\n HelpButton,\r\n HelpLabel,\r\n CustomOrderSummary,\r\n MobileHeader,\r\n H1,\r\n BackButton,\r\n DialogWrapper,\r\n CloseButton,\r\n H2,\r\n H3,\r\n Title,\r\n Button\r\n} from './styles'\r\nimport { maskPhone } from '../../../domain/helpers'\r\n\r\nconst useStyles = makeStyles({\r\n paper: {\r\n margin: 0,\r\n position: 'absolute',\r\n bottom: '-10px'\r\n },\r\n paperWidthMd: {\r\n width: '100%',\r\n },\r\n paperWidthMdMobile: {\r\n width: '400px'\r\n }\r\n});\r\n\r\nexport function Summary(props) {\r\n const {\r\n storeName,\r\n storeLogo,\r\n deliveryAddress,\r\n pickupAddress,\r\n date,\r\n modalityId,\r\n inProgress,\r\n phone,\r\n whatsapp,\r\n products,\r\n cpf,\r\n hasCpf,\r\n cardBrand,\r\n cardNumber,\r\n handleTrackOrder,\r\n screenMobile,\r\n\t\tpayOnDelivery\r\n } = props\r\n const classes = useStyles();\r\n const [overlay, setOverlay] = useState(false)\r\n const maxWidth = 'md'\r\n\r\n\tconst openWhattsApp = (whatsapp) => {\r\n\t\twindow.open(`https://api.whatsapp.com/send?phone=${whatsapp}`);\r\n\t}\r\n\r\n return (\r\n \r\n \r\n {\r\n window.history.back()\r\n }}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {storeName} \r\n {date} \r\n \r\n \r\n {modalityId === 4 ? 'Delivery' : 'Retirada'} \r\n {inProgress ? Em andamento : Finalizado }\r\n \r\n \r\n {(whatsapp || phone) && !screenMobile && Precisa de ajuda? }\r\n {whatsapp && !screenMobile ? openWhattsApp(whatsapp)}>\r\n Fale conosco\r\n : <>}\r\n {phone && !screenMobile ? setOverlay(true)}>\r\n Ligar para loja\r\n : <>}\r\n \r\n setOverlay(false)}\r\n aria-labelledby={`phone-dialog-title`}\r\n aria-describedby={`phone-dialog-description`}\r\n maxWidth={maxWidth}\r\n classes={screenMobile ? { paper: classes.paper, paperWidthMd: classes.paperWidthMd } : { paperWidthMd: classes.paperWidthMdMobile }}\r\n className='phone-detail'\r\n PaperProps={{ style: { borderRadius: !screenMobile ? '16px' : '10px' } }}\r\n >\r\n \r\n \r\n {\r\n setOverlay(false)\r\n }}>\r\n \r\n\r\n \r\n <IconPhone />\r\n <H2>Ligar para loja</H2>\r\n \r\n\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nSummary.propTypes = {\r\n storeName: PropTypes.string,\r\n storeLogo: PropTypes.string,\r\n deliveryAddress: PropTypes.shape({}),\r\n pickupAddress: PropTypes.shape({}),\r\n date: PropTypes.string,\r\n modalityId: PropTypes.number,\r\n inProgress: PropTypes.bool,\r\n phone: PropTypes.string,\r\n whatsapp: PropTypes.string,\r\n products: PropTypes.arrayOf(PropTypes.shape({})),\r\n cpf: PropTypes.string,\r\n hasCpf: PropTypes.bool,\r\n cardBrand: PropTypes.string,\r\n cardNumber: PropTypes.string,\r\n handleTrackOrder: PropTypes.func\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n display: flex;\r\n min-height: 100%;\r\n\t\tflex: 1;\r\n\t\tflex-direction: column;\r\n\t\tmax-width: 100%;\r\n\t\tmin-width: 100%;\r\n\r\n > main {\r\n background: #fff;\r\n min-height: 100%;\r\n max-height: 100%;\r\n box-sizing: border-box;\r\n position: relative;\r\n\t\t\tflex: 1;\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: unset;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n > div {\r\n > main {\r\n margin: 0px auto;\r\n min-height: calc(100% - 5.625rem);\r\n max-height: calc(100% - 5.625rem);\r\n box-sizing: unset;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.secondaryColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\tflex: 0;\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n font-weight: 700;\r\n font-size: .8rem;\r\n line-height: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: .063rem solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' };\r\n padding: 1.5rem 0 .5rem 0;\r\n margin: 0 1rem 1rem;\r\n text-transform: uppercase;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n padding: 2.25rem 0 .5rem 0;\r\n margin: 0 2rem 2rem;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n\r\n @media (min-width: 40rem) {\r\n display: none;\r\n }\r\n`\r\n","import React, {\r\n useContext,\r\n useEffect,\r\n useState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { Helmet } from 'react-helmet'\r\nimport { Dialog } from '@material-ui/core'\r\n\r\nimport {\r\n useStoreSettings,\r\n useLayout,\r\n useSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n logout,\r\n setUserHistory,\r\n setModality,\r\n setReceipt\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n useDeviceLayout\r\n} from '../hooks'\r\n\r\nimport {\r\n cart,\r\n order\r\n} from '../../state'\r\n\r\nimport {\r\n pipe,\r\n GetContent,\r\n caculateProductsQuantity\r\n} from '../../domain/helpers'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n DefaultImage as Image,\r\n CustomIcon\r\n} from '../components'\r\n\r\nimport {\r\n MainHeader,\r\n PageContainer,\r\n PageContainerHeader,\r\n PageContainerMain,\r\n PageContainerSide,\r\n Cart,\r\n CartContainer,\r\n Skeleton,\r\n Navigation,\r\n} from '..'\r\n\r\nimport { Content } from './content'\r\nimport { EmptyContent } from './empty-content'\r\nimport { Summary } from './summary'\r\n\r\nimport {\r\n LoadingWrapper,\r\n H2,\r\n Wrapper,\r\n H1,\r\n BackButton\r\n} from './styles'\r\n\r\nconst Context = React.createContext({})\r\n\r\nexport function PlacedOrdersPage(props) {\r\n const {\r\n accessToken,\r\n addressDelivery,\r\n cartProducts,\r\n fetchOrderHistory,\r\n loading,\r\n order,\r\n orderCpf,\r\n orderHistory,\r\n setOrder,\r\n storeName,\r\n theme,\r\n address,\r\n userHistory,\r\n userName,\r\n match,\r\n setUserHistory,\r\n storeImg,\r\n modalityId,\r\n setModality,\r\n URLParameters\r\n } = props\r\n\r\n const storeImage = theme.headerImage\r\n const storeLogo = theme.logoImage\r\n\r\n const {\r\n layoutMode,\r\n layoutModeEnum,\r\n handleLayoutMode\r\n } = useLayout()\r\n\r\n const {\r\n sidebarContent,\r\n sidebarOpened,\r\n sidebarContentEnum,\r\n handleSidebarContent,\r\n handleSidebarOpened\r\n } = useSidebar()\r\n\r\n const context = useContext(Context)\r\n\r\n const {\r\n url,\r\n title,\r\n description\r\n } = useStoreSettings()\r\n\r\n const isMobile = useDeviceLayout({\r\n isMobile: true\r\n })\r\n\r\n const stateOrderId = order && order.id\r\n const orderId = match.params && Number(match.params.orderId)\r\n const { sections } = useContext(Context)\r\n const [visibleSignIn, setVisibleSignIn] = useState(false)\r\n const [viewCards, setViewCards] = useState(false)\r\n const [visiblePlacedOrder, setVisiblePlacedOrder] = useState(false)\r\n\r\n const { back } = userHistory\r\n const { orders = [] } = orderHistory\r\n\r\n const inProgressOrders = orders && orders.filter(filteredItem => filteredItem.inProgress === true)\r\n const finishedOrders = orders && orders.filter(filteredItem => filteredItem.inProgress === false)\r\n\r\n const inProgressOrdersSection = sections && sections.filter(item => item.id === 'in-progress-orders')[0]\r\n const finishedOrdersSection = sections && sections.filter(item => item.id === 'finished-orders')[0]\r\n\r\n const inProgressOrdersSelectedSectionTitle = inProgressOrdersSection.title\r\n\r\n const finishedOrdersSelectedSectionName = finishedOrders && finishedOrders.length ? 'main-content' : 'empty-content'\r\n const finishedOrdersSelectedSectionTitle = finishedOrdersSection.title\r\n const finishedOrdersSelectedSection = finishedOrdersSection.content.filter(item => item.id === finishedOrdersSelectedSectionName)[0]\r\n\r\n useEffect(() => {\r\n\t\tsetOrder(null)\r\n setTimeout(() => fetchOrderHistory(), 500)\r\n }, [\r\n\t\tsetOrder,\r\n fetchOrderHistory\r\n ])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (isMobile && orderId > 0) {\r\n\t\t\tif (orderId && orderId !== stateOrderId) {\r\n\t\t\t\tconst selectedOrder = orderHistory && orderHistory.orders && orderHistory.orders.filter(item => item.id === orderId)[0]\r\n\r\n\t\t\t\tsetOrder({\r\n\t\t\t\t\tid: orderId,\r\n\t\t\t\t\t...selectedOrder\r\n\t\t\t\t})\r\n\t\t\t}\r\n\t\t\t\r\n\t\t\tsetVisiblePlacedOrder(true)\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\t}, [\r\n\t\tstateOrderId,\r\n\t\torderId, \r\n\t\tisMobile, \r\n\t\torderHistory,\r\n\t\tsetOrder\r\n\t])\r\n\r\n useEffect(() => {\r\n if (orderId && orderId !== stateOrderId) {\r\n handleLayoutMode(layoutModeEnum.headerFullContent)\r\n handleSidebarContent(sidebarContentEnum.order)\r\n handleSidebarOpened(true)\r\n\r\n const selectedOrder = orderHistory && orderHistory.orders && orderHistory.orders.filter(item => item.id === orderId)[0]\r\n\r\n setOrder({\r\n id: orderId,\r\n ...selectedOrder\r\n })\r\n }\r\n }, [\r\n isMobile,\r\n orderCpf,\r\n orderId,\r\n orderHistory,\r\n setOrder,\r\n handleLayoutMode,\r\n handleSidebarContent,\r\n handleSidebarOpened,\r\n sidebarContentEnum,\r\n layoutModeEnum,\r\n stateOrderId\r\n ])\r\n\r\n async function handleModality(id) {\r\n setModality({ id })\r\n }\r\n\r\n function handleCloseDialogPlace() {\r\n setVisiblePlacedOrder(false)\r\n }\r\n\r\n function handleContactUs() {\r\n history.push(`/contact-us${URLParameters}`)\r\n }\r\n\r\n function handleOrder(id) {\r\n setUserHistory({\r\n back: 'placed-orders'\r\n })\r\n history.push(`/placed-orders/${id}${URLParameters}`)\r\n }\r\n\r\n const summary = () => {\r\n return ({\r\n product: item.product,\r\n description: item.description,\r\n value: item.value,\r\n quantity: item.quantity\r\n })),\r\n summary: {\r\n total: order.amountPaid,\r\n deliveryFee: order.serviceFee,\r\n discount: order.discount,\r\n subtotal: order.amountPaid - order.serviceFee\r\n }\r\n }}\r\n cpf={orderCpf}\r\n hasCpf={order.hasCpf}\r\n cardBrand={order.cardBrand}\r\n cardNumber={order.cardNumber}\r\n handleTrackOrder={() => {\r\n setOrder({\r\n id: orderId\r\n })\r\n\r\n history.push(`/receipt${URLParameters}`)\r\n }}\r\n />\r\n }\r\n\r\n return (\r\n \r\n \r\n {`${title} - Meus pedidos`} \r\n \r\n \r\n \r\n\r\n {loading.includes('orders-history') && \r\n }\r\n\r\n {!loading.includes('orders-history') && \r\n {\r\n if (back === 'placed-orders' && !orderId && !isMobile) {\r\n const back = userHistory.navigation && userHistory.navigation[userHistory.navigation.length - 1]\r\n history.push(`/${back}${URLParameters}`)\r\n\r\n return\r\n }\r\n\r\n if (back && back !== 'placed-orders') {\r\n history.push(`/${back}${URLParameters}`)\r\n\r\n return\r\n }\r\n\r\n history.push(`/`)\r\n }}>\r\n \r\n\r\n \r\n {\r\n handleLayoutMode(layoutModeEnum.default)\r\n handleSidebarContent(sidebarContentEnum.default)\r\n handleSidebarOpened(false)\r\n setViewCards(false)\r\n }}\r\n userClicked={() => {\r\n if (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n handleLayoutMode(layoutModeEnum.default)\r\n handleSidebarContent(sidebarContentEnum.default)\r\n handleSidebarOpened(false)\r\n history.push('/placed-orders')\r\n setOrder({ id: 0 })\r\n\r\n } else {\r\n handleLayoutMode(layoutModeEnum.headerFullContent)\r\n handleSidebarContent(sidebarContentEnum.nav)\r\n handleSidebarOpened(true)\r\n history.push('/placed-orders')\r\n setOrder({ id: 0 })\r\n }\r\n }}\r\n cartClicked={() => {\r\n if (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n handleLayoutMode(layoutModeEnum.default)\r\n handleSidebarContent(sidebarContentEnum.default)\r\n handleSidebarOpened(false)\r\n history.push('/placed-orders')\r\n setOrder({ id: 0 })\r\n } else {\r\n handleLayoutMode(layoutModeEnum.sideFullContent)\r\n handleSidebarContent(sidebarContentEnum.cart)\r\n handleSidebarOpened(true)\r\n history.push('/placed-orders')\r\n setOrder({ id: 0 })\r\n }\r\n }}\r\n isSidebarOpen={sidebarOpened}\r\n />\r\n \r\n \r\n \r\n {!isMobile && \r\n {!isMobile && sidebarContent === sidebarContentEnum.cart && !orderId &&\r\n \r\n { }}\r\n handleClose={() => { }}\r\n />\r\n }\r\n\r\n {!isMobile && layoutMode === layoutModeEnum.headerFullContent && sidebarContent === sidebarContentEnum.nav && !orderId && handleContactUs()}\r\n userName={userName}\r\n currentRoute='placed-orders'\r\n />}\r\n\r\n {orderId && sidebarContent === sidebarContentEnum.order && !isMobile && summary()}\r\n }\r\n\t\t\t\t handleCloseDialogPlace()}\r\n aria-labelledby=\"place-order-dialog\"\r\n open={visiblePlacedOrder}\r\n maxWidth={'sm'}\r\n fullWidth={true}\r\n fullScreen={true}\r\n >\r\n {summary()}\r\n \r\n }\r\n \r\n )\r\n}\r\n\r\nPlacedOrdersPage.propTypes = {\r\n accessToken: PropTypes.string,\r\n addressDelivery: PropTypes.shape({}),\r\n cartProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n fetchOrderHistory: PropTypes.func,\r\n loading: PropTypes.arrayOf(PropTypes.string),\r\n order: PropTypes.shape({\r\n id: PropTypes.number,\r\n modalityId: PropTypes.number,\r\n inProgress: PropTypes.bool,\r\n store: PropTypes.shape({\r\n logoUrl: PropTypes.string,\r\n name: PropTypes.string,\r\n address: PropTypes.string,\r\n phone: PropTypes.string,\r\n date: PropTypes.string,\r\n whatsapp: PropTypes.string\r\n }),\r\n deliveryPlace: PropTypes.string,\r\n items: PropTypes.arrayOf(PropTypes.shape({})),\r\n amountPaid: PropTypes.number,\r\n serviceFee: PropTypes.number,\r\n discount: PropTypes.number,\r\n hasCpf: PropTypes.bool,\r\n cardBrand: PropTypes.string,\r\n cardNumber: PropTypes.string\r\n }),\r\n orderCpf: PropTypes.string,\r\n orderHistory: PropTypes.shape({\r\n orders: PropTypes.arrayOf(PropTypes.shape({}))\r\n }),\r\n setOrder: PropTypes.func,\r\n storeName: PropTypes.string,\r\n theme: PropTypes.shape({\r\n headerImage: PropTypes.string,\r\n logoImage: PropTypes.string\r\n }),\r\n address: PropTypes.shape({}),\r\n userHistory: PropTypes.shape({\r\n back: PropTypes.string,\r\n next: PropTypes.string,\r\n navigation: PropTypes.arrayOf(PropTypes.string)\r\n }),\r\n userName: PropTypes.string,\r\n match: PropTypes.shape({\r\n params: PropTypes.shape({\r\n orderId: PropTypes.string\r\n })\r\n }),\r\n setUserHistory: PropTypes.func,\r\n storeImg: PropTypes.string,\r\n modalityId: PropTypes.number,\r\n setModality: PropTypes.func,\r\n URLParameters: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n accessToken: state.user.accessToken,\r\n addressDelivery: state.address.addressByCEP || '',\r\n cartProducts: (state.main.cart && state.main.cart.products) || [],\r\n loading: state.loading.loading || [],\r\n order: state.main.order || {},\r\n orderCpf: state.main.order && state.main.order.cpf,\r\n orderHistory: state.main.orderHistory || { orders: [] },\r\n storeName: (state.store.store && state.store.store.name) || '',\r\n address: state.address.address || '',\r\n userAddresses: state.userAddress.userAddresses || [],\r\n userHistory: state.main.userHistory || {},\r\n userName: state.user.name || '',\r\n storeImg: (state.store.store && state.store.store.logo) || '',\r\n modalityId: state.main.modality && state.main.modality.id,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchCart: cart.fetchCart,\r\n fetchOrderHistory: order.fetchOrderHistory,\r\n logout,\r\n setOrder: order.setOrder,\r\n setUserHistory,\r\n setModality,\r\n setReceipt\r\n})\r\n\r\nexport const PlacedOrders = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'placed-orders' })\r\n)(PlacedOrdersPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n background: #fff;\r\n font-size: .875rem;\r\n min-height: 100%;\r\n padding: 1.25rem;\r\n\r\n > a{\r\n margin: 0 0 1rem 0;\r\n text-decoration: none;\r\n font-weight: bold;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n }\r\n\r\n > .close-button {\r\n font-size: 1.25rem;\r\n align-self: flex-end;\r\n margin-bottom: .313rem;\r\n font-weight: 100;\r\n }\r\n\r\n > img.main {\r\n margin-bottom: 1.25rem;\r\n width: 100%;\r\n height: auto;\r\n max-height: 263px;\r\n }\r\n\r\n > h2 {\r\n margin-bottom: 1.25rem;\r\n }\r\n\r\n > p {\r\n margin-bottom: 1.25rem;\r\n font-size: .938rem;\r\n flex: 0;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000'};\r\n\r\n &.value {\r\n font-size: 1.125rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-weight: bold;\r\n }\r\n\r\n &.promo {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.positive) || '#333'};\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n }\r\n \r\n >span{\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#333'};\r\n font-size: 1rem;\r\n text-decoration: line-through;\r\n margin-left: .313rem;\r\n }\r\n }\r\n`\r\n\r\nexport const Textarea = styled.textarea`\r\n min-width: 100%;\r\n max-width: 100%;\r\n height: 5rem;\r\n border-radius: .938rem;\r\n padding: .625rem;\r\n box-sizing: border-box;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'} .063rem solid;\r\n`\r\n\r\nexport const Button = styled.button`\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &:disabled {\r\n opacity: .4;\r\n pointer-events: none;\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n padding: .313rem;\r\n background: none;\r\n border: 0 none;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n`\r\n\r\nexport const Image = styled.img`\r\n margin: 0;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n margin: 0 0 1.563rem 0;\r\n padding: 0;\r\n font-size: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#333'};\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: wrap;\r\n`\r\n\r\nexport const H4 = styled.h4`\r\n margin: 0 0 .625rem 0;\r\n padding: 0;\r\n font-size: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333'};\r\n`\r\n\r\nexport const Div = styled.div``\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'} .063rem solid;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n`\r\n\r\nexport const QuantityControlWrapper = styled.div``\r\n\r\nexport const Span = styled.span`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-size: 1rem;\r\n margin: 0 .5rem;\r\n font-weight: bold;\r\n`\r\n\r\nexport const ButtonActions = styled.button`\r\n font-weight: bold;\r\n font-size: 1rem;\r\n border-radius: 50%;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border: ${props => {\r\n if (props.qtd > 0) {\r\n return `1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' }`\r\n }\r\n return `1px solid #E2E2E2`\r\n }};\r\n`\r\n\r\nexport const NotesWrapper = styled.div`\r\n min-width: 100%;\r\n padding: 0;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n > h3 {\r\n margin-bottom: 1.25rem;\r\n }\r\n\r\n > textarea {\r\n margin-bottom: 1.25rem;\r\n }\r\n \r\n > ::-webkit-input-placeholder { \r\n font-size: .875rem;\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n\r\n > input:-moz-placeholder { \r\n font-size: .875rem;\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n\r\n > textarea:-moz-placeholder { \r\n font-size: .875rem;\r\n color:${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n\r\n > .row {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n margin-bottom: 20px;\r\n\r\n > .quantity {\r\n border-radius: .625rem;\r\n display: flex;\r\n flex: 1;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-direction: row;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'} .063rem solid;\r\n min-height: 3.438rem;\r\n box-sizing: border-box;\r\n padding: 0 .313rem;\r\n max-width: 35%;\r\n min-width: 35%;\r\n\r\n > button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-weight: bold;\r\n font-size: 1.875rem;\r\n padding: 0 .313rem;\r\n text-decoration: none;\r\n background-color: #fff;\r\n }\r\n\r\n > span {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-weight: bold;\r\n font-size: 1.25rem;\r\n } \r\n }\r\n\r\n > .add {\r\n flex: 1;\r\n max-width: 60%;\r\n min-width: 60%;\r\n\r\n > button {\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: .625rem;\r\n min-width: 100%;\r\n display: flex;\r\n height: 3.438rem;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-weight: bold;\r\n font-size: .875rem;\r\n\r\n > span {\r\n flex: 1;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff'};\r\n }\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const ImageWrapper = styled.div`\r\n min-width: 100%;\r\n max-width: 100%;\r\n max-height: 16.75rem;\r\n min-height: 16.75rem;\r\n overflow: hidden;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: .938rem;\r\n margin-bottom: 1.25rem;\r\n\r\n > img {\r\n flex: 1;\r\n max-width: 100%;\r\n min-width: 100%;\r\n height: auto;\r\n min-height: auto;\r\n max-height: auto;\r\n }\r\n`\r\n","\r\nimport React, {\r\n useEffect,\r\n useState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n CustomIcon\r\n} from '../components'\r\n\r\nimport {\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n removeSelectedProduct,\r\n addProduct,\r\n removeProduct,\r\n handleGTM,\r\n removeSelectedProductAdditional,\r\n setSelectedCategory,\r\n setOpenCart,\r\n\tsetQuantity\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n Wrapper,\r\n ImageWrapper,\r\n Textarea,\r\n Button,\r\n CloseButton,\r\n Image,\r\n H1,\r\n H4,\r\n Paragraph,\r\n Span,\r\n NotesWrapper,\r\n Div\r\n} from './styles'\r\n\r\nimport {\r\n Additionals\r\n} from './'\r\n\r\nimport {\r\n\taddressActions,\r\n\tmenuActions\r\n} from '../../state'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nconst Notes = ({\r\n status,\r\n quantity,\r\n total,\r\n update,\r\n handleQuantity,\r\n handleAdd,\r\n scheduling\r\n}) => {\r\n return \r\n {!scheduling && <> \r\n}\r\n\r\nNotes.propTypes = {\r\n\tstatus: PropTypes.number,\r\n quantity: PropTypes.number,\r\n total: PropTypes.number,\r\n update: PropTypes.bool,\r\n handleQuantity: PropTypes.func,\r\n handleAdd: PropTypes.func,\r\n additionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tscheduling: PropTypes.shape({})\r\n}\r\n\r\nfunction ProductPage(props) {\r\n const {\r\n storeStatus,\r\n selectedProduct,\r\n selectedCategory,\r\n removeSelectedProductAdditional,\r\n setSelectedProduct,\r\n addProduct,\r\n //removeProduct,\r\n cart,\r\n //handleGTM,\r\n\t\tsetQuantity,\r\n handleClose,\r\n scheduling,\r\n\t\tsetAddressPostalCodeRequest,\r\n\t\taddress\r\n } = props\r\n\r\n\tconst {\r\n\t\tlayoutModeEnum,\r\n\t\thandleLayoutMode\r\n\t} = useLayout()\r\n\r\n\tconst {\r\n\t\tsidebarContentEnum,\r\n\t\thandleSidebarContent,\r\n\t\thandleSidebarOpened\r\n\t} = useSidebar()\r\n\r\n const [loaded, setLoaded] = useState(false)\r\n const [lastQuantity, setLastQuantity] = useState(0)\r\n const [update, setUpdate] = useState(0)\r\n const [total, setTotal] = useState(0)\r\n const [value, setPrice] = useState(0)\r\n const [cartProductPreviousQuantity, setCartProductPreviousQuantity] = useState(0)\r\n \r\n useEffect(() => {\r\n\t\tif (selectedProduct) {\r\n\t\t\tconst {\r\n\t\t\t\tproducts\r\n\t\t\t} = cart\r\n\r\n\t\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === selectedProduct.id))[0] : null\r\n\t\t\tconst cartProductPreviousQuantity = selectedProduct.isNewAddition ? 1 : ((cartProductPrevious && cartProductPrevious.quantity) || 0)\r\n\t\t\tconst finalQuantity = !update && cartProductPreviousQuantity ? cartProductPreviousQuantity : selectedProduct.quantity\r\n\t\t\tconst value = `R$ ${Number(selectedProduct.value).toFixed(2).replace('.', ',')}`\r\n\r\n\t\t\tconst selectedAdditionals = (selectedProduct && selectedProduct.selectedAdditionals) || (cartProductPrevious && cartProductPrevious.selectedAdditionals)\r\n\r\n\t\t\tconst selectedAdditionalsGroups = selectedAdditionals && selectedAdditionals.length && selectedAdditionals.map((mappedItem) => {\r\n\t\t\t\tconst selectedAdditionalsMaximum = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 3)\r\n\t\t\t\tconst selectedAdditionalsAverage = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 2)\r\n\t\t\t\tconst selectedAdditionalsFixes = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 1)\r\n\r\n\t\t\t\tconst additionalsMaximumTotal = (selectedAdditionalsMaximum && selectedAdditionalsMaximum.length && Math.max.apply(Math, selectedAdditionalsMaximum.map((selectedAdditionalsMaximumItem) => selectedAdditionalsMaximumItem.value))) || 0\r\n\t\t\t\tconst additionalsAverageTotal = selectedAdditionalsAverage && selectedAdditionalsAverage.length ? (selectedAdditionalsAverage.reduce((acc, current) => Number(acc + current.value), [])) / selectedAdditionalsAverage.length : 0\r\n\t\t\t\tconst additionalsFixesTotal = selectedAdditionalsFixes && selectedAdditionalsFixes.length ? selectedAdditionalsFixes.reduce((acc, current) => {\r\n\t\t\t\t\tif (current.quantity > 1) {\r\n\t\t\t\t\t\treturn Number(acc + (current.value * current.quantity))\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn Number(acc + current.value)\r\n\t\t\t\t}, []) : 0\r\n\r\n\t\t\t\treturn additionalsMaximumTotal + additionalsAverageTotal + additionalsFixesTotal\r\n\t\t\t})\r\n\t\t\tconst finalPriceProduct = !selectedProduct.promotionalValue ? selectedProduct.value : selectedProduct.promotionalValue\r\n\r\n\t\t\tconst selectedAdditionalsGroupsTotal = (selectedAdditionalsGroups && selectedAdditionalsGroups.length && selectedAdditionalsGroups.reduce((acc, current) => Number(acc + current), [])) || 0\r\n\r\n\t\t\tsetLastQuantity(finalQuantity)\r\n\t\t\tsetTotal(finalQuantity * (finalPriceProduct + selectedAdditionalsGroupsTotal))\r\n\t\t\tsetPrice(value)\r\n\t\t\tsetCartProductPreviousQuantity(cartProductPreviousQuantity)\r\n\t\t}\r\n\r\n return () => { }\r\n }, [\r\n cart,\r\n selectedProduct,\r\n update,\r\n loaded,\r\n setLoaded\r\n ])\r\n\r\n function handleQuantity(item) {\r\n const {\r\n quantity: quantityIncrement\r\n } = item\r\n\r\n const newProduct = {\r\n ...selectedProduct,\r\n quantity: lastQuantity + quantityIncrement,\r\n category: selectedCategory,\r\n }\r\n\r\n setUpdate(true)\r\n\r\n if (newProduct.quantity > 999) return false\r\n if (newProduct.quantity < 1) return false\r\n\r\n setLastQuantity(newProduct.quantity)\r\n setSelectedProduct(newProduct)\r\n }\r\n\r\n function handleAdditionalsChange(item, hasAdded) {\r\n const {\r\n quantity: quantityIncrement\r\n } = item\r\n\r\n if (hasAdded) {\r\n removeSelectedProductAdditional(item)\r\n\r\n return\r\n }\r\n\r\n const {\r\n groupId,\r\n calcType,\r\n minimum,\r\n maximum\r\n } = item\r\n\r\n const {\r\n products\r\n } = cart\r\n\r\n const cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === item.id))[0] : null\r\n const selectedAdditionals = (selectedProduct && selectedProduct.selectedAdditionals) || cartProductPrevious.selectedAdditionals\r\n const selectedAdditionalGroup = (selectedAdditionals && selectedAdditionals.length && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType)[0])) || null\r\n\r\n if (selectedAdditionalGroup && selectedAdditionalGroup.items && selectedAdditionalGroup.items.length + quantityIncrement > maximum) {\r\n const group = document.getElementById(`additionals-group-${selectedAdditionalGroup.groupId}-${selectedAdditionalGroup.calcType}`)\r\n\r\n group.classList.add('maximum')\r\n\r\n return false\r\n }\r\n\r\n if (!selectedAdditionalGroup) {\r\n const newGroup = {\r\n groupId,\r\n calcType,\r\n minimum,\r\n maximum,\r\n items: [\r\n item\r\n ]\r\n }\r\n\r\n const newProduct = {\r\n ...selectedProduct,\r\n selectedAdditionals: [\r\n ...selectedAdditionals,\r\n newGroup\r\n ]\r\n }\r\n\r\n setSelectedProduct(newProduct)\r\n\r\n return\r\n }\r\n\r\n if (selectedAdditionalGroup) {\r\n const {\r\n items = []\r\n } = selectedAdditionalGroup\r\n\r\n const newSelectedAdditionals = selectedAdditionals.map(mappedItem => {\r\n if (mappedItem.groupId === groupId && mappedItem.calcType === calcType) {\r\n const newItems = [\r\n ...items,\r\n item\r\n ]\r\n\r\n const newMappedItem = {\r\n ...mappedItem,\r\n items: newItems\r\n }\r\n\r\n return newMappedItem\r\n }\r\n\r\n return mappedItem\r\n })\r\n\r\n const newProduct = {\r\n ...selectedProduct,\r\n selectedAdditionals: [\r\n ...newSelectedAdditionals\r\n ]\r\n }\r\n\r\n setSelectedProduct(newProduct)\r\n\r\n return\r\n }\r\n }\r\n\r\n function handleAdditionalsQuantity(item) {\r\n const {\r\n id,\r\n quantity: quantityIncrement,\r\n groupId,\r\n calcType,\r\n minimum,\r\n maximum\r\n } = item\r\n\r\n const {\r\n products\r\n } = cart\r\n\r\n const cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === item.id))[0] : null\r\n const selectedAdditionals = (selectedProduct && selectedProduct.selectedAdditionals) || cartProductPrevious.selectedAdditionals\r\n const selectedAdditionalGroup = (selectedAdditionals && selectedAdditionals.length && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType)[0])) || null\r\n\r\n if (selectedAdditionalGroup && selectedAdditionalGroup.items && selectedAdditionalGroup.items.length + quantityIncrement > maximum) {\r\n return false\r\n }\r\n\r\n if (!selectedAdditionalGroup) {\r\n const newItem = {\r\n ...item,\r\n quantity: 1\r\n }\r\n\r\n const newGroup = {\r\n groupId,\r\n calcType,\r\n minimum,\r\n maximum,\r\n items: [\r\n newItem\r\n ]\r\n }\r\n\r\n const newProduct = {\r\n ...selectedProduct,\r\n selectedAdditionals: [\r\n ...selectedAdditionals,\r\n newGroup\r\n ]\r\n }\r\n\r\n setSelectedProduct(newProduct)\r\n\r\n return\r\n }\r\n\r\n if (selectedAdditionalGroup) {\r\n const {\r\n items = []\r\n } = selectedAdditionalGroup\r\n\r\n const newSelectedAdditionals = selectedAdditionals.map(mappedItem => {\r\n const hasSelectedAdditional = mappedItem.items && mappedItem.items.filter(filteredItem => filteredItem.code === id)\r\n\r\n const quantityTotal = items.reduce((acc, current) => {\r\n return Number(acc + current.quantity)\r\n }, 0)\r\n const quantityRemaining = maximum - quantityTotal\r\n\r\n if (!hasSelectedAdditional.length && mappedItem.groupId === groupId && mappedItem.calcType === calcType && quantityRemaining) {\r\n const newItem = {\r\n ...item,\r\n quantity: 1\r\n }\r\n\r\n const newItems = [\r\n ...items,\r\n newItem\r\n ]\r\n\r\n const newMappedItem = {\r\n ...mappedItem,\r\n items: newItems\r\n }\r\n\r\n return newMappedItem\r\n }\r\n\r\n if (hasSelectedAdditional.length && mappedItem.groupId === groupId && mappedItem.calcType === calcType && ((quantityRemaining && quantityIncrement > 0) || ((!quantityRemaining || quantityRemaining) && quantityIncrement < 0))) {\r\n const newItems = items && items.length && (items.map((newItemsMappedItem) => {\r\n const {\r\n quantity: newItemsMappedItemQuantity = 0\r\n } = newItemsMappedItem\r\n\r\n const newQuantity = newItemsMappedItemQuantity + quantityIncrement\r\n\r\n if (newQuantity >= 1 && newQuantity <= maximum && hasSelectedAdditional && hasSelectedAdditional[0] && hasSelectedAdditional[0].code === newItemsMappedItem.code) {\r\n return {\r\n ...newItemsMappedItem,\r\n quantity: newQuantity\r\n }\r\n }\r\n\r\n if (newQuantity < 1 && hasSelectedAdditional && hasSelectedAdditional[0] && hasSelectedAdditional[0].code === newItemsMappedItem.code) {\r\n return false\r\n }\r\n\r\n return {\r\n ...newItemsMappedItem\r\n }\r\n })).filter(filteredItem => filteredItem !== false)\r\n\r\n const newMappedItem = {\r\n ...mappedItem,\r\n items: newItems\r\n }\r\n\r\n return newMappedItem\r\n }\r\n\r\n return mappedItem\r\n })\r\n\r\n const newProduct = {\r\n ...selectedProduct,\r\n selectedAdditionals: [\r\n ...newSelectedAdditionals\r\n ]\r\n }\r\n\r\n setSelectedProduct(newProduct)\r\n\r\n return\r\n }\r\n }\r\n\r\n async function handleAdd() {\r\n\t\tif (address && !address.main) {\r\n\t\t\tsetAddressPostalCodeRequest(true)\r\n\t\t}\r\n\r\n const product = {\r\n ...selectedProduct,\r\n quantity: lastQuantity\r\n }\r\n\r\n const {\r\n additionals,\r\n selectedAdditionals\r\n } = selectedProduct\r\n\r\n const requiredAdditionals = additionals && additionals.filter(filteredItem => filteredItem.minimum >= 1)\r\n\r\n const hasMinimum = requiredAdditionals && requiredAdditionals.filter(requiredAdditionalsFilteredItem => {\r\n const selectedAdditional = selectedAdditionals.filter(selectedAdditionalsFilteredItem =>\r\n selectedAdditionalsFilteredItem.groupId === requiredAdditionalsFilteredItem.groupId &&\r\n selectedAdditionalsFilteredItem.calcType === requiredAdditionalsFilteredItem.calcType &&\r\n (selectedAdditionalsFilteredItem.items && selectedAdditionalsFilteredItem.items.length >= requiredAdditionalsFilteredItem.minimum)\r\n )\r\n\r\n if (!selectedAdditional.length) {\r\n return false\r\n }\r\n\r\n const {\r\n items = []\r\n } = selectedAdditional[0]\r\n\r\n if (!items.length) {\r\n return false\r\n }\r\n\r\n return true\r\n })\r\n\r\n const hasNoMinimum = requiredAdditionals && requiredAdditionals.filter(requiredAdditionalsFilteredItem => {\r\n const selectedAdditional = selectedAdditionals.filter(selectedAdditionalsFilteredItem =>\r\n selectedAdditionalsFilteredItem.groupId === requiredAdditionalsFilteredItem.groupId &&\r\n selectedAdditionalsFilteredItem.calcType === requiredAdditionalsFilteredItem.calcType &&\r\n (selectedAdditionalsFilteredItem.items && selectedAdditionalsFilteredItem.items.length >= requiredAdditionalsFilteredItem.minimum)\r\n )\r\n\r\n if (!selectedAdditional.length) {\r\n return true\r\n }\r\n\r\n const {\r\n items = []\r\n } = selectedAdditional[0]\r\n\r\n if (!items.length) {\r\n return true\r\n }\r\n\r\n return false\r\n })\r\n\r\n hasMinimum && hasMinimum.length && hasMinimum.forEach((hasMinimum) => {\r\n const group = document.getElementById(`additionals-group-${hasMinimum.groupId}-${hasMinimum.calcType}`)\r\n\r\n group.classList.remove('required')\r\n })\r\n\r\n if (hasMinimum.length < requiredAdditionals.length && hasNoMinimum.length) {\r\n hasNoMinimum.forEach((hasNoMinimumItem) => {\r\n const group = document.getElementById(`additionals-group-${hasNoMinimumItem.groupId}-${hasNoMinimumItem.calcType}`)\r\n\r\n group.classList.add('required')\r\n })\r\n\r\n return false\r\n }\r\n\r\n const verified = await checkDifference(product)\r\n\r\n\t\tif (cartProductPreviousQuantity && !verified) {\r\n\t\t\tsetQuantity({\r\n\t\t\t\tid: product.id,\r\n\t\t\t\tquantity: 1\r\n\t\t\t})\r\n\r\n\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\thandleSidebarOpened(true)\r\n\r\n\t\t\thandleClose()\r\n\r\n\t\t\treturn\r\n\t\t} else {\r\n\t\t\tawait addProduct(product)\r\n\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\thandleSidebarOpened(true)\r\n\r\n\t\t\thandleClose()\r\n\t\t}\r\n }\r\n\r\n\tconst checkDifference = (product) => {\r\n\t\tconst {\r\n\t\t\tproducts\r\n\t\t} = cart\r\n\r\n\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === product.id))[0] : null\r\n\r\n\t\tlet difference = false\r\n\t\tproduct && product.selectedAdditionals.forEach((additional) => {\r\n\t\t\tconst selectedProductGroupId = (cartProductPrevious && cartProductPrevious.selectedAdditionals.find((selected) => selected.groupId === additional.groupId)) || null\r\n\t\t\tif (selectedProductGroupId) {\r\n\t\t\t\tif (additional.items && additional.items.length > 0) {\r\n\t\t\t\t\tconst checkAddionals = []\r\n\t\t\t\t\tadditional.items.forEach((mappedItem) => {\r\n\t\t\t\t\t\tconst objCheck = selectedProductGroupId.items.find((selected) => selected.code === mappedItem.code) || null\r\n\r\n\t\t\t\t\t\tif (objCheck) checkAddionals.push(\"found\")\r\n\t\t\t\t\t\telse checkAddionals.push(\"not_found\")\r\n\t\t\t\t\t})\r\n\r\n\t\t\t\t\tconst verified = (checkAddionals.indexOf(\"not_found\") > -1) ? true : false\r\n\t\t\t\t\tdifference = verified\r\n\t\t\t\t} else {\r\n\t\t\t\t\tdifference = false\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\tconsole.log(difference)\r\n\t\treturn difference\r\n\t}\r\n\r\n if (selectedProduct && (!selectedProduct.name || !selectedProduct.value)) {\r\n return null\r\n }\r\n\r\n return \r\n {\r\n handleClose()\r\n }}>\r\n \r\n\r\n\t\t{selectedProduct && <>\r\n\t\t\t{selectedProduct.image ? \r\n\t\t\t\t : null}\r\n\r\n\t\t\t{selectedProduct.description} \r\n\r\n\t\t\t{!selectedProduct.promotionalValue && {value} }\r\n\r\n\t\t\t{selectedProduct.promotionalValue && {`R$ ${Number(selectedProduct.promotionalValue).toFixed(2).replace('.', ',')}`} {value} }\r\n\r\n\t\t\t{selectedProduct.additionals && selectedProduct.additionals.length ? \r\n}\r\n\r\nProductPage.propTypes = {\r\n\tstoreStatus: PropTypes.number,\r\n\tselectedProduct: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tname: PropTypes.string,\r\n\t\tdescription: PropTypes.string,\r\n\t\timage: PropTypes.string,\r\n\t\tquantity: PropTypes.number,\r\n\t\tvalue: PropTypes.number,\r\n\t\tpromotionalValue: PropTypes.number,\r\n\t\tselectedAdditionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\t\tadditionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\t\tisNewAddition: PropTypes.bool\r\n\t}),\r\n\tselectedCategory: PropTypes.shape({}),\r\n\tremoveSelectedProductAdditional: PropTypes.func,\r\n\tsetSelectedProduct: PropTypes.func,\r\n\taddProduct: PropTypes.func,\r\n\tremoveProduct: PropTypes.func,\r\n\tcart: PropTypes.shape({\r\n\t\tproducts: PropTypes.arrayOf({})\r\n\t}),\r\n\thandleGTM: PropTypes.func,\r\n\thandleClose: PropTypes.func,\r\n\tscheduling: PropTypes.bool,\r\n\tsetAddressPostalCodeRequest: PropTypes.func,\r\n\taddress: PropTypes.shape({\r\n\t\tmain: PropTypes.string\r\n\t})\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n storeStatus: state.store.store && state.store.store.status,\r\n storeName: state.store.store && state.store.store.name,\r\n selectedProduct: (state.menu.selectedProduct) || null,\r\n selectedCategory: state.store.store && state.store.store.selectedCategory,\r\n openModalCategory: state.store.store && state.store.store.selectedCategory && state.store.store.selectedCategory.openModalCategory,\r\n cart: state.main.cart,\r\n modalityId: state.main.modality.id,\r\n scheduling: state.store.store && state.store.store.scheduling,\r\n address: (state.address.address) || {}\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n setSelectedProduct: menuActions.setSelectedProduct,\r\n\tsetAddressPostalCodeRequest: addressActions.setAddressPostalCodeRequest,\r\n removeSelectedProduct,\r\n removeSelectedProductAdditional,\r\n addProduct,\r\n removeProduct,\r\n handleGTM,\r\n setSelectedCategory,\r\n setOpenCart,\r\n\tsetQuantity\r\n})\r\n\r\nexport const Product = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'payment' })\r\n)(ProductPage))\r\n","import React, {\r\n useState\r\n} from 'react'\r\nimport styled from 'styled-components'\r\n\r\nimport {\r\n\tCustomCheckbox,\r\n\tCustomIcon\r\n} from '../../components'\r\n\r\nconst AdditionalsWrapper = styled.div`\r\n min-width: 100%;\r\n`\r\n\r\nconst AdditionalWrapper = styled.div`\r\n\t&.maximum {\r\n > ul {\r\n > li {\r\n &:not(.checked) {\r\n opacity: .5;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.required {\r\n > div {\r\n\r\n > h3 {\r\n color: #F00;\r\n animation: required .5s;\r\n position: relative;\r\n }\r\n\r\n > span {\r\n color: #F00;\r\n border-color: #F00;\r\n animation: required .5s;\r\n position: relative;\r\n }\r\n }\r\n }\r\n\r\n @keyframes required {\r\n from { left: 0;}\r\n 25% { left: 0.938rem }\r\n 50% { left: -15px }\r\n 75% { left: 0.938rem }\r\n to { left: 0; }\r\n }\r\n`\r\n\r\nconst AdditionalHeader = styled.div`\r\n background: #F6F6F6;\r\n flex: 1;\r\n padding: 0.938rem 1.25rem;\r\n margin: 0 -1.25rem;\r\n margin-bottom: 1.25rem;\r\n min-width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n\r\n > h3 {\r\n flex: 1;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n text-transform: uppercase;\r\n }\r\n\r\n > span {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'} 0.063rem solid;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333' };\r\n font-size: 0.875rem;\r\n height: 1.25rem;\r\n border-radius: 1.25rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 0.625rem;\r\n flex: 1;\r\n max-width: 6.25rem;\r\n min-width: 6.25rem;\r\n }\r\n`\r\n\r\nconst AdditionalList = styled.ul`\r\n list-style: inside none;\r\n padding: 0;\r\n margin: 0;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n min-width: 100%;\r\n padding: 0;\r\n padding-bottom: 0;\r\n margin-bottom: 0.625rem;\r\n`\r\n\r\nconst QuantityControlWrapper = styled.div`\r\n\tmax-height: 3.125rem;\r\n\tmin-height: 3.125rem;\r\n\theight: 3.125rem;\r\n\talign-self: flex-end;\r\n\tpadding: 0;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: flex-start;\r\n\tflex-direction: row;\r\n\r\n\t> button {\r\n\t\tborder: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'} 0.125rem solid;\r\n\t\tborder-radius: 50%;\r\n\t\tflex: 1;\r\n\t\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333' };\r\n\t\tfont-size: 1rem;\r\n\t\tmin-width: 1.875rem;\r\n\t\tmin-height: 1.875rem;\r\n\t\tmax-width: 1.875rem;\r\n\t\tmax-height: 1.875rem;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n\r\n > span {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\t}\r\n\r\n\t> span {\r\n\t\tflex: 1;\r\n\t\tmargin: 0 0.625rem;\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\t\tfont-size: 1.125rem;\r\n\t\tfont-weight: bold;\r\n min-height: 1.875rem;\r\n max-height: 1.875rem;\r\n margin: 0 0.625rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n\t}\r\n`\r\n\r\nconst Span = styled.span``\r\n\r\nconst H3 = styled.h3`\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#999'};\r\n`\r\n\r\nconst Div = styled.div``\r\n\r\nconst Paragraph = styled.p`\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'} 0.063rem solid;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n`\r\n\r\nconst Button = styled.button`\r\n\tbackground: none;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n`\r\n\r\nconst AdditionalsListItemWrapper = styled.li`\r\n\tflex: 1;\r\n\tpadding: 0;\r\n\tmin-width: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmargin-bottom: 1.25rem;\r\n\r\n &.checkbox {\r\n > div {\r\n &.actions {\r\n max-width: 1.875rem;\r\n }\r\n }\r\n }\r\n\r\n > div {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n\r\n &.actions {\r\n align-items: flex-start;\r\n\t\t\tflex: 1;\r\n max-width: 5.625rem;\r\n\r\n > span {\r\n display: flex;\r\n }\r\n }\r\n\r\n > p {\r\n &.name {\r\n font-size: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n font-weight: bold;\r\n }\r\n\r\n &.description {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin-bottom: 0.375rem;\r\n font-size: 0.75rem;\r\n }\r\n\r\n &.value {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.greyMedium) || '#000'};\r\n font-size: 1rem;\r\n }\r\n }\r\n }\r\n`\r\n\r\nconst QuantityControl = ({\r\n\tdata,\r\n\tquantity,\r\n\tid,\r\n\thandleQuantity\r\n}) => {\r\n\treturn \r\n\t\t{ quantity ? <>\r\n\t\t\t\r\n\t\t\t{ quantity }\r\n\t\t\t\r\n\t\t : <>\r\n\t\t\t\r\n\t\t }\r\n\t \r\n}\r\n\r\nexport function Additionals(props) {\r\n\tconst {\r\n\t\tdata,\r\n\t\thandleQuantity,\r\n\t\thandleChange,\r\n\t\tselectedProduct,\r\n\t\tcart\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tselectedAdditionals\r\n\t} = selectedProduct\r\n\r\n\tconst {\r\n\t\tproducts\r\n\t} = cart\r\n\t\r\n\tconst cartSelectedProductArr = products && products.length && selectedProduct ? (products.filter(filteredItem => filteredItem.id === selectedProduct.id)) : []\r\n\tconst cartSelectedProduct = (cartSelectedProductArr.length && cartSelectedProductArr[0]) || {}\r\n\r\n\tconst [update, setUpdate] = useState(0)\r\n\t\r\n\tconst {\r\n\t\tselectedAdditionals: cartSelectedAdditionals\r\n\t} = cartSelectedProduct\r\n\r\n\treturn \r\n\t\t{ data && data.map((dataMappedItem, index) => {\r\n\t\t\tconst key = `additionals-${ index }-${ (new Date()).getTime() }`\r\n\r\n\t\t\tconst {\r\n\t\t\t\titems: additionalsItems,\r\n\t\t\t\tcheckbox,\r\n\t\t\t\tname,\r\n minimum,\r\n maximum,\r\n\t\t\t\tgroupId,\r\n\t\t\t\tcalcType\r\n\t\t\t} = dataMappedItem\r\n\r\n const selectedGroup = (selectedAdditionals && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType))[0]) || null\r\n \r\n const selectedGroupItems = selectedGroup && selectedGroup.items\r\n const selectedGroupItemsQuantity = selectedGroupItems && selectedGroupItems.reduce((acc, reducedItem) => {\r\n return acc + reducedItem.quantity\r\n }, 0)\r\n\r\n const maximumQuantity = (selectedGroup && selectedGroup.maximum) || maximum\r\n\r\n\t\t\treturn = maximumQuantity) ? 'maximum' : '' }`} id={`additionals-group-${ groupId }-${ calcType }`} key={ key }>\r\n\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t{ additionalsItems && additionalsItems.map((additionalsItemsMappedItem, index) => {\r\n\t\t\t\t\t\tconst key = `additionals-list-item-${ index }-${ (new Date()).getTime() }`\r\n\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\tvalue,\r\n\t\t\t\t\t\t\tdescription,\r\n\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\tcode,\r\n\t\t\t\t\t\t\tcalcType,\r\n\t\t\t\t\t\t\tgroupId\r\n\t\t\t\t\t\t} = additionalsItemsMappedItem\r\n\r\n\t\t\t\t\t\tconst selectedGroup = (selectedAdditionals && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType))[0]) || null\r\n\t\t\t\t\t\tconst hasAdded = (selectedGroup && selectedGroup.items && selectedGroup.items.length && (selectedGroup.items.filter(filteredItem => filteredItem.code === code))) || false\r\n\t\t\t\t\t\tconst hasChecked = hasAdded && hasAdded.length\r\n\r\n\t\t\t\t\t\tconst cartSelectedGroup = (cartSelectedAdditionals && (cartSelectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType))[0]) || null\r\n\t\t\t\t\t\tconst hasCartAdded = (cartSelectedGroup && cartSelectedGroup.items && cartSelectedGroup.items.length && (cartSelectedGroup.items.filter(filteredItem => filteredItem.code === code))) || false\r\n\t\t\t\t\t\tconst hasCartChecked = hasCartAdded && hasCartAdded.length\r\n\r\n\t\t\t\t\t\tconst checked = !update ? hasChecked || hasCartChecked : hasChecked\r\n\t\t\t\t\t\tconst checkedData = !update ? hasAdded || hasCartAdded : hasAdded\r\n\r\n\t\t\t\t\t\treturn \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t})}\r\n\t\t\t\t \r\n\t\t\t \r\n\t\t}) }\r\n\t \r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const RightWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex: 0;\r\n\tflex-direction: column;\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\tmin-height: 100%;\r\n`;\r\n\r\nexport const Wrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex: 1;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: flex-start;\r\n\tbox-sizing: border-box;\r\n\tfont-size: 0.875rem;\r\n\tpadding: 1.5rem;\r\n\tposition: relative;\r\n\r\n\t> img.main {\r\n\t\tmargin-bottom: 1.25rem;\r\n\t\twidth: 100%;\r\n\t\theight: auto;\r\n\t\tmax-height: 263px;\r\n\t}\r\n\r\n\t> h2 {\r\n\t\tmargin-bottom: 1.25rem;\r\n\t}\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tmin-width: 100%;\r\n\t\tmax-width: 100%;\r\n\t\tpadding: 1rem;\r\n\r\n\t\t> div {\r\n\t\t\theight: 100%;\r\n\t\t\t&.left {\r\n\t\t\t\theight: 100%;\r\n\t\t\t\timg {\r\n\t\t\t\t\tmin-width: 15rem;\r\n\t\t\t\t\tmax-width: 15rem;\r\n\t\t\t\t\ttop: -6rem;\r\n\t\t\t\t}\r\n\r\n\t\t\t\th1 {\r\n\t\t\t\t\tmargin: 1rem 0;\r\n\t\t\t\t\tpadding: 0 1rem;\r\n\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\tbox-sizing: border-box;\r\n\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\ttext-align: center;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.has-additionals {\r\n\t\t\tflex-direction: row;\r\n\t\t\theight: 100%;\r\n\r\n\t\t\t> div {\r\n\t\t\t\theight: 100%;\r\n\t\t\t\t@media (min-width: 40rem) {\r\n\t\t\t\t\tmax-width: 50%;\r\n\t\t\t\t\tmin-width: 50%;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.left {\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\toverflow-y: visible;\r\n\t\t\t\t\toverflow-x: visible;\r\n\t\t\t\t\t> div {\r\n\t\t\t\t\t\tjustify-content: flex-start;\r\n\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t}\r\n\t\t\t\t\timg {\r\n\t\t\t\t\t\tmin-width: 15rem;\r\n\t\t\t\t\t\tmax-width: 15rem;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t&.right {\r\n\t\t\t\t\tmax-width: calc(50% - (1rem + 0.063rem));\r\n\t\t\t\t\tmin-width: calc(50% - (1rem + 0.063rem));\r\n\t\t\t\t\tpadding-left: 1rem;\r\n\t\t\t\t\tborder-left: ${(props) =>\r\n\t\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\t\t\t\t\"#CCC\"}\r\n\t\t\t\t\t\t0.063rem solid;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t}\r\n\r\n\t\t\t\th1 {\r\n\t\t\t\t\tmargin: 1rem 0 1rem -1rem;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tp {\r\n\t\t\t\t\tmargin-left: -1rem;\r\n\t\t\t\t\tpadding-left: 1rem;\r\n\t\t\t\t\tpadding-right: 1rem;\r\n\t\t\t\t\tbox-sizing: border-box;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const LeftWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex: 0;\r\n\tflex-direction: column;\r\n\theight: 100%;\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\tmin-height: 100%;\r\n\tmargin-bottom: 2rem;\r\n\tposition: relative;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n`;\r\n\r\nexport const Textarea = styled.textarea`\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\theight: 5rem;\r\n\tborder-radius: 0.938rem;\r\n\tpadding: 0.625rem;\r\n\tbox-sizing: border-box;\r\n\tborder: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\"#CCC\"}\r\n\t\t0.063rem solid;\r\n\tbackground: none;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\r\n\t&.disabled {\r\n\t\topacity: 0.4;\r\n\t}\r\n`;\r\n\r\nexport const CloseButton = styled.button`\r\n\tpadding: 1rem;\r\n\tbackground: none;\r\n\tborder: 0 none;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\"#000\"};\r\n\ttext-align: end;\r\n\tposition: absolute;\r\n\tright: 0;\r\n\ttop: 0;\r\n\tfont-size: 1.5rem;\r\n\tz-index: 1;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tright: -1rem;\r\n\t\ttop: -3.5rem;\r\n\t}\r\n`;\r\n\r\nexport const Image = styled.img`\r\n\tmargin: 0;\r\n`;\r\n\r\nexport const H1 = styled.h1`\r\n\tmargin: 0 0 0.5rem 0;\r\n\tpadding: 0;\r\n\tfont-size: 1.25rem;\r\n\tline-height: 1.25rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.titleColor) ||\r\n\t\t\"#333\"};\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: wrap;\r\n\ttext-align: center;\r\n\twidth: 100%;\r\n\t// @media (max-width: 40rem) {\r\n\t// margin: 1.5rem 0 .5rem 0;\r\n\t// }\r\n`;\r\n\r\nexport const H4 = styled.h4`\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tfont-size: 1rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.titleColor) ||\r\n\t\t\"#333\"};\r\n\ttext-align: center;\r\n\tborder-top: 1px solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\"#333\"};\r\n\tpadding: 1rem 0 0.5rem 0;\r\n`;\r\n\r\nexport const Div = styled.div``;\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\"#000\"}\r\n\t\t0.063rem solid;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tmin-width: 100%;\r\n`;\r\n\r\nexport const ParagraphPromo = styled.p`\r\n\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.positive) ||\r\n\t\t\t\"#000\"}\r\n\t\t0.063rem solid;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tmin-width: 100%;\r\n`;\r\n\r\nexport const QuantityControlWrapper = styled.div``;\r\n\r\nexport const Span = styled.span`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\"#000\"};\r\n\tfont-size: 1.2rem;\r\n\tmargin: 0 0.5rem;\r\n\tfont-weight: bold;\r\n\r\n\t@media (max-width: 60rem) {\r\n\t\tfont-size: 1rem;\r\n\t}\r\n`;\r\n\r\nexport const SpanButton = styled.span`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\"#000\"};\r\n\tfont-size: 0.9rem;\r\n\tmargin: 0 0.5rem;\r\n\tfont-weight: bold;\r\n\r\n\t@media (max-width: 60rem) {\r\n\t\tfont-size: 0.8rem;\r\n\t}\r\n`;\r\n\r\nexport const ButtonActions = styled.button`\r\n\tfont-weight: bold;\r\n\tfont-size: 1rem;\r\n\tborder-radius: 50%;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\"#000\"};\r\n\tborder: ${(props) => {\r\n\t\tif (props.qtd > 0) {\r\n\t\t\treturn `1px solid ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\"#000\"}`;\r\n\t\t}\r\n\t\treturn `1px solid #E2E2E2`;\r\n\t}};\r\n`;\r\n\r\nexport const NotesWrapper = styled.div`\r\n\tmin-width: 100%;\r\n\tpadding: 0;\r\n\tflex: 1;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tmargin-top: 0.5rem;\r\n\r\n\t> h3 {\r\n\t\tmargin-bottom: 1.25rem;\r\n\t}\r\n\r\n\t> textarea {\r\n\t\tmargin-bottom: 1.25rem;\r\n\t}\r\n\r\n\t> ::-webkit-input-placeholder {\r\n\t\tfont-size: 0.875rem;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textThirdColor) ||\r\n\t\t\t\"#CCC\"};\r\n\t}\r\n\r\n\t> input:-moz-placeholder {\r\n\t\tfont-size: 0.875rem;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textThirdColor) ||\r\n\t\t\t\"#CCC\"};\r\n\t}\r\n\r\n\t> textarea:-moz-placeholder {\r\n\t\tfont-size: 0.875rem;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textThirdColor) ||\r\n\t\t\t\"#CCC\"};\r\n\t}\r\n\r\n\t> .row {\r\n\t\tflex: 1;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: row;\r\n\t\tjustify-content: space-between;\r\n\t\talign-items: flex-end;\r\n\r\n\t\t> .quantity {\r\n\t\t\tborder-radius: 0.625rem;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex: 1;\r\n\t\t\tjustify-content: space-between;\r\n\t\t\talign-items: center;\r\n\t\t\tflex-direction: row;\r\n\t\t\tborder: ${(props) =>\r\n\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\t\"#000\"}\r\n\t\t\t\t0.063rem solid;\r\n\t\t\tmin-height: 2.638rem;\r\n\t\t\tbox-sizing: border-box;\r\n\t\t\tpadding: 0 0.313rem;\r\n\t\t\tmax-width: 35%;\r\n\t\t\tmin-width: 35%;\r\n\r\n\t\t\t> button {\r\n\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\t\"#000\"};\r\n\t\t\t\tfont-weight: bold;\r\n\t\t\t\tfont-size: 1.875rem;\r\n\t\t\t\tpadding: 0 0.313rem;\r\n\t\t\t\ttext-decoration: none;\r\n\t\t\t\tbackground: none;\r\n\t\t\t}\r\n\r\n\t\t\t> span {\r\n\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\t\"#000\"};\r\n\t\t\t\tfont-weight: bold;\r\n\t\t\t\tfont-size: 1rem;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t> .add {\r\n\t\t\tflex: 1;\r\n\t\t\tmax-width: 60%;\r\n\t\t\tmin-width: 60%;\r\n\r\n\t\t\t> button {\r\n\t\t\t\tbackground: ${(props) =>\r\n\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\t\t\"#000\"};\r\n\t\t\t\tborder-radius: 0.625rem;\r\n\t\t\t\tmin-width: 100%;\r\n\t\t\t\tdisplay: flex;\r\n\t\t\t\theight: 2.638rem;\r\n\t\t\t\talign-items: center;\r\n\t\t\t\tjustify-content: space-between;\r\n\t\t\t\tfont-weight: bold;\r\n\t\t\t\tfont-size: 0.875rem;\r\n\r\n\t\t\t\t> span {\r\n\t\t\t\t\tflex: 1;\r\n\t\t\t\t\tcolor: ${(props) =>\r\n\t\t\t\t\t\t(props.theme &&\r\n\t\t\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\t\t\tprops.theme.main.general.invertedPrimaryColor) ||\r\n\t\t\t\t\t\t\"#fff\"};\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const ImageWrapper = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tborder-radius: 0.938rem;\r\n\tposition: relative;\r\n\tmin-width: 20rem;\r\n\tmax-width: 20rem;\r\n\r\n\t> img {\r\n\t\t&.noimg {\r\n\t\t\tmax-width: 30%;\r\n\t\t\tmin-width: 30%;\r\n\t\t\tpadding: 2rem;\r\n\t\t}\r\n\r\n\t\tflex: 1;\r\n\t\tmax-width: 14rem;\r\n\t\tmin-width: 14rem;\r\n\t}\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\t&.main {\r\n\t\t\tmin-height: 10rem;\r\n\t\t\tmax-height: 10rem;\r\n\t\t}\r\n\r\n\t\t&.noimg {\r\n\t\t\tmax-height: 14rem;\r\n\t\t\tmin-height: 14rem;\r\n\r\n\t\t\t> img {\r\n\t\t\t\tmin-width: 11rem !important;\r\n\t\t\t\tmax-width: 11rem !important;\r\n\t\t\t}\r\n\r\n\t\t\t${(props) => {\r\n\t\t\t\tif (!props.additionals) {\r\n\t\t\t\t\treturn `\r\n\t\t\t\t\t\tmax-height: 7rem;\r\n\t\t\t\t\t\tmin-height: 7rem;\r\n\r\n\t\t\t\t\t\t>img{\r\n\t\t\t\t\t\t\tmin-width: 8rem !important;\r\n\t\t\t\t\t\t\tmax-width: 8rem !important;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t`;\r\n\t\t\t\t}\r\n\t\t\t}};\r\n\t\t}\r\n\r\n\t\t> img {\r\n\t\t\tflex: 1;\r\n\t\t\tmin-width: 15rem;\r\n\t\t\tmax-width: 15rem;\r\n\r\n\t\t\t${(props) => {\r\n\t\t\t\tif (props.image) {\r\n\t\t\t\t\treturn `\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\ttop: -5rem;\r\n\t\t\t\t\t\tleft: calc(50% - 2rem);\r\n\t\t\t\t\t\ttransform: translate(calc(-50% + 2rem), 0);\r\n\t\t\t\t\t`;\r\n\t\t\t\t}\r\n\t\t\t}};\r\n\r\n\t\t\t@media (min-width: 40rem) {\r\n\t\t\t\t${(props) => {\r\n\t\t\t\t\tif (props.image) {\r\n\t\t\t\t\t\treturn `\r\n\t\t\t\t\t\t\ttop: -8rem;\r\n\t\t\t\t\t\t`;\r\n\t\t\t\t\t}\r\n\t\t\t\t}};\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const DetailBox = styled.div`\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\theight: 100%;\r\n\t> p {\r\n\t\ttext-align: center;\r\n\t\tmargin-bottom: 1rem;\r\n\t\tfont-size: 0.738rem;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textdescriptionColor) ||\r\n\t\t\t\"#000\"};\r\n\r\n\t\t&.description {\r\n\t\t\tfont-size: 0.85rem;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textdescriptionColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tpadding-left: 0rem;\r\n\t\t\tpadding-right: 0rem;\r\n\t\t\tflex: initial;\r\n\t\t\t@media (min: 60rem) {\r\n\t\t\t\tfont-size: 1.25rem;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.from {\r\n\t\t\tfont-size: 1rem;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.alterTextdescriptionColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\r\n\t\t&.value {\r\n\t\t\tfont-size: 1.25rem;\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.titleColor) ||\r\n\t\t\t\t\"#000\"};\r\n\t\t\tfont-weight: bold;\r\n\t\t\tmargin-bottom: 0;\r\n\t\t}\r\n\r\n\t\t&.promo {\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.positive) ||\r\n\t\t\t\t\"#333\"};\r\n\t\t\tmargin-bottom: 0;\r\n\t\t\tfont-size: 1.125rem;\r\n\t\t}\r\n\r\n\t\t> span {\r\n\t\t\tcolor: ${(props) =>\r\n\t\t\t\t(props.theme &&\r\n\t\t\t\t\tprops.theme.main &&\r\n\t\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\t\tprops.theme.main.general.textThirdColor) ||\r\n\t\t\t\t\"#333\"};\r\n\t\t\tmargin-bottom: 0;\r\n\t\t\tfont-size: 1rem;\r\n\t\t\ttext-decoration: line-through;\r\n\t\t\tmargin-left: 0.313rem;\r\n\t\t}\r\n\r\n\t\t@media (min: 60rem) {\r\n\t\t\tmargin-bottom: 1.25rem;\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const AdditionalBox = styled.div`\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\t@media (min-width: 40rem) {\r\n\t\tmax-width: unset;\r\n\t\tmargin-left: -1rem;\r\n\t\tmargin-right: -1rem;\r\n\t\tmax-height: 250px;\r\n\t\tmin-height: 190px;\r\n\t\toverflow: hidden;\r\n\t\toverflow-y: auto;\r\n\t}\r\n`;\r\n\r\nexport const TagWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\t${(props) => {\r\n\t\tif (props.itens && props.itens.length === 1) {\r\n\t\t\treturn `margin-bottom: -3.5rem;`;\r\n\t\t} else {\r\n\t\t\treturn `margin-bottom: -5rem;`;\r\n\t\t}\r\n\t}}\r\n\tmargin-left: 0rem;\r\n\tposition: absolute;\r\n\tleft: 0;\r\n\ttop: 0;\r\n\tz-index: 1;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tleft: -1rem;\r\n\t\ttop: 0;\r\n\t\ttransform: translate(-50%, 0);\r\n\t}\r\n`;\r\n\r\nexport const TagContentWrapper = styled.div`\r\n\toverflow: auto;\r\n`;\r\n\r\nexport const TagPointsWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\t${(props) => {\r\n\t\tif (props.itens && props.itens.length === 1) {\r\n\t\t\treturn `margin-bottom: 0;`;\r\n\t\t} else {\r\n\t\t\treturn `margin-bottom: -1.2rem;`;\r\n\t\t}\r\n\t}}\r\n\t${(props) => {\r\n\t\tif (props.additionals && props.additionals.length > 0) {\r\n\t\t\treturn `margin-left: 60%;`;\r\n\t\t} else {\r\n\t\t\treturn `margin-left: 80%;`;\r\n\t\t}\r\n\t}}\r\n\t//margin-left: 0rem;\r\n\t//position: absolute;\r\n\t//left: 0;\r\n\t//top: 0;\r\n\tz-index: 1;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\t// left: 85%;\r\n\t\t// top: 0;\r\n\t\t// transform: translate(-50%, 0);\r\n\t}\r\n`;\r\nexport const CustomImg = styled.img`\r\n\tmin-width: 30px !important;\r\n\tmax-width: 30px !important;\r\n\ttop: none !important;\r\n`;\r\nexport const TagPoints = styled.div``;\r\n\r\nexport const TagOne = styled.div``;\r\n\r\nexport const TagTwo = styled.div``;\r\n\r\nexport const LabelRectangular = styled.button`\r\n\tmargin-bottom: 1rem;\r\n\tborder-radius: 0.2rem;\r\n\tfont-size: 0.8rem;\r\n\tbackground-color: ${(props) => props.backgroundColor || \"#C2C2C2\"};\r\n\tcolor: ${(props) => props.fontColor || \"#000\"};\r\n\tz-index: 1;\r\n`;\r\n\r\nexport const LabelCircularPoints = styled.button`\r\n\tborder-radius: 50%;\r\n\twidth: 40px;\r\n\theight: 40px;\r\n\tfont-size: 0.925rem;\r\n\tfont-weight: bold;\r\n\tbackground-color: ${(props) => props.backgroundColor || \"#C2C2C2\"};\r\n\tcolor: ${(props) => props.fontColor || \"#000\"};\r\n\tz-index: 1;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\talign-items: center;\r\n`;\r\n\r\nexport const LabelCircular = styled.button`\r\n\tborder-radius: 50%;\r\n\twidth: 40px;\r\n\theight: 40px;\r\n\tfont-size: 0.725rem;\r\n\tbackground-color: ${(props) => props.backgroundColor || \"#C2C2C2\"};\r\n\tcolor: ${(props) => props.fontColor || \"#000\"};\r\n\tz-index: 1;\r\n`;\r\n","import React, {\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n\tuser,\r\n\taddressActions,\r\n\tmenuActions\r\n} from '../../state'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tCustomIcon,\r\n\tCustomImage\r\n} from '../components'\r\n\r\nimport {\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport NoProduct from '../assets/no-product-card.png'\r\n\r\nimport {\r\n\tremoveSelectedProduct,\r\n\taddProduct,\r\n\tremoveProduct,\r\n\thandleGTM,\r\n\t//removeSelectedProductAdditional,\r\n\tsetSelectedCategory,\r\n\tsetOpenCart,\r\n\tsetQuantity,\r\n\thandlePixel\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tWrapper,\r\n\tImageWrapper,\r\n\tTextarea,\r\n\tButton,\r\n\tCloseButton,\r\n\tH1,\r\n\tH4,\r\n\tParagraph,\r\n\tSpan,\r\n\tNotesWrapper,\r\n\tDiv,\r\n\tDetailBox,\r\n\tAdditionalBox,\r\n\tTagWrapper,\r\n\tTagOne,\r\n\tTagTwo,\r\n\tLabelRectangular,\r\n\tLabelCircular,\r\n\tLeftWrapper,\r\n\tRightWrapper,\r\n\tTagPointsWrapper,\r\n\tCustomImg,\r\n\tTagPoints,\r\n\tLabelCircularPoints,\r\n\tTagContentWrapper,\r\n\tParagraphPromo,\r\n\tSpanButton\r\n} from './styles'\r\nimport Selo from '../assets/icone_menu_fidelidade.png'\r\n\r\nimport {\r\n\tAdditionals\r\n} from '.'\r\n\r\nimport { useDeviceLayout } from '../hooks'\r\nimport { IMAGE_ELEVATE } from '../../config'\r\nimport { createUuid } from '../../domain/helpers/Uuid'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nconst Notes = ({\r\n\tstatus,\r\n\tquantity,\r\n\ttotal,\r\n\tupdate,\r\n\thandleQuantity,\r\n\thandleAdd,\r\n\tadditionals,\r\n\tnotes,\r\n\thandleNote\r\n}) => {\r\n\treturn \r\n\t\t{!additionals && <>\r\n\t\t\t handleNote(e)}\r\n\t\t\t/>\r\n\t\t}\r\n\t\t \r\n}\r\n\r\nNotes.propTypes = {\r\n\tstatus: PropTypes.number,\r\n\tquantity: PropTypes.number,\r\n\ttotal: PropTypes.number,\r\n\tupdate: PropTypes.bool,\r\n\thandleQuantity: PropTypes.func,\r\n\thandleAdd: PropTypes.func,\r\n\tadditionals: PropTypes.arrayOf(PropTypes.shape({}))\r\n}\r\n\r\nfunction ProductCardPage(props) {\r\n\tconst {\r\n\t\tstoreStatus,\r\n\t\tselectedProduct,\r\n\t\tselectedCategory,\r\n\t\tremoveSelectedProductAdditional,\r\n\t\tsetSelectedProduct,\r\n\t\taddProduct,\r\n\t\t//removeProduct,\r\n\t\tcart,\r\n\t\thandleClose,\r\n\t\tsetAddressPostalCodeRequest,\r\n\t\tsetAddressRequest,\r\n\t\tsetNoAddressesList,\r\n\t\taddress,\r\n\t\tsetUserCallback,\r\n\t\taccessToken,\r\n\t\thandleStatusNotification,\r\n\t\tmodalityId,\r\n\t\tsetQuantity,\r\n\t\thandleGTM,\r\n\t\thandlePixel,\r\n\t\tstoreName\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tlayoutModeEnum,\r\n\t\thandleLayoutMode\r\n\t} = useLayout()\r\n\r\n\tconst {\r\n\t\tsidebarContentEnum,\r\n\t\thandleSidebarContent,\r\n\t\thandleSidebarOpened\r\n\t} = useSidebar()\r\n\r\n\tconst [loaded, setLoaded] = useState(false)\r\n\tconst [lastQuantity, setLastQuantity] = useState(0)\r\n\tconst [update, setUpdate] = useState(0)\r\n\tconst [total, setTotal] = useState(0)\r\n\tconst [value, setPrice] = useState(0)\r\n\tconst [fromValue, setFromPrice] = useState(0)\r\n\tconst [notes, setNotes] = useState(\"\")\r\n\tconst [cartProductPreviousQuantity, setCartProductPreviousQuantity] = useState(0)\r\n\tconst hasAdditionals = selectedProduct && selectedProduct.additionals && selectedProduct.additionals.length\r\n\tconst hasImage = selectedProduct && selectedProduct.image\r\n\r\n\tconst isMobile = useDeviceLayout({\r\n\t\tisMobile: true\r\n\t})\r\n\r\n\tuseEffect(() => {\r\n\t\tif (selectedProduct) {\r\n\t\t\tconst {\r\n\t\t\t\tproducts\r\n\t\t\t} = cart\r\n\r\n\t\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === selectedProduct.id))[0] : null\r\n\t\t\tconst cartProductPreviousQuantity = selectedProduct.isNewAddition ? 1 : ((cartProductPrevious && cartProductPrevious.quantity) || 0)\r\n\t\t\tconst finalQuantity = !update && cartProductPreviousQuantity ? cartProductPreviousQuantity : selectedProduct.quantity\r\n\t\t\tconst value = `R$ ${Number(selectedProduct.value).toFixed(2).replace('.', ',')}`\r\n\t\t\tconst fromValue = `R$ ${Number(selectedProduct.fromValue).toFixed(2).replace('.', ',')}`\r\n\r\n\t\t\tconst selectedAdditionals = (selectedProduct && selectedProduct.selectedAdditionals) || (cartProductPrevious && cartProductPrevious.selectedAdditionals)\r\n\r\n\t\t\tconst selectedAdditionalsGroups = selectedAdditionals && selectedAdditionals.length && selectedAdditionals.map((mappedItem) => {\r\n\t\t\t\tconst selectedAdditionalsMaximum = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 3)\r\n\t\t\t\tconst selectedAdditionalsAverage = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 2)\r\n\t\t\t\tconst selectedAdditionalsFixes = mappedItem.items && mappedItem.items.length && mappedItem.items.filter(filteredItem => filteredItem.calcType === 1)\r\n\r\n\t\t\t\tconst additionalsMaximumTotal = (selectedAdditionalsMaximum && selectedAdditionalsMaximum.length && Math.max.apply(Math, selectedAdditionalsMaximum.map((selectedAdditionalsMaximumItem) => selectedAdditionalsMaximumItem.value))) || 0\r\n\t\t\t\tconst additionalsAverageTotal = selectedAdditionalsAverage && selectedAdditionalsAverage.length ? (selectedAdditionalsAverage.reduce((acc, current) => Number(acc + current.value), [])) / selectedAdditionalsAverage.length : 0\r\n\t\t\t\tconst additionalsFixesTotal = selectedAdditionalsFixes && selectedAdditionalsFixes.length ? selectedAdditionalsFixes.reduce((acc, current) => {\r\n\t\t\t\t\tif (current.quantity > 1) {\r\n\t\t\t\t\t\treturn Number(acc + (current.value * current.quantity))\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn Number(acc + current.value)\r\n\t\t\t\t}, []) : 0\r\n\r\n\t\t\t\treturn additionalsMaximumTotal + additionalsAverageTotal + additionalsFixesTotal\r\n\t\t\t})\r\n\t\t\tconst finalPriceProduct = !selectedProduct.promotionalValue ? selectedProduct.value : selectedProduct.promotionalValue\r\n\r\n\t\t\tconst selectedAdditionalsGroupsTotal = (selectedAdditionalsGroups && selectedAdditionalsGroups.length && selectedAdditionalsGroups.reduce((acc, current) => Number(acc + current), [])) || 0\r\n\r\n\t\t\tsetLastQuantity(finalQuantity)\r\n\t\t\tsetTotal(finalQuantity * (finalPriceProduct + selectedAdditionalsGroupsTotal))\r\n\t\t\tsetPrice(value)\r\n\t\t\tsetCartProductPreviousQuantity(cartProductPreviousQuantity)\r\n\t\t\tsetFromPrice(fromValue)\r\n\t\t}\r\n\r\n\t\treturn () => { }\r\n\t}, [\r\n\t\tcart,\r\n\t\tselectedProduct,\r\n\t\tupdate,\r\n\t\tloaded,\r\n\t\tsetLoaded\r\n\t])\r\n\r\n\tfunction handleQuantity(item) {\r\n\t\tconst {\r\n\t\t\tquantity: quantityIncrement\r\n\t\t} = item\r\n\r\n\t\tconst newProduct = {\r\n\t\t\t...selectedProduct,\r\n\t\t\tquantity: lastQuantity + quantityIncrement,\r\n\t\t\tcategory: selectedCategory,\r\n\t\t}\r\n\r\n\t\tsetUpdate(true)\r\n\r\n\t\tif (newProduct.quantity > 999) return false\r\n\t\tif (newProduct.quantity < 1) return false\r\n\r\n\t\tsetLastQuantity(newProduct.quantity)\r\n\t\tsetSelectedProduct(newProduct)\r\n\t}\r\n\r\n\tfunction handleAdditionalsChange(item, hasAdded, checkbox, selectedGroupItemsQuantity) {\r\n\t\tconst {\r\n\t\t\tquantity: quantityIncrement\r\n\t\t} = item\r\n\r\n\t\tif (hasAdded) {\r\n\t\t\tremoveSelectedProductAdditional(item)\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tconst {\r\n\t\t\tgroupId,\r\n\t\t\tcalcType,\r\n\t\t\tminimum,\r\n\t\t\tmaximum\r\n\t\t} = item\r\n\r\n\t\tconst {\r\n\t\t\tproducts\r\n\t\t} = cart\r\n\r\n\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === item.id))[0] : null\r\n\t\tconst selectedAdditionals = (selectedProduct && selectedProduct.selectedAdditionals) || cartProductPrevious.selectedAdditionals\r\n\t\tconst selectedAdditionalGroup = (selectedAdditionals && selectedAdditionals.length && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType)[0])) || null\r\n\r\n\t\tif (selectedAdditionalGroup && selectedAdditionalGroup.items && selectedAdditionalGroup.items.length + quantityIncrement > maximum) {\r\n\t\t\tconst group = document.getElementById(`additionals-group-${selectedAdditionalGroup.groupId}-${selectedAdditionalGroup.calcType}`)\r\n\r\n\t\t\tgroup.classList.add('maximum')\r\n\r\n\t\t\treturn false\r\n\t\t}\r\n\r\n\t\tif (checkbox && selectedGroupItemsQuantity === maximum) {\r\n\t\t\tconst group = document.getElementById(`additionals-group-${selectedAdditionalGroup.groupId}-${selectedAdditionalGroup.calcType}`)\r\n\r\n\t\t\tgroup.classList.add('maximum')\r\n\r\n\t\t\treturn false\r\n\t\t}\r\n\r\n\t\tif (!selectedAdditionalGroup) {\r\n\t\t\tconst newGroup = {\r\n\t\t\t\tgroupId,\r\n\t\t\t\tcalcType,\r\n\t\t\t\tminimum,\r\n\t\t\t\tmaximum,\r\n\t\t\t\titems: [\r\n\t\t\t\t\titem\r\n\t\t\t\t]\r\n\t\t\t}\r\n\r\n\t\t\tconst newProduct = {\r\n\t\t\t\t...selectedProduct,\r\n\t\t\t\tselectedAdditionals: [\r\n\t\t\t\t\t...selectedAdditionals,\r\n\t\t\t\t\tnewGroup\r\n\t\t\t\t]\r\n\t\t\t}\r\n\r\n\t\t\tsetSelectedProduct(newProduct)\r\n\r\n\t\t\thandlePixel({\r\n\t\t\t\teventName: 'CustomizeProduct',\r\n\t\t\t\tbody: ''\r\n\t\t\t})\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tif (selectedAdditionalGroup) {\r\n\t\t\tconst {\r\n\t\t\t\titems = []\r\n\t\t\t} = selectedAdditionalGroup\r\n\r\n\t\t\tconst newSelectedAdditionals = selectedAdditionals.map(mappedItem => {\r\n\t\t\t\tif (mappedItem.groupId === groupId && mappedItem.calcType === calcType) {\r\n\t\t\t\t\tconst newItems = [\r\n\t\t\t\t\t\t...items,\r\n\t\t\t\t\t\titem\r\n\t\t\t\t\t]\r\n\r\n\t\t\t\t\tconst newMappedItem = {\r\n\t\t\t\t\t\t...mappedItem,\r\n\t\t\t\t\t\titems: newItems\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn newMappedItem\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn mappedItem\r\n\t\t\t})\r\n\r\n\t\t\tconst newProduct = {\r\n\t\t\t\t...selectedProduct,\r\n\t\t\t\tselectedAdditionals: [\r\n\t\t\t\t\t...newSelectedAdditionals\r\n\t\t\t\t]\r\n\t\t\t}\r\n\r\n\t\t\tsetSelectedProduct(newProduct)\r\n\r\n\t\t\thandlePixel({\r\n\t\t\t\teventName: 'CustomizeProduct',\r\n\t\t\t\tbody: ''\r\n\t\t\t})\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\t}\r\n\r\n\tfunction handleAdditionalsQuantity(item) {\r\n\t\tconst {\r\n\t\t\tid,\r\n\t\t\tquantity: quantityIncrement,\r\n\t\t\tgroupId,\r\n\t\t\tcalcType,\r\n\t\t\tminimum,\r\n\t\t\tmaximum\r\n\t\t} = item\r\n\r\n\t\tconst {\r\n\t\t\tproducts\r\n\t\t} = cart\r\n\r\n\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === item.id))[0] : null\r\n\t\tconst selectedAdditionals = selectedProduct.selectedAdditionals || cartProductPrevious.selectedAdditionals\r\n\t\tconst selectedAdditionalGroup = (selectedAdditionals && selectedAdditionals.length && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType)[0])) || null\r\n\r\n\t\tif (selectedAdditionalGroup && selectedAdditionalGroup.items && selectedAdditionalGroup.items.length + quantityIncrement > maximum) {\r\n\t\t\treturn false\r\n\t\t}\r\n\r\n\t\tif (!selectedAdditionalGroup) {\r\n\t\t\tconst newItem = {\r\n\t\t\t\t...item,\r\n\t\t\t\tquantity: 1\r\n\t\t\t}\r\n\r\n\t\t\tconst newGroup = {\r\n\t\t\t\tgroupId,\r\n\t\t\t\tcalcType,\r\n\t\t\t\tminimum,\r\n\t\t\t\tmaximum,\r\n\t\t\t\titems: [\r\n\t\t\t\t\tnewItem\r\n\t\t\t\t]\r\n\t\t\t}\r\n\r\n\t\t\tconst newProduct = {\r\n\t\t\t\t...selectedProduct,\r\n\t\t\t\tselectedAdditionals: [\r\n\t\t\t\t\t...selectedAdditionals,\r\n\t\t\t\t\tnewGroup\r\n\t\t\t\t]\r\n\t\t\t}\r\n\r\n\t\t\tsetSelectedProduct(newProduct)\r\n\r\n\t\t\thandlePixel({\r\n\t\t\t\teventName: 'CustomizeProduct',\r\n\t\t\t\tbody: ''\r\n\t\t\t})\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tif (selectedAdditionalGroup) {\r\n\t\t\tconst {\r\n\t\t\t\titems = []\r\n\t\t\t} = selectedAdditionalGroup\r\n\r\n\t\t\tconst newSelectedAdditionals = selectedAdditionals.map(mappedItem => {\r\n\t\t\t\tconst hasSelectedAdditional = mappedItem.items && mappedItem.items.filter(filteredItem => filteredItem.code === id)\r\n\r\n\t\t\t\tconst quantityTotal = items.reduce((acc, current) => {\r\n\t\t\t\t\treturn Number(acc + current.quantity)\r\n\t\t\t\t}, 0)\r\n\t\t\t\tconst quantityRemaining = maximum - quantityTotal\r\n\r\n\t\t\t\tif (!hasSelectedAdditional.length && mappedItem.groupId === groupId && mappedItem.calcType === calcType && quantityRemaining) {\r\n\t\t\t\t\tconst newItem = {\r\n\t\t\t\t\t\t...item,\r\n\t\t\t\t\t\tquantity: 1\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tconst newItems = [\r\n\t\t\t\t\t\t...items,\r\n\t\t\t\t\t\tnewItem\r\n\t\t\t\t\t]\r\n\r\n\t\t\t\t\tconst newMappedItem = {\r\n\t\t\t\t\t\t...mappedItem,\r\n\t\t\t\t\t\titems: newItems\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn newMappedItem\r\n\t\t\t\t}\r\n\r\n\t\t\t\tif (hasSelectedAdditional.length && mappedItem.groupId === groupId && mappedItem.calcType === calcType && ((quantityRemaining && quantityIncrement > 0) || ((!quantityRemaining || quantityRemaining) && quantityIncrement < 0))) {\r\n\t\t\t\t\tconst newItems = items && items.length && (items.map((newItemsMappedItem) => {\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\tquantity: newItemsMappedItemQuantity = 0\r\n\t\t\t\t\t\t} = newItemsMappedItem\r\n\r\n\t\t\t\t\t\tconst newQuantity = newItemsMappedItemQuantity + quantityIncrement\r\n\r\n\t\t\t\t\t\tif (newQuantity >= 1 && newQuantity <= maximum && hasSelectedAdditional && hasSelectedAdditional[0] && hasSelectedAdditional[0].code === newItemsMappedItem.code) {\r\n\t\t\t\t\t\t\treturn {\r\n\t\t\t\t\t\t\t\t...newItemsMappedItem,\r\n\t\t\t\t\t\t\t\tquantity: newQuantity\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (newQuantity < 1 && hasSelectedAdditional && hasSelectedAdditional[0] && hasSelectedAdditional[0].code === newItemsMappedItem.code) {\r\n\t\t\t\t\t\t\treturn false\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\treturn {\r\n\t\t\t\t\t\t\t...newItemsMappedItem\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t})).filter(filteredItem => filteredItem !== false)\r\n\r\n\t\t\t\t\tconst newMappedItem = {\r\n\t\t\t\t\t\t...mappedItem,\r\n\t\t\t\t\t\titems: newItems\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn newMappedItem\r\n\t\t\t\t}\r\n\r\n\t\t\t\treturn mappedItem\r\n\t\t\t})\r\n\r\n\t\t\tconst newProduct = {\r\n\t\t\t\t...selectedProduct,\r\n\t\t\t\tselectedAdditionals: [\r\n\t\t\t\t\t...newSelectedAdditionals\r\n\t\t\t\t]\r\n\t\t\t}\r\n\r\n\t\t\tsetSelectedProduct(newProduct)\r\n\r\n\t\t\thandlePixel({\r\n\t\t\t\teventName: 'CustomizeProduct',\r\n\t\t\t\tbody: ''\r\n\t\t\t})\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\t}\r\n\r\n\tasync function handleAdd() {\r\n\t\tconst product = {\r\n\t\t\t...selectedProduct,\r\n\t\t\tuuid: createUuid(),\r\n\t\t\tnotes: notes,\r\n\t\t\tquantity: lastQuantity\r\n\t\t}\r\n\r\n\t\tconst {\r\n\t\t\tproducts\r\n\t\t} = cart\r\n\r\n\t\tconst {\r\n\t\t\tadditionals,\r\n\t\t\tselectedAdditionals\r\n\t\t} = selectedProduct\r\n\r\n\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === product.id))[0] : null\r\n\r\n\t\tconst requiredAdditionals = additionals && additionals.filter(filteredItem => filteredItem.minimum >= 1)\r\n\r\n\t\tconst getSelectedAdditionals = (requiredAdditionalsFilteredItem) => {\r\n\t\t\treturn selectedAdditionals.filter(selectedAdditionalsFilteredItem => {\r\n\t\t\t\tconst isGroupEquals = selectedAdditionalsFilteredItem.groupId === requiredAdditionalsFilteredItem.groupId &&\r\n\t\t\t\t\tselectedAdditionalsFilteredItem.calcType === requiredAdditionalsFilteredItem.calcType;\r\n\r\n\t\t\t\tif (!isGroupEquals) {\r\n\t\t\t\t\treturn false;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst items = selectedAdditionalsFilteredItem.items || [];\r\n\r\n\t\t\t\tif (requiredAdditionalsFilteredItem.checkbox) {\r\n\t\t\t\t\treturn items.length >= requiredAdditionalsFilteredItem.minimum;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tconst total = items.reduce((total, item) => total + item.quantity, 0);\r\n\t\t\t\treturn total >= requiredAdditionalsFilteredItem.minimum;\r\n\t\t\t}\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\tconst hasMinimum = requiredAdditionals && requiredAdditionals.filter(requiredAdditionalsFilteredItem => {\r\n\t\t\tconst selectedAdditional = getSelectedAdditionals(requiredAdditionalsFilteredItem);\r\n\r\n\t\t\tif (!selectedAdditional.length) {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\r\n\t\t\tconst {\r\n\t\t\t\titems = []\r\n\t\t\t} = selectedAdditional[0]\r\n\r\n\t\t\tif (!items.length) {\r\n\t\t\t\treturn false\r\n\t\t\t}\r\n\r\n\t\t\treturn true\r\n\t\t})\r\n\r\n\t\tconst hasNoMinimum = requiredAdditionals && requiredAdditionals.filter(requiredAdditionalsFilteredItem => {\r\n\t\t\tconst selectedAdditional = getSelectedAdditionals(requiredAdditionalsFilteredItem);\r\n\r\n\t\t\tif (!selectedAdditional.length) {\r\n\t\t\t\treturn true\r\n\t\t\t}\r\n\r\n\t\t\tconst {\r\n\t\t\t\titems = []\r\n\t\t\t} = selectedAdditional[0]\r\n\r\n\t\t\tif (!items.length) {\r\n\t\t\t\treturn true\r\n\t\t\t}\r\n\r\n\t\t\treturn false\r\n\t\t})\r\n\r\n\t\thasMinimum && hasMinimum.length && hasMinimum.forEach((hasMinimum) => {\r\n\t\t\tconst group = document.getElementById(`additionals-group-${hasMinimum.groupId}-${hasMinimum.calcType}`)\r\n\r\n\t\t\tgroup.classList.remove('required')\r\n\t\t})\r\n\r\n\t\tif (hasMinimum.length < requiredAdditionals.length && hasNoMinimum.length) {\r\n\t\t\tconst additionals = document.getElementById(`additionals`)\r\n\t\t\tconst additionalsDialog = document.querySelectorAll(`#product-view-dialog.product-detail.has-additionals.mobile .MuiDialog-paper`)[0]\r\n\t\t\tconst additionalsDialogItem = additionalsDialog && additionalsDialog[0]\r\n\r\n\t\t\tadditionals && hasNoMinimum.forEach((hasNoMinimumItem) => {\r\n\t\t\t\tconst group = document.getElementById(`additionals-group-${hasNoMinimumItem.groupId}-${hasNoMinimumItem.calcType}`)\r\n\t\t\t\tconst groupOffsetTop = group.offsetTop\r\n\r\n\t\t\t\tif (additionalsDialogItem) {\r\n\t\t\t\t\tadditionalsDialog.scrollTop = groupOffsetTop\r\n\t\t\t\t} else {\r\n\t\t\t\t\tadditionals.scrollTop = groupOffsetTop\r\n\t\t\t\t}\r\n\r\n\t\t\t\tgroup.classList.add('required')\r\n\t\t\t})\r\n\r\n\t\t\treturn false\r\n\t\t}\r\n\r\n\t\tif (storeStatus !== 1) {\r\n\t\t\thandleStatusNotification()\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tif (modalityId === 4) {\r\n\t\t\tif (address && (!address.main || !address.verified)) {\r\n\t\t\t\tconst {\r\n\t\t\t\t\tid,\r\n\t\t\t\t\tname,\r\n\t\t\t\t\tdescription,\r\n\t\t\t\t\timage,\r\n\t\t\t\t\tvalue,\r\n\t\t\t\t\tquantity,\r\n\t\t\t\t\tadditionals,\r\n\t\t\t\t\tselectedAdditionals,\r\n\t\t\t\t\tcategory,\r\n\t\t\t\t\tpromotionalValue\r\n\t\t\t\t} = selectedProduct\r\n\r\n\t\t\t\tif (accessToken) {\r\n\t\t\t\t\tsetAddressRequest(true)\r\n\t\t\t\t\tsetAddressPostalCodeRequest(false)\r\n\t\t\t\t\tsetNoAddressesList(false)\r\n\t\t\t\t} else {\r\n\t\t\t\t\tsetAddressPostalCodeRequest(true)\r\n\t\t\t\t\tsetAddressRequest(false)\r\n\t\t\t\t}\r\n\r\n\t\t\t\tsetUserCallback({\r\n\t\t\t\t\tname: 'add-product',\r\n\t\t\t\t\tdata: {\r\n\t\t\t\t\t\tindex: 0,\r\n\t\t\t\t\t\tid,\r\n\t\t\t\t\t\tuuid: createUuid(),\r\n\t\t\t\t\t\tname,\r\n\t\t\t\t\t\tdescription,\r\n\t\t\t\t\t\timage,\r\n\t\t\t\t\t\tvalue,\r\n\t\t\t\t\t\tquantity,\r\n\t\t\t\t\t\tadditionals,\r\n\t\t\t\t\t\tselectedAdditionals,\r\n\t\t\t\t\t\tcategory,\r\n\t\t\t\t\t\tpromotionalValue\r\n\t\t\t\t\t}\r\n\t\t\t\t})\r\n\r\n\t\t\t\treturn\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tlet verified = true;\r\n\r\n\t\tif (!product.isNewAddition) {\r\n\t\t\tverified = await checkDifference(product)\r\n\t\t}\r\n\r\n\t\tif (cartProductPreviousQuantity && !verified) {\r\n\t\t\tsetQuantity({\r\n\t\t\t\tid: product.id,\r\n\t\t\t\tuuid: cartProductPrevious.uuid,\r\n\t\t\t\tquantity: 1\r\n\t\t\t})\r\n\r\n\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\thandleSidebarOpened(true)\r\n\r\n\t\t\thandleClose()\r\n\r\n\t\t\treturn\r\n\t\t} else {\r\n\t\t\tawait addProduct(product)\r\n\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\thandleSidebarOpened(true)\r\n\r\n\t\t\thandleClose()\r\n\t\t}\r\n\r\n\t\t//GTM 3.0 - Evento de Adicionar produto ao carrrinho\r\n\t\tconst dataAddProduct = {\r\n\t\t\t'event': `add_to_cart`,\r\n\t\t\t'store': storeName,\r\n\t\t\t'ecommerce': {\r\n\t\t\t\t'currency': 'BRL',\r\n\t\t\t\t'items': [{\r\n\t\t\t\t\t'item_name': product.name,\r\n\t\t\t\t\t'item_id': product.id,\r\n\t\t\t\t\t'price': product.promotionalValue ? product.promotionalValue : product.value,\r\n\t\t\t\t\t'discount': null,\r\n\t\t\t\t\t'categoria': product.categoryName ?? null,\r\n\t\t\t\t\t'quantity': 1\r\n\t\t\t\t}]\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tconst pixelAddProduct = {\r\n\t\t\teventName: `AddToCart`,\r\n\t\t\tbody: {\r\n\t\t\t\tcontent_ids: product.id,\r\n\t\t\t\tcontent_name: product.name,\r\n\t\t\t\tcontent_type: product.categoryName,\r\n\t\t\t\tcurrency: 'BRL',\r\n\t\t\t\tvalue: product.promotionalValue ? product.promotionalValue : product.value\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\thandlePixel(pixelAddProduct)\r\n\t\thandleGTM(dataAddProduct)\r\n\t\t//console.warn({dataAddProduct})\r\n\r\n\t}\r\n\r\n\tconst checkDifference = (product) => {\r\n\t\tconst {\r\n\t\t\tproducts\r\n\t\t} = cart\r\n\r\n\t\tconst cartProductPrevious = (products && products.length) ? (products.filter(filteredItem => filteredItem.id === product.id))[0] : null\r\n\r\n\t\tlet difference = false\r\n\t\tconst checkAddionals = []\r\n\t\tproduct && product.selectedAdditionals.forEach((additional) => {\r\n\t\t\tconst selectedProductGroupId = (cartProductPrevious && cartProductPrevious.selectedAdditionals.find((selected) => selected.groupId === additional.groupId)) || null\r\n\t\t\tif (selectedProductGroupId) {\r\n\t\t\t\tif (additional.items && additional.items.length > 0) {\r\n\t\t\t\t\tadditional.items.forEach((mappedItem) => {\r\n\t\t\t\t\t\tconst objCheck = selectedProductGroupId.items.find((selected) => selected.code === mappedItem.code) || null\r\n\r\n\t\t\t\t\t\tif (objCheck) checkAddionals.push(\"found\")\r\n\t\t\t\t\t\telse checkAddionals.push(\"not_found\")\r\n\t\t\t\t\t})\r\n\r\n\t\t\t\t\tconst verified = (checkAddionals.indexOf(\"not_found\") > -1) ? true : false\r\n\t\t\t\t\tdifference = verified\r\n\t\t\t\t\treturn difference\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tdifference = true\r\n\t\t\t}\r\n\t\t})\r\n\r\n\t\treturn difference\r\n\t}\r\n\r\n\tconst handleNote = (e) => {\r\n\t\tsetNotes(e.target.value)\r\n\t}\r\n\r\n\tif (selectedProduct && (!selectedProduct.name /* || !selectedProduct.value */)) {\r\n\t\treturn null\r\n\t}\r\n\r\n\treturn <>\r\n\t\t\r\n\t\t\t {\r\n\t\t\t\thandleClose()\r\n\t\t\t}}>\r\n\t\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t{selectedProduct.tags && selectedProduct.tags.length > 0 ? \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{selectedProduct.tags && selectedProduct.tags.length > 0 ? selectedProduct.tags.map((item, index) => {\r\n\t\t\t\t\t\t\tconst key = `product-view-tag-item-${index}-${item.id}`\r\n\r\n\t\t\t\t\t\t\tif (item.type === 1) {\r\n\t\t\t\t\t\t\t\tif (item.format === 2) return ({item.text} )\r\n\t\t\t\t\t\t\t\treturn ({item.text} )\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\treturn null\r\n\t\t\t\t\t\t}) : null}\r\n\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{selectedProduct.tags && selectedProduct.tags.length > 0 ? selectedProduct.tags.map((item) => {\r\n\t\t\t\t\t\t\tif (item.type === 2) {\r\n\t\t\t\t\t\t\t\tif (item.format === 2) return ({item.text} )\r\n\t\t\t\t\t\t\t\treturn ({item.text} )\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\treturn null\r\n\t\t\t\t\t\t}) : null}\r\n\t\t\t\t\t \r\n\t\t\t\t : null}\r\n\t\t\t\t{selectedProduct && \r\n\t\t\t\t\t{selectedProduct.image ? (IMAGE_ELEVATE === 'true' ? \r\n\t\t\t\t\t\t : \r\n\t\t\t\t\t\t ) : \r\n\t\t\t\t\t\t }\r\n\r\n\t\t\t\t\t{selectedProduct.loyaltyPoints > 0 && \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t \r\n\t\t\t\t\t }\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{selectedProduct.description} \r\n\r\n\t\t\t\t\t\t{selectedProduct.showFromValueText && A partir de: }\r\n\r\n\t\t\t\t\t\t{!selectedProduct.promotionalValue && {selectedProduct.fromValue ? fromValue : value} }\r\n\r\n\t\t\t\t\t\t{selectedProduct.promotionalValue && {value} R$ {selectedProduct.promotionalValue ? Number(selectedProduct.promotionalValue).toFixed(2).replace('.', ',') : ''} }\r\n\t\t\t\t\t \r\n\t\t\t\t }\r\n\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t{selectedProduct && selectedProduct.additionals && selectedProduct.additionals.length ? \r\n\t\t\t\t\t : null}\r\n\r\n\t\t\t\t \r\n\t\t \r\n\t\r\n}\r\n\r\nProductCardPage.propTypes = {\r\n\tstoreStatus: PropTypes.number,\r\n\tselectedProduct: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tname: PropTypes.string,\r\n\t\tdescription: PropTypes.string,\r\n\t\timage: PropTypes.string,\r\n\t\tvalue: PropTypes.number,\r\n\t\tquantity: PropTypes.number,\r\n\t\tadditionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\t\tselectedAdditionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\t\tcategory: PropTypes.shape({}),\r\n\t\tpromotionalValue: PropTypes.number,\r\n\t\ttags: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\tselectedCategory: PropTypes.shape({}),\r\n\tremoveSelectedProductAdditional: PropTypes.func,\r\n\tsetSelectedProduct: PropTypes.func,\r\n\taddProduct: PropTypes.func,\r\n\tremoveProduct: PropTypes.func,\r\n\tcart: PropTypes.shape({\r\n\t\tproducts: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\thandleClose: PropTypes.func,\r\n\tsetOpenCart: PropTypes.func,\r\n\tsetAddressPostalCodeRequest: PropTypes.func,\r\n\taddress: PropTypes.shape({\r\n\t\tmain: PropTypes.string,\r\n\t\tverified: PropTypes.bool\r\n\t}),\r\n\tsetUserCallback: PropTypes.func,\r\n\tsetAddressRequest: PropTypes.func,\r\n\tsetNoAddressesList: PropTypes.func,\r\n\taccessToken: PropTypes.string\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tselectedProduct: state.menu.selectedProduct || {},\r\n\t\tstoreStatus: state.store.store && state.store.store.status,\r\n\t\tstoreName: state.store.store && state.store.store.name,\r\n\t\tselectedCategory: state.store.store && state.store.store.selectedCategory,\r\n\t\topenModalCategory: state.store.store && state.store.store.selectedCategory && state.store.store.selectedCategory.openModalCategory,\r\n\t\tcart: state.main.cart,\r\n\t\tmodalityId: state.main.modality.id,\r\n\t\taddress: (state.address.address) || {},\r\n\t\taccessToken: (state.user.accessToken) || ''\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tsetUserCallback: user.setUserCallback,\r\n\tsetSelectedProduct: menuActions.setSelectedProduct,\r\n\tsetAddressPostalCodeRequest: addressActions.setAddressPostalCodeRequest,\r\n\tsetAddressRequest: addressActions.setAddressRequest,\r\n\tsetNoAddressesList: addressActions.setNoAddressesList,\r\n\tremoveSelectedProduct,\r\n\tremoveSelectedProductAdditional: menuActions.removeSelectedProductAdditional,\r\n\taddProduct,\r\n\tremoveProduct,\r\n\thandleGTM,\r\n\thandlePixel,\r\n\tsetSelectedCategory,\r\n\tsetOpenCart,\r\n\tsetQuantity\r\n})\r\n\r\nexport const ProductCard = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'payment' })\r\n)(ProductCardPage))\r\n","import styled from 'styled-components'\r\n\r\nexport const AdditionalsWrapper = styled.div`\r\n\tmin-width: 100%;\r\n\tpadding: 0;\r\n\r\n\t::-webkit-scrollbar {\r\n\t\twidth: 9px;\r\n\t}\r\n\t\r\n\t::-webkit-scrollbar-track {\r\n\t\t-webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n\t\tborder-radius: 10px;\r\n\t}\r\n\t\r\n\t::-webkit-scrollbar-thumb {\r\n\t\tborder-radius: 10px;\r\n\t\tbackground: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'}; \r\n\t\t-webkit-box-shadow: inset 0 0 6px ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}; \r\n\t}\r\n`\r\n\r\nexport const AdditionalWrapper = styled.div`\r\n &.maximum {\r\n > ul {\r\n > li {\r\n &:not(.checked) {\r\n opacity: .5;\r\n }\r\n }\r\n }\r\n\r\n\t\t> span {\r\n\t\t\tcolor: #F00;\r\n\t\t\tanimation: required .5s;\r\n\t\t\tposition: relative;\r\n\t\t\tmargin: 1rem;\r\n\t\t\tfont-size: 12px;\r\n\t\t}\r\n }\r\n\r\n &.required {\r\n > div {\r\n\r\n > h3 {\r\n color: #F00;\r\n animation: required .5s;\r\n position: relative;\r\n }\r\n\r\n > span {\r\n color: #F00;\r\n border-color: #F00;\r\n animation: required .5s;\r\n position: relative;\r\n }\r\n }\r\n }\r\n\r\n @keyframes required {\r\n from { left: 0;}\r\n 25% { left: 0.938rem }\r\n 50% { left: -15px }\r\n 75% { left: 0.938rem }\r\n to { left: 0; }\r\n }\r\n`\r\n\r\nexport const AdditionalHeader = styled.div`\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundBody) || '#000'};\r\n flex: 1;\r\n padding: 1rem 1.5rem;\r\n margin: 0 -1.5rem;\r\n margin-bottom: 1.25rem;\r\n min-width: 100%;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n\tbox-sizing: border-box;\r\n\r\n > h3 {\r\n flex: 1;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n min-height: 1.563rem;\r\n\t\tfont-size: 1.25rem;\r\n }\r\n\r\n > span {\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'} 0.063rem solid;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n font-size: 0.875rem;\r\n height: 1.25rem;\r\n min-height: 1.563rem;\r\n border-radius: 1.25rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0 0.625rem;\r\n flex: 1;\r\n max-width: 6.25rem;\r\n min-width: 6.25rem;\r\n }\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tpadding: .5rem 1rem;\r\n\t\tmargin: unset;\r\n\t}\r\n`\r\n\r\nexport const AdditionalList = styled.ul`\r\n list-style: inside none;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n min-width: 100%;\r\n\tmax-width: 100%;\r\n padding-bottom: 0;\r\n\tmargin: 0;\r\n margin-bottom: 1rem;\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tmargin-bottom: 0;\r\n\t\tmargin-top: .5rem;\r\n\t\tmargin-left: 1rem;\r\n\t\tpadding-right: 1rem;\r\n\t\tmax-width: calc(100% - 2rem);\r\n\t\tmin-width: calc(100% - 2rem);\r\n\t}\r\n`\r\n\r\nexport const QuantityControlWrapper = styled.div`\r\n\talign-self: flex-end;\r\n\tpadding: 0;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tjustify-content: center;\r\n\talign-items: flex-start;\r\n\tflex-direction: row;\r\n\tborder: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'} 0.125rem solid;\r\n\tborder-radius: 1.4rem;\r\n\r\n\t> button {\r\n\t\tborder-radius: 50%;\r\n\t\tflex: 1;\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\t\tfont-size: 1rem;\r\n\t\tmin-width: 1.875rem;\r\n\t\tmin-height: 1.875rem;\r\n\t\tmax-width: 1.875rem;\r\n\t\tmax-height: 1.875rem;\r\n\t\tmargin: 0;\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\r\n\t\t> span {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\t}\r\n\t}\r\n\r\n\t> span {\r\n\t\tflex: 1;\r\n\t\tmargin: 0px;\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\t\tfont-size: 1.125rem;\r\n\t\tfont-weight: bold;\r\n min-height: 1.875rem;\r\n max-height: 1.875rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: ${({isEmpty}) => !isEmpty ? '14px' : '18px'}\r\n\t}\r\n\r\n > button {\r\n font-size: 0.8em;\r\n }\r\n`\r\n\r\nexport const Span = styled.span``\r\n\r\nexport const H3 = styled.h3`\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundBody) || '#999'};\r\n`\r\n\r\nexport const H4 = styled.h4`\r\n margin: 0 0 .75rem 0;\r\n padding: 0;\r\n font-size: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333'};\r\n`\r\n\r\nexport const Textarea = styled.textarea`\r\n min-width: 100%;\r\n max-width: 100%;\r\n height: 5rem;\r\n border-radius: .938rem;\r\n padding: .625rem;\r\n box-sizing: border-box;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'} .063rem solid;\r\n background: none;\r\n`\r\n\r\nexport const Div = styled.div``\r\n\r\nexport const Paragraph = styled.p`\r\n\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'} 0.063rem solid;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n\r\n\t.free{\r\n\t\tcolor: \"green\";\r\n\t}\r\n`\r\n\r\nexport const Button = styled.button`\r\n\tbackground: none;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n`\r\n\r\nexport const AdditionalsListItemWrapper = styled.li`\r\n\tflex: 1;\r\n\tpadding: 0;\r\n\tmin-width: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tjustify-content: flex-start;\r\n\talign-items: flex-start;\r\n\tmargin-bottom: .5rem;\r\n\tpadding-right: 1rem;\r\n\r\n > div {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n\t\tmin-width: calc(100% - ${({fixWidh}) => fixWidh ? '5.5rem' : '2.5rem'};);\r\n\t\tmax-width: calc(100% - ${({fixWidh}) => fixWidh ? '5.5rem' : '2.5rem'};);\r\n\r\n &.actions {\r\n align-items: flex-start;\r\n\t\t\tflex: 1;\r\n\t\t\tmin-width: ${({fixWidh}) => fixWidh ? '5rem' : '2rem'};\r\n max-width: ${({fixWidh}) => fixWidh ? '5rem' : '2rem'};\r\n\r\n > span {\r\n display: flex;\r\n }\r\n }\r\n\r\n > p {\r\n &.name {\r\n font-size: 1rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n font-weight: bold;\r\n }\r\n\r\n &.description {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n margin-bottom: 0.375rem;\r\n font-size: 0.75rem;\r\n }\r\n\r\n &.value {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.greyMedium) || '#000'};\r\n font-size: 1rem;\r\n }\r\n\r\n\t\t\t&.free{\r\n\t\t\t\tfont-size: 1rem;\r\n\t\t\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textEighthColor) || '#000'};\r\n\t\t\t}\r\n }\r\n }\r\n\r\n\t&:last-child {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n`\r\n","import React, {\r\n\tuseState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n\tCustomCheckbox,\r\n\tCustomIcon\r\n} from '../../components'\r\n\r\nimport {\r\n\tAdditionalsWrapper,\r\n\tAdditionalWrapper,\r\n\tAdditionalHeader,\r\n\tAdditionalList,\r\n\tQuantityControlWrapper,\r\n\tSpan,\r\n\tH3,\r\n\tDiv,\r\n\tParagraph,\r\n\tButton,\r\n\tAdditionalsListItemWrapper\r\n} from './styles'\r\n\r\nconst QuantityControl = ({\r\n\tdata,\r\n\tquantity,\r\n\tid,\r\n\thandleQuantity\r\n}) => {\r\n\treturn \r\n\t\t{quantity ? <>\r\n\t\t\t\r\n\t\t\t{quantity}\r\n\t\t\t\r\n\t\t : <>\r\n\t\t\t\r\n\t\t}\r\n\t \r\n}\r\n\r\nQuantityControl.propTypes = {\r\n\tdata: PropTypes.arrayOf(),\r\n\tquantity: PropTypes.number,\r\n\tid: PropTypes.number,\r\n\thandleQuantity: PropTypes.func\r\n}\r\n\r\nexport function Additionals(props) {\r\n\tconst {\r\n\t\tdata,\r\n\t\thandleQuantity,\r\n\t\thandleChange,\r\n\t\tselectedProduct,\r\n\t\t// cart\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tselectedAdditionals\r\n\t} = selectedProduct\r\n\r\n\t// const {\r\n\t// \tproducts\r\n\t// } = cart\r\n\r\n\t// const cartSelectedProductArr = products && products.length && selectedProduct ? (products.filter(filteredItem => filteredItem.id === selectedProduct.id)) : []\r\n\t// const cartSelectedProduct = (cartSelectedProductArr.length && cartSelectedProductArr[0]) || {}\r\n\r\n\tconst [update, setUpdate] = useState(0)\r\n\r\n\t// const {\r\n\t// \tselectedAdditionals: cartSelectedAdditionals\r\n\t// } = cartSelectedProduct\r\n\r\n\treturn \r\n\t\t{data && data.map((dataMappedItem, index) => {\r\n\t\t\tconst key = `additionals-${index}-${(new Date()).getTime()}`\r\n\r\n\t\t\tconst {\r\n\t\t\t\titems: additionalsItems,\r\n\t\t\t\tcheckbox,\r\n\t\t\t\tname,\r\n\t\t\t\tminimum,\r\n\t\t\t\tmaximum,\r\n\t\t\t\tgroupId,\r\n\t\t\t\tcalcType\r\n\t\t\t} = dataMappedItem\r\n\r\n\t\t\tconst selectedGroup = (selectedAdditionals && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType))[0]) || null\r\n\r\n\t\t\tconst selectedGroupItems = selectedGroup && selectedGroup.items\r\n\t\t\tconst selectedGroupItemsQuantity = !checkbox ? selectedGroupItems && selectedGroupItems.reduce((acc, reducedItem) => {\r\n\t\t\t\treturn acc + reducedItem.quantity\r\n\t\t\t}, 0) : selectedGroupItems && selectedGroupItems.length\r\n\r\n\t\t\tconst maximumQuantity = (selectedGroup && selectedGroup.maximum) || maximum\r\n\r\n\t\t\treturn = maximumQuantity) ? 'maximum' : ''}`} id={`additionals-group-${groupId}-${calcType}`} key={key}>\r\n\t\t\t\t\r\n\t\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t{additionalsItems && additionalsItems.map((additionalsItemsMappedItem, index) => {\r\n\t\t\t\t\t\tconst key = `additionals-list-item-${index}-${(new Date()).getTime()}`\r\n\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\tvalue,\r\n\t\t\t\t\t\t\tdescription,\r\n\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\tcode,\r\n\t\t\t\t\t\t\tcalcType,\r\n\t\t\t\t\t\t\tgroupId,\r\n\t\t\t\t\t\t\tdouble\r\n\t\t\t\t\t\t} = additionalsItemsMappedItem\r\n\r\n\t\t\t\t\t\tconst selectedGroup = (selectedAdditionals && (selectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType))[0]) || null\r\n\t\t\t\t\t\tconst hasAdded = (selectedGroup && selectedGroup.items && selectedGroup.items.length && (selectedGroup.items.filter(filteredItem => filteredItem.code === code))) || false\r\n\t\t\t\t\t\tconst hasChecked = hasAdded && hasAdded.length\r\n\r\n\t\t\t\t\t\t// const cartSelectedGroup = (cartSelectedAdditionals && (cartSelectedAdditionals.filter(filteredItem => filteredItem.groupId === groupId && filteredItem.calcType === calcType))[0]) || null\r\n\t\t\t\t\t\t// const hasCartAdded = (cartSelectedGroup && cartSelectedGroup.items && cartSelectedGroup.items.length && (cartSelectedGroup.items.filter(filteredItem => filteredItem.code === code))) || false\r\n\t\t\t\t\t\t// const hasCartChecked = hasCartAdded && hasCartAdded.length\r\n\r\n\t\t\t\t\t\tconst checked = !update ? hasChecked : hasChecked\r\n\t\t\t\t\t\tconst checkedData = !update ? hasAdded : hasAdded\r\n\r\n\t\t\t\t\t\treturn \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t})}\r\n\t\t\t\t \r\n\t\t\t \r\n\t\t})}\r\n\t \r\n}\r\n\r\nAdditionals.propTypes = {\r\n\tdata: PropTypes.arrayOf(),\r\n\thandleQuantity: PropTypes.func,\r\n\thandleChange: PropTypes.func,\r\n\tselectedProduct: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tselectedAdditionals: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\tcart: PropTypes.shape({\r\n\t\tproducts: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n}\r\n","var _path, _path2, _path3, _path4;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconGoogleMulticolor = function SvgIconGoogleMulticolor(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 48 48\",\n width: \"48px\",\n height: \"48px\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFC107\",\n d: \"M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FF3D00\",\n d: \"M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#4CAF50\",\n d: \"M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#1976D2\",\n d: \"M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconGoogleMulticolor, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_google_multicolor.648fa9fa.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconFacebook = function SvgIconFacebook(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"#000000\",\n viewBox: \"0 0 50 50\",\n width: \"50px\",\n height: \"50px\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M32,11h5c0.552,0,1-0.448,1-1V3.263c0-0.524-0.403-0.96-0.925-0.997C35.484,2.153,32.376,2,30.141,2C24,2,20,5.68,20,12.368V19h-7c-0.552,0-1,0.448-1,1v7c0,0.552,0.448,1,1,1h7v19c0,0.552,0.448,1,1,1h7c0.552,0,1-0.448,1-1V28h7.222c0.51,0,0.938-0.383,0.994-0.89l0.778-7C38.06,19.518,37.596,19,37,19h-8v-5C29,12.343,30.343,11,32,11z\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconFacebook, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_facebook.6d23c0b9.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n width: 100%;\r\n max-width: 100%;\r\n background: #fff;\r\n font-size: .875rem;\r\n padding: 1.25rem;\r\n`\r\nexport const Form = styled.form`\r\n display: flex;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n margin-top: 1rem;\r\n`\r\nexport const FormField = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\nexport const StoreLogoImage = styled.img`\r\n width: 40%;\r\n align-self: center;\r\n margin: 0 0 1rem 0;\r\n\r\n @media (max-width: 48rem) and (max-height: 40rem) {\r\n width: 80%;\r\n }\r\n`\r\n\r\nexport const Button = styled.button `\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n color: #fff;\r\n text-align: center;\r\n font-weight: 700;\r\n margin: 0 0 0 1rem;\r\n width: 6rem;\r\n height: 3rem;\r\n border: 0;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n box-shadow: rgba(0, 0, 0, .1) 0 4px 12px;\r\n\r\n &:hover {\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n }\r\n`\r\n\r\nexport const AltButton = styled.button `\r\n background: #FFF;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n text-align: center;\r\n font-weight: 700;\r\n margin: 0 0 0 1rem;\r\n width: 6rem;\r\n height: 3rem;\r\n border: 0;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n border: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n box-shadow: rgba(0, 0, 0, .1) 0 4px 12px;\r\n\r\n &:hover {\r\n border: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n background-color: #fff;\r\n }\r\n`\r\nexport const SingUpButton = styled(AltButton)`\r\n width: 100%;\r\n margin: .5rem 0;\r\n`\r\nexport const SubmitButton = styled(Button)`\r\n width: 100%;\r\n margin: .5rem 0;\r\n`\r\n\r\nexport const SingInWarning = styled.p`\r\n margin: 10px 2px;\r\n padding: 0;\r\n font-size: .875rem;\r\n color: red;\r\n font-weight: bold;\r\n`\r\n\r\nexport const Divider = styled.div`\r\n width: 100%;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n position: relative;\r\n z-index: 1;\r\n margin: 2.5rem 0;\r\n`\r\n\r\nexport const DividerLabel = styled.span`\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 5;\r\n background-color: #fff;\r\n padding: 0 1rem;\r\n color: #b0b2b4;\r\n font-weight: 700;\r\n font-size: 1rem;\r\n`\r\n\r\nconst SocialButton = styled(Button)`\r\n border-radius: 8px;\r\n width: 100%;\r\n margin: .5rem 0;\r\n font-size: 1rem;\r\n font-weight: 700;\r\n display: flex;\r\n align-items: center;\r\n padding: .25rem 1.5rem;\r\n height: 3.5rem;\r\n\r\n * {\r\n cursor: pointer;\r\n }\r\n\r\n svg {\r\n height: 90%;\r\n margin: 0 1.5rem 0 0;\r\n }\r\n`\r\n\r\nexport const GoogleButton = styled(SocialButton)`\r\n background-color: #fff;\r\n border: 1px solid #d9d8d9;\r\n color: #b9babc;\r\n\r\n &:hover {\r\n background-color: #f7f7f7;\r\n opacity: .9;\r\n }\r\n\r\n span {\r\n color: #afb1b3;\r\n }\r\n`\r\n\r\nexport const FacebookButton = styled(SocialButton)`\r\n background-color: #3b5999;\r\n color: rgba(255, 255, 255, .8);\r\n \r\n &:hover {\r\n background-color: #3b5999;\r\n opacity: .9;\r\n }\r\n\r\n span {\r\n color: #fff;\r\n }\r\n\r\n svg {\r\n fill: #fff;\r\n }\r\n`\r\n\r\n\r\nexport const TermsOfServiceLabel = styled.span`\r\n color: #b9babc;\r\n font-size: 1rem;\r\n text-align: center;\r\n max-width: 18.75rem;\r\n margin: 1rem auto;\r\n\r\n a {\r\n font-weight: 700;\r\n text-decoration: none;\r\n border-bottom: 1px solid #cecece;\r\n color: #cecece;\r\n }\r\n`\r\n\r\nexport const ForgotPasswordLink = styled.a`\r\n font-weight: 400;\r\n text-decoration: none;\r\n border-bottom: 1px solid ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n font-size: .85rem;\r\n margin: -.5rem 0 1rem 0;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n opacity: .9;\r\n }\r\n`\r\nexport const MobileHeaderWrapper = styled.header`\r\n width: 100%;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n\r\n\t\t\t@media (min-width: 40rem) {\r\n\t\t\t\tright: -.25rem;\r\n \t\ttop: -1.75rem;\r\n\r\n\t\t\t\t.custom-icon svg {\r\n\t\t\t\t\theight: 1.25rem;\r\n\t\t\t\t\twidth: 1.25rem;\r\n\r\n\t\t\t\t\tpath {\r\n\t\t\t\t\t\tfill: #fff;\r\n\t\t\t\t\t\topacity: .6;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\t\r\n }\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n\tcursor: pointer;\r\n`\r\n\r\nexport const ErrorMessage = styled.div`\r\n padding: .5rem .85rem;\r\n margin: 1.5rem 1.5rem 0 1.5rem; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n max-height: 7rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n line-height: 1rem;\r\n width: 100%;\r\n\r\n span {\r\n max-width: 85%;\r\n position: relative;\r\n max-height: calc(1rem * 3);\r\n overflow: hidden;\r\n padding-right: 1rem;\r\n text-overflow: ellipsis;\r\n }\r\n\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper2 = styled.div`\r\n background: #fff;\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n position: relative;\r\n padding-top: 1.25rem;\r\n box-sizing: border-box;\r\n flex: 1;\r\n\r\n > div {\r\n &#notification {\r\n margin: 0 1.25rem;\r\n box-sizing: border-box;\r\n max-width: calc(100% - 2.5rem);\r\n min-width: calc(100% - 2.5rem);\r\n margin-bottom: 1.25rem;\r\n }\r\n }\r\n\r\n > .back-button {\r\n font-weight: bold;\r\n position: absolute;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n }\r\n`\r\n\r\nexport const ContentWrapper2 = styled.div`\r\n opacity: 0;\r\n transition: all .25s ease-in;\r\n font-size: .875rem;\r\n min-width: 100%;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n padding: 1.25rem;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n`\r\n\r\nexport const Div = styled.div`\r\n flex: 1;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1.125rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n margin-bottom: 1.25rem;\r\n text-transform: uppercase;\r\n text-align: center;\r\n border-bottom: #E1E1E1 .063rem solid;\r\n padding-bottom: 1.25rem;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n background: none;\r\n border: 0 none;\r\n font-size: 1.125rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n`\r\n\r\nexport const Form2 = styled.form`\r\n min-width: 100%;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n flex: 1;\r\n\r\n > input {\r\n min-width: 100%;\r\n max-width: 100%;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#CCC' };\r\n }\r\n\r\n > ::-webkit-input-placeholder { \r\n font-size: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n\r\n > input:-moz-placeholder { \r\n font-size: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\r\n > input {\r\n min-width: 48%;\r\n max-width: 48%;\r\n }\r\n\r\n > ::-webkit-input-placeholder { \r\n font-size: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n \r\n > input:-moz-placeholder { \r\n font-size: 1rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#CCC' }; \r\n }\r\n }\r\n`\r\n\r\nexport const Input2 = styled.input`\r\n\tborder: 0 none;\r\n\tborder-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333' } .063rem solid;\r\n\tfont-size: 1.125rem;\r\n\theight: 1.5rem;\r\n\tline-height: 1.5rem;\r\n\tcolor: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333' };\r\n\tmargin: 0 auto;\r\n\tflex: 1;\r\n min-width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n\tmargin-bottom: 2.5rem;\r\n`\r\n\r\nexport const Button2 = styled.button`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#fff' };\r\n background: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-radius: .938rem;\r\n font-weight: bold;\r\n flex: 1;\r\n max-height: 3.75rem;\r\n min-height: 3.75rem;\r\n line-height: 3.75rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n padding: 0;\r\n margin: 0;\r\n font-size: 1rem;\r\n box-sizing: border-box;\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const OverlayWrapper = styled.div`\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n z-index: 3;\r\n opacity: 0;\r\n transition: all .25s ease-in;\r\n\r\n &.motion {\r\n opacity: 1;\r\n pointer-events: unset;\r\n }\r\n\r\n > div:not(.background) {\r\n position: absolute;\r\n left: 50%;\r\n bottom: 0;\r\n transform: translate(-50%, 0);\r\n z-index: 2;\r\n }\r\n\r\n > div.background {\r\n background: rgba(150, 150, 150, .5);\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n }\r\n`\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n`\r\n\r\nexport const Header = styled.header`\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n padding: 1.5rem 1rem;\r\n flex: 0;\r\n position: relative;\r\n\r\n svg {\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n cursor: pointer;\r\n }\r\n\r\n @media (min-width: 48rem) { \r\n padding: 1.5rem 1.5rem 0 1.5rem;\r\n margin: 0 0 2rem 0;\r\n border: 0;\r\n\r\n svg {\r\n display: none;\r\n }\r\n }\r\n`\r\n\r\nexport const ErrorMessage = styled.div`\r\n padding: .5rem .85rem;\r\n margin: 1.5rem 1.5rem 0 1.5rem; \r\n background-color: #f4f4f4;\r\n min-height: 3rem;\r\n box-sizing: border-box;\r\n border-radius: 1.15rem;\r\n border: 1px solid #dedede;\r\n color: #b9babc;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n\tjustify-content: space-between;\r\n line-height: 1rem;\r\n\r\n svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n min-width: 1.5rem;\r\n min-height: 1.5rem;\r\n background: #fd5b5d;\r\n border-radius: 50%;\r\n padding: .25rem;\r\n box-sizing: border-box;\r\n margin: 0 0 0 1rem;\r\n }\r\n`\r\n\r\nexport const ErrorMessageContent = styled.div`\r\n max-width: 85%;\r\n position: relative;\r\n overflow: hidden;\r\n padding-right: 1rem;\r\n text-overflow: ellipsis;\r\n`\r\n\r\nexport const ErrorMessageItem = styled.p`\r\n\tmargin: 0 0 .25rem 0; \r\n`\r\n\r\nexport const PhoneHeader = styled(Header)`\r\n svg {\r\n display: none;\r\n }\r\n border: 0;\r\n`\r\n\r\nexport const Title = styled.h1`\r\n font-weight: 700;\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n text-align: center;\r\n margin: 0;\r\n\r\n @media (min-width: 48rem) {\r\n font-size: 1.5rem;\r\n text-align: start;\r\n }\r\n`\r\n\r\nexport const Form = styled.form`\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 2rem 1.5rem 1.5rem 1.5rem;\r\n\r\n @media (min-width: 48rem) {\r\n padding: 0 1.5rem 1.5rem 1.5rem;\r\n }\r\n`\r\n\r\nexport const FormFieldName = styled.div`\r\n flex: 0 1 calc(50% - .5rem);\r\n width: 100%;\r\n margin: 0 1rem 1rem 0;\r\n`\r\n\r\nexport const FormFieldLastName = styled.div`\r\n flex: 0 1 calc(50% - .5rem);\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldEmail = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldBirthDate = styled.div`\r\n flex: 0 1 calc(50% - .5rem);\r\n margin: 0 1rem 1rem 0;\r\n`\r\n\r\nexport const FormFieldCPF = styled.div`\r\n flex: 0 1 calc(50% - .5rem);\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldPassword = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const FormFieldRepeatPassword = styled.div`\r\n flex: 1 0 100%;\r\n width: 100%;\r\n margin: 0 0 1rem 0;\r\n`\r\n\r\nexport const RegisterButton = styled.button`\r\n background-color: ${ props => (props.theme && props.theme.main && props.theme.main.general && \r\n props.theme.main.general.primaryColor) || '#000' };\r\n color: #fff;\r\n text-align: center;\r\n font-weight: 700;\r\n margin: 2rem 0 1rem 0;\r\n width: 100%;\r\n height: 3rem;\r\n border: 0;\r\n border-radius: 15px;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n opacity: .9;\r\n }\r\n`\r\n\r\nexport const TermsOfServiceLabel = styled.span`\r\n color: #b9babc;\r\n font-size: 1rem;\r\n text-align: center;\r\n max-width: 18.75rem;\r\n margin: 1rem auto;\r\n\r\n a {\r\n font-weight: 700;\r\n text-decoration: none;\r\n border-bottom: 1px solid #cecece;\r\n cursor: pointer;\r\n color: #cecece;\r\n }\r\n`\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport { Helmet } from \"react-helmet\";\r\n\r\nimport history from \"../../history\";\r\nimport { ReactComponent as IconArrowLeft } from \"../assets/icons/icon_arrow_left.svg\";\r\nimport { ReactComponent as IconClose } from \"../assets/icons/icon_close.svg\";\r\nimport { InputRounded } from \"../components\";\r\n\r\nimport { signUp, user } from \"../../state\";\r\n\r\nimport {\r\n\tsetNotification,\r\n\tsetUserCard,\r\n\tsetCard,\r\n\tsetLogin,\r\n\tsetUserHistory,\r\n\thandleGTM,\r\n\thandlePixel,\r\n} from \"../../redux/actions/main\";\r\nimport { isCPFValid } from \"../../infra/utils\";\r\n\r\nimport { useDeviceLayout, useStoreSettings } from \"../hooks\";\r\n\r\nimport { Phone } from \"./\";\r\n\r\nimport {\r\n\tWrapper,\r\n\tHeader,\r\n\tTitle,\r\n\tForm,\r\n\tFormFieldName,\r\n\tFormFieldLastName,\r\n\tFormFieldEmail,\r\n\tFormFieldBirthDate,\r\n\tFormFieldCPF,\r\n\tFormFieldPassword,\r\n\tFormFieldRepeatPassword,\r\n\tRegisterButton,\r\n\tTermsOfServiceLabel,\r\n\tPhoneHeader,\r\n\tErrorMessage,\r\n\tErrorMessageContent,\r\n\tErrorMessageItem,\r\n} from \"./styles\";\r\n\r\nfunction SignUpPage(props) {\r\n\tconst {\r\n\t\tsetSignUp,\r\n\t\tsetAccessToken,\r\n\t\tpostSignUp,\r\n\t\tpostSignUpFacebook,\r\n\t\tpostSignUpGoogle,\r\n\t\tsignUp,\r\n\t\tsetCard,\r\n\t\tsetUserCard,\r\n\t\tsetLogin,\r\n\t\tgetSignUp,\r\n\t\tsetNotification,\r\n\t\tpostCode,\r\n\t\tsetUserHistory,\r\n\t\tpostPhone,\r\n\t\tclose,\r\n\t\tuserHistory,\r\n\t\tURLParameters,\r\n\t\tsignIn,\r\n\t\t//requiredValidationPhone,\r\n\t\tsetRequiredValidationPhone = () => { },\r\n\t\thandleGTM,\r\n\t\tmethod,\r\n\t\tproducts,\r\n\t} = props;\r\n\r\n\tconst {\r\n\t\t/* birthDate,\r\n\t\tCPF,\r\n\t\tpassword,\r\n\t\tpassword2,\r\n\t\tphone,\r\n\t\tcode,\r\n\t\tddi,\r\n\t\tcountry, */\r\n\t\tconfirmationType,\r\n\t\tmessageErrors,\r\n\t\tresend,\r\n\t} = signUp;\r\n\t/* const { name, lastName, email } = signUp */\r\n\r\n\tconst { back } = userHistory;\r\n\r\n\tconst phoneReadyInitialValue = signIn?.subscriptionStatus === 2 && !signIn?.signUp;\r\n\r\n\tconst isMobile = useDeviceLayout({\r\n\t\tisMobile: true,\r\n\t});\r\n\r\n\tconst [loading, setLoading] = useState(false);\r\n\tconst [loaded, setLoaded] = useState(false);\r\n\tconst [ready, setReady] = useState(false);\r\n\tconst [phoneReady, setPhoneReady] = useState(phoneReadyInitialValue);\r\n\tconst [phoneStep, setPhoneStep] = useState(0);\r\n\tconst [phoneHeaderTitle, setPhoneHeaderTitle] = useState(\"Cadastrar celular\");\r\n\tconst [time, setTime] = useState(30);\r\n\tconst [signUpError, setSignUpError] = useState(null);\r\n\tconst [values, setValues] = useState({ ...signUp });\r\n\r\n\tconst {\r\n\t\tname,\r\n\t\tlastName,\r\n\t\temail,\r\n\t\tbirthDate,\r\n\t\tCPF,\r\n\t\tpassword,\r\n\t\tpassword2,\r\n\t\tphone,\r\n\t\tcode,\r\n\t\tddi,\r\n\t\tcountry,\r\n\t} = values;\r\n\r\n\tconst signUpErrorMessages = signUpError ? signUpError.split(\"\\r\\n\") : \"\";\r\n\tconst signUpErrorMessagesPrefix = signUpErrorMessages.length > 1 ? \"- \" : \"\";\r\n\r\n\tlet timeout = null;\r\n\r\n\tconst {\r\n\t\turl,\r\n\t\ttitle,\r\n\t\t//description\r\n\t} = useStoreSettings();\r\n\r\n\tuseEffect(() => {\r\n\t\tdocument.querySelector(\"#root\").style.background = \"#fff\";\r\n\r\n\t\tif (!loaded && !loading) {\r\n\t\t\tsetLoading(false);\r\n\t\t\tsetLoaded(true);\r\n\t\t\tsetReady(true);\r\n\r\n\t\t\tconst signUp = getSignUp();\r\n\r\n\t\t\tsetSignUp({\r\n\t\t\t\t...signUp,\r\n\t\t\t\tddi: 55,\r\n\t\t\t\tcountry: \"brasil\",\r\n\t\t\t\tconfirmationType: \"sms\",\r\n\t\t\t\tmessageErrors: 0,\r\n\t\t\t\tresend: false,\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\treturn () => { };\r\n\t}, [loaded, loading, ready, phoneReady, setSignUp, signUp, getSignUp]);\r\n\r\n\tfunction handleInput(event) {\r\n\t\tconst { name, value } = event.target;\r\n\r\n\t\tconst newValue = {\r\n\t\t\t[name]: value,\r\n\t\t};\r\n\r\n\t\tif (name === \"ddi\") {\r\n\t\t\tconst value = event.target.value.split(\"|\");\r\n\t\t\tconst country = value[0];\r\n\t\t\tconst ddi = value[1];\r\n\r\n\t\t\tObject.assign(newValue, {\r\n\t\t\t\tcountry,\r\n\t\t\t\tddi,\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tsetValues({\r\n\t\t\t...values,\r\n\t\t\t...newValue,\r\n\t\t});\r\n\t}\r\n\r\n\tfunction handleBirthDateKeyDown(event) {\r\n\t\tconst { keyCode } = event;\r\n\r\n\t\tif (\r\n\t\t\t!(\r\n\t\t\t\t(keyCode >= 48 && keyCode <= 57) ||\r\n\t\t\t\t(keyCode >= 96 && keyCode <= 105) ||\r\n\t\t\t\tkeyCode === 8 ||\r\n\t\t\t\tkeyCode === 9 ||\r\n\t\t\t\tkeyCode === 46 ||\r\n\t\t\t\tkeyCode === 37 ||\r\n\t\t\t\tkeyCode === 39\r\n\t\t\t)\r\n\t\t) {\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tkeyCode === 191 &&\r\n\t\t\tbirthDate &&\r\n\t\t\t(birthDate.indexOf(\"/\") > -1 || birthDate.length !== 5)\r\n\t\t) {\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tbirthDate &&\r\n\t\t\t(birthDate.length === 2 || birthDate.length === 5) &&\r\n\t\t\tkeyCode !== 8 &&\r\n\t\t\tkeyCode !== 9 &&\r\n\t\t\tkeyCode !== 37 &&\r\n\t\t\tkeyCode !== 39 &&\r\n\t\t\tkeyCode !== 46\r\n\t\t) {\r\n\t\t\thandleInput({\r\n\t\t\t\t...event,\r\n\t\t\t\ttarget: {\r\n\t\t\t\t\t...event.target,\r\n\t\t\t\t\tname: \"birthDate\",\r\n\t\t\t\t\tvalue: `${birthDate}/`,\r\n\t\t\t\t},\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\tfunction handleCPFKeyDown(event) {\r\n\t\tconst { keyCode } = event;\r\n\r\n\t\tif (\r\n\t\t\t!(\r\n\t\t\t\t(keyCode >= 48 && keyCode <= 57) ||\r\n\t\t\t\t(keyCode >= 96 && keyCode <= 105) ||\r\n\t\t\t\tkeyCode === 8 ||\r\n\t\t\t\tkeyCode === 9 ||\r\n\t\t\t\tkeyCode === 46\r\n\t\t\t)\r\n\t\t) {\r\n\t\t\tevent.preventDefault();\r\n\t\t}\r\n\r\n\t\tif (\r\n\t\t\tCPF &&\r\n\t\t\t(CPF.length === 3 || CPF.length === 7) &&\r\n\t\t\tkeyCode !== 8 &&\r\n\t\t\tkeyCode !== 46\r\n\t\t) {\r\n\t\t\thandleInput({\r\n\t\t\t\t...event,\r\n\t\t\t\ttarget: {\r\n\t\t\t\t\t...event.target,\r\n\t\t\t\t\tname: \"CPF\",\r\n\t\t\t\t\tvalue: `${CPF}.`,\r\n\t\t\t\t},\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tif (CPF && CPF.length === 11 && keyCode !== 8 && keyCode !== 46) {\r\n\t\t\thandleInput({\r\n\t\t\t\t...event,\r\n\t\t\t\ttarget: {\r\n\t\t\t\t\t...event.target,\r\n\t\t\t\t\tname: \"CPF\",\r\n\t\t\t\t\tvalue: `${CPF}-`,\r\n\t\t\t\t},\r\n\t\t\t});\r\n\t\t}\r\n\t}\r\n\r\n\tfunction handleStep(args) {\r\n\t\tconst titles = {\r\n\t\t\t0: \"Cadastrar celular\",\r\n\t\t\t1: \"Código de confirmação\",\r\n\t\t};\r\n\t\tsetPhoneHeaderTitle(titles[args]);\r\n\t\tsetPhoneStep(args);\r\n\t}\r\n\r\n\tasync function handleSubmit() {\r\n\t\tsetSignUpError(null);\r\n\r\n\t\tif (!isCPFValid(values.CPF)) {\r\n\t\t\tsetSignUpError(\"O CPF é inválido\");\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst dataSingUp = {\r\n\t\t\tevent: \"sign_up\",\r\n\t\t\tmethod: method,\r\n\t\t\tstep: \"2\",\r\n\t\t};\r\n\t\thandleGTM(dataSingUp);\r\n\t\tconsole.warn({ dataSingUp });\r\n\r\n\t\tsetLoading(true);\r\n\r\n\t\tsetSignUp({\r\n\t\t\t...signUp,\r\n\t\t\t...values,\r\n\t\t\tsuccess: false,\r\n\t\t});\r\n\r\n\t\tif (signUp.facebookUserId) {\r\n\t\t\tawait postSignUpFacebook();\r\n\t\t} else if (signUp.googleUserId) {\r\n\t\t\tawait postSignUpGoogle();\r\n\t\t} else {\r\n\t\t\tawait postSignUp();\r\n\t\t}\r\n\r\n\t\tconst newSignUp = getSignUp();\r\n\r\n\t\tif (newSignUp && newSignUp.success) {\r\n\t\t\tconst token = newSignUp.token && newSignUp.token.accessToken;\r\n\r\n\t\t\tsetAccessToken(token);\r\n\t\t\tsetPhoneReady(true);\r\n\t\t\tsetLoading(false);\r\n\t\t\tsetNotification(null);\r\n\t\t\tsetSignUpError(null);\r\n\t\t\tsetRequiredValidationPhone(true);\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst notificationMessage =\r\n\t\t\tnewSignUp.message || \"Não foi possível fazer o cadastro!\";\r\n\r\n\t\tsetNotification({\r\n\t\t\ttype: \"warning\",\r\n\t\t\tmessage: notificationMessage,\r\n\t\t});\r\n\t\tsetSignUpError(notificationMessage);\r\n\r\n\t\tsetLoading(false);\r\n\t}\r\n\r\n\tfunction postTime(args) {\r\n\t\tsetTime(args);\r\n\t}\r\n\r\n\tfunction handleTime(startTime, time = 0, data = {}) {\r\n\t\tconst signUp = getSignUp();\r\n\r\n\t\tif (!time && data) {\r\n\t\t\tsetSignUp({\r\n\t\t\t\t...signUp,\r\n\t\t\t\t...data,\r\n\t\t\t});\r\n\t\t}\r\n\r\n\t\tif (data.clear) {\r\n\t\t\tpostTime(30, 30);\r\n\t\t\tclearTimeout(timeout);\r\n\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\ttimeout = setTimeout(() => {\r\n\t\t\tpostTime(Number(time - 1));\r\n\r\n\t\t\tif (time - 1 > 0) {\r\n\t\t\t\thandleTime(startTime, time - 1);\r\n\t\t\t}\r\n\t\t}, 1000);\r\n\t}\r\n\r\n\tasync function handlePhoneSubmit() {\r\n\t\tsetNotification(null);\r\n\r\n\t\tconst dataSingUp = {\r\n\t\t\tevent: \"sign_up\",\r\n\t\t\tmethod: method,\r\n\t\t\tstep: \"3\",\r\n\t\t};\r\n\t\thandleGTM(dataSingUp);\r\n\t\tconsole.warn({ dataSingUp });\r\n\r\n\t\tsetSignUp({\r\n\t\t\t...signUp,\r\n\t\t\t...values,\r\n\t\t});\r\n\r\n\t\tawait postPhone([\r\n\t\t\t(errorMessage) => {\r\n\t\t\t\tconst notificationMessage =\r\n\t\t\t\t\terrorMessage ||\r\n\t\t\t\t\t\"Não foi possível enviar o código para seu telefone celular.\";\r\n\r\n\t\t\t\tsetNotification({\r\n\t\t\t\t\ttype: \"warning\",\r\n\t\t\t\t\tmessage: notificationMessage,\r\n\t\t\t\t});\r\n\r\n\t\t\t\tsetSignUpError(notificationMessage);\r\n\t\t\t\thandleStep(0);\r\n\t\t\t},\r\n\t\t\t() => {\r\n\t\t\t\tconst newConfirmationType = messageErrors + 1 >= 4 ? \"phone\" : \"sms\";\r\n\r\n\t\t\t\thandleTime(30, 30, {\r\n\t\t\t\t\tmessageErrors: messageErrors + 1,\r\n\t\t\t\t\tconfirmationType: newConfirmationType,\r\n\t\t\t\t\tresend: true,\r\n\t\t\t\t\tclear: false,\r\n\t\t\t\t});\r\n\t\t\t\tsetNotification(null);\r\n\t\t\t\tsetSignUpError(null);\r\n\t\t\t\thandleStep(1);\r\n\t\t\t},\r\n\t\t]);\r\n\t}\r\n\r\n\tasync function handleCodeSubmit() {\r\n\t\tsetNotification(null);\r\n\t\tconst dataSingUp = {\r\n\t\t\tevent: \"sign_up\",\r\n\t\t\tmethod: method,\r\n\t\t\tstep: \"4\",\r\n\t\t};\r\n\t\thandleGTM(dataSingUp);\r\n\t\tconsole.warn({ dataSingUp });\r\n\r\n\t\tsetSignUp({\r\n\t\t\t...signUp,\r\n\t\t\t...values,\r\n\t\t});\r\n\r\n\t\tawait postCode([\r\n\t\t\t{\r\n\t\t\t\tname: \"address\",\r\n\t\t\t\ttype: \"error\",\r\n\t\t\t\tcallback: (errorMessage) => {\r\n\t\t\t\t\tsetUserHistory({\r\n\t\t\t\t\t\tnext: \"sign-up\",\r\n\t\t\t\t\t\tback: \"sign-up\",\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\tconst notificationMessage =\r\n\t\t\t\t\t\terrorMessage ||\r\n\t\t\t\t\t\t\"Não foi possível cadastrar seu endereço. Tente novamente.\";\r\n\t\t\t\t\tsetNotification({\r\n\t\t\t\t\t\ttype: \"warning\",\r\n\t\t\t\t\t\tmessage: notificationMessage,\r\n\t\t\t\t\t});\r\n\r\n\t\t\t\t\thistory.push(`/new-address${URLParameters}`);\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tname: \"address\",\r\n\t\t\t\ttype: \"success\",\r\n\t\t\t\tcallback: (b) => {\r\n\t\t\t\t\tconsole.warn(\"Address created\");\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tname: \"code\",\r\n\t\t\t\ttype: \"error\",\r\n\t\t\t\tcallback: (errorMessage) => {\r\n\t\t\t\t\tconst notificationMessage =\r\n\t\t\t\t\t\terrorMessage ||\r\n\t\t\t\t\t\t\"Não foi possível validar o código para seu telefone celular.\";\r\n\t\t\t\t\tsetNotification({\r\n\t\t\t\t\t\ttype: \"warning\",\r\n\t\t\t\t\t\tmessage: notificationMessage,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tsetSignUpError(notificationMessage);\r\n\r\n\t\t\t\t\tsetPhoneReady(true);\r\n\t\t\t\t\tsetRequiredValidationPhone(true);\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t\t{\r\n\t\t\t\tname: \"code\",\r\n\t\t\t\ttype: \"success\",\r\n\t\t\t\tcallback: () => {\r\n\t\t\t\t\t//Pixel 1.0 - Evento de criação de conta\r\n\t\t\t\t\tconst dataPixel = {\r\n\t\t\t\t\t\teventName: `CompleteRegistration`,\r\n\t\t\t\t\t\tbody: {\r\n\t\t\t\t\t\t\tcontent_name: 'Cadastro',\r\n\t\t\t\t\t\t\tcurrency: 'BRL',\r\n\t\t\t\t\t\t\tstatus: true,\r\n\t\t\t\t\t\t\tvalue: 1\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\thandlePixel(dataPixel);\r\n\r\n\t\t\t\t\tconst signUp = getSignUp();\r\n\r\n\t\t\t\t\tconst token = signUp.token && signUp.token.accessToken;\r\n\r\n\t\t\t\t\tconst { email, password } = signUp;\r\n\r\n\t\t\t\t\tsetCard(null);\r\n\t\t\t\t\tsetUserCard(null);\r\n\t\t\t\t\ttoken && setAccessToken(token);\r\n\t\t\t\t\tsetLogin({\r\n\t\t\t\t\t\t...signUp,\r\n\t\t\t\t\t\temail,\r\n\t\t\t\t\t\tpassword,\r\n\t\t\t\t\t\tsuccess: true,\r\n\t\t\t\t\t\tsubscriptionStatus: 1,\r\n\t\t\t\t\t});\r\n\t\t\t\t\tsetPhoneReady(false);\r\n\t\t\t\t\tsetNotification(null);\r\n\t\t\t\t\tsetSignUpError(null);\r\n\t\t\t\t\tsetSignUp(null);\r\n\t\t\t\t\tsetRequiredValidationPhone(false);\r\n\r\n\t\t\t\t\tif (close && typeof close === \"function\") {\r\n\t\t\t\t\t\tclose();\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tconst { back } = userHistory;\r\n\r\n\t\t\t\t\tif (isMobile && products && products.length > 0) {\r\n\t\t\t\t\t\thistory.push(`/cart${URLParameters}`);\r\n\t\t\t\t\t\treturn;\r\n\t\t\t\t\t} else if (back && back !== \"/\") {\r\n\t\t\t\t\t\thistory.push(`/${back}${URLParameters}`);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\thistory.push(`/${URLParameters}`);\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t]);\r\n\t}\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{`${title} - Cadastro`} \r\n\r\n\t\t\t\t \r\n\r\n\t\t\t{!phoneReady && (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{signUpError && (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{signUpErrorMessages.map((error, index) => (\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{signUpErrorMessagesPrefix}\r\n\t\t\t\t\t\t\t\t\t\t{error}\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tif (back && back !== \"/\" && back !== \"sign-up\") {\r\n\t\t\t\t\t\t\t\t\thistory.push(`/${back}${URLParameters}`);\r\n\t\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\t\twindow.history.back();\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\tCadastrar nova conta \r\n\t\t\t\t\t \r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t{signUp && !signUp.googleUserId && !signUp.facebookUserId ? (\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t) : null}\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\thandleSubmit();\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\tCadastrar\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tAo se cadastrar você concorda com os\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tTermos de Uso\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t)}\r\n\r\n\t\t\t{phoneReady && (\r\n\t\t\t\t<>\r\n\t\t\t\t\t{signUpError && (\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{signUpErrorMessages.map((error, index) => (\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{signUpErrorMessagesPrefix}\r\n\t\t\t\t\t\t\t\t\t\t{error}\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t)}\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t{phoneHeaderTitle} \r\n\t\t\t\t\t \r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t)}\r\n\t\t \r\n\t);\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tsignUp: state.signUp.signUp || {},\r\n\t\tmethod: state.signUp.method || null,\r\n\t\tuserHistory: state.main.userHistory || {},\r\n\t\tURLParameters: state.main.URLParameters || \"\",\r\n\t\tsignIn: state.main.login || {},\r\n\t\tproducts: (state.main.cart && state.main.cart.products) || [],\r\n\t};\r\n};\r\n\r\nconst Connected = connect(mapStateToProps, {\r\n\tpostSignUp: signUp.postSignUp,\r\n\tpostSignUpFacebook: signUp.postSignUpFacebook,\r\n\tpostSignUpGoogle: signUp.postSignUpGoogle,\r\n\tpostPhone: signUp.postSignUpPhone,\r\n\tsetSignUp: signUp.setSignUp,\r\n\tgetSignUp: signUp.getSignUp,\r\n\tpostCode: signUp.postSignUpPhoneCode,\r\n\tsetAccessToken: user.setAccessToken,\r\n\tsetCard,\r\n\tsetUserCard,\r\n\tsetLogin,\r\n\tsetNotification,\r\n\tsetUserHistory,\r\n\thandleGTM,\r\n})(SignUpPage);\r\n\r\nexport function SignUp(props) {\r\n\treturn \r\n {loading && (\r\n \r\n \r\n )}\r\n\r\n {!loading && (\r\n \r\n {\r\n event.preventDefault();\r\n }}\r\n >\r\n {!step ? (\r\n <>\r\n \r\n Digite o seu telefone celular para finalizar o seu cadastro.\r\n \r\n\r\n {\r\n handlePhoneSubmit();\r\n }}\r\n disabled={!isValid}\r\n >\r\n Próximo\r\n \r\n \r\n ) : null}\r\n\r\n {step === 1 ? (\r\n <>\r\n \r\n Digite o código de 6 dígitos enviado por{' '}\r\n SMS no número abaixo. Ele\r\n também foi enviado para o{' '}\r\n EMAIL cadastrado.\r\n \r\n \r\n \r\n\r\n {\r\n handleCodeSubmit();\r\n }}\r\n >\r\n OK\r\n \r\n\r\n {confirmationType === 'sms' && messageErrors + 1 <= 2 ? (\r\n 0 ? true : false}\r\n onClick={async (event) => {\r\n event.preventDefault();\r\n\r\n if (time > 0) {\r\n return;\r\n }\r\n\r\n const newConfirmationType =\r\n messageErrors + 1 >= 4 ? 'phone' : 'sms';\r\n\r\n handleTime(30, time, {\r\n messageErrors: messageErrors + 1,\r\n confirmationType: newConfirmationType,\r\n resend: true,\r\n clear: true,\r\n });\r\n\r\n handlePhoneSubmit();\r\n }}\r\n >\r\n Reenviar código{time > 0 ? `: ${time}` : ''}\r\n \r\n ) : (\r\n 0 ? true : false}\r\n onClick={async (event) => {\r\n event.preventDefault();\r\n\r\n if (time > 0) {\r\n return;\r\n }\r\n\r\n handleTime(30, time, {\r\n messageErrors: messageErrors + 1,\r\n confirmationType: 'phone',\r\n resend: true,\r\n clear: true,\r\n });\r\n\r\n handlePhoneSubmit();\r\n }}\r\n >\r\n Receber ligação{time > 0 ? `: ${time}` : ''}\r\n \r\n )}\r\n \r\n ) : null}\r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n","import styled from \"styled-components\";\r\n\r\nexport const Wrapper = styled.div`\r\n\tbackground: #fff;\r\n\tflex: 1;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: flex-start;\r\n\tjustify-content: center;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tborder-radius: 0.938rem;\r\n\tpadding: 0 1.5rem 1.5rem 1.5rem;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\r\n\t> p {\r\n\t\tmargin: 0;\r\n\t\tmargin-bottom: 1.25rem;\r\n\r\n\t\t&:last-child {\r\n\t\t\tmargin: 0;\r\n\t\t}\r\n\t}\r\n`;\r\nexport const Title = styled.h1`\r\n\tfont-size: 1.2rem;\r\n\tfont-weight: 700;\r\n\ttext-align: start;\r\n\tmargin: 1rem 0 1.3rem 0;\r\n\ttext-align: center;\r\n`;\r\n\r\nexport const ContentWrapper = styled.div`\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\tflex: 1;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\tflex-direction: column;\r\n\r\n\t&.motion {\r\n\t\topacity: 1;\r\n\t}\r\n\r\n\t> form {\r\n\t\t> div {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: row;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: flex-start;\r\n\t\t\t//margin-bottom: 1.25rem;\r\n\t\t\tflex-wrap: wrap;\r\n\t\t}\r\n\t}\r\n`;\r\n\r\nexport const LoadingWrapper = styled.div`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n`;\r\n\r\nexport const LoadingImage = styled.img`\r\n\twidth: 6.25rem;\r\n\theight: auto;\r\n`;\r\n\r\nexport const H1 = styled.h1`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\"#000\"};\r\n\tfont-size: 1.25rem;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tmargin-bottom: 1.25rem;\r\n\tflex: 1;\r\n\ttext-align: center;\r\n`;\r\n\r\nexport const Button = styled.button`\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.invertedPrimaryColor) ||\r\n\t\t\"#fff\"};\r\n\tbackground: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\"#000\"};\r\n\tborder-radius: 0.938rem;\r\n\tfont-size: 0.875rem;\r\n\tfont-weight: bold;\r\n\tflex: 1;\r\n\tmax-height: 3.75rem;\r\n\tmin-height: 3.75rem;\r\n\tline-height: 3.75rem;\r\n\tpadding: 0;\r\n\tmargin: 1.5rem 0 0 0;\r\n\tfont-size: 1rem;\r\n\tbox-sizing: border-box;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tcursor: pointer;\r\n\r\n\t&.no-highlight {\r\n\t\tbackground: none;\r\n\t\tborder: 0 none;\r\n\t\tmin-height: auto;\r\n\t\tmax-height: auto;\r\n\t\theight: auto;\r\n\t\tcolor: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textHighlightColor) ||\r\n\t\t\t\"#000\"};\r\n\r\n\t\t&:disabled {\r\n\t\t\topacity: 0.5;\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\topacity: 0.9;\r\n\t}\r\n\r\n\t&.disabled {\r\n\t\topacity: 0.5;\r\n\t\tcursor: default;\r\n\t}\r\n`;\r\n\r\nexport const Input = styled.input`\r\n\tborder: 0 none;\r\n\tborder-bottom: #e1e1e1 0.063rem solid;\r\n\tfont-size: 1rem;\r\n\ttext-align: center;\r\n\tline-height: 1.875rem;\r\n\tcolor: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textPrimaryColor) ||\r\n\t\t\"#000\"};\r\n\tmargin: 0 auto;\r\n\tflex: 0;\r\n\tmin-width: 50%;\r\n\tborder: 2px solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\"#CCC\"};\r\n\twidth: 100%;\r\n\tborder-radius: 10px;\r\n\theight: 3rem;\r\n\t//padding: 1rem;\r\n\tbox-sizing: border-box;\r\n`;\r\n\r\nexport const PhoneNumberInput = styled(Input)`\r\n\twidth: 100%;\r\n\tmargin: 0;\r\n\tflex: 1 0 100%;\r\n\r\n\t@media (min-width: 30rem) {\r\n\t\tflex: 1 1 50%;\r\n\t}\r\n`;\r\n\r\nexport const SelectWrapper = styled.div`\r\n\tborder: 1px solid\r\n\t\t${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\t\"#CCC\"};\r\n\tflex: 1 0 100%;\r\n\twidth: 100%;\r\n\tborder-radius: 15px;\r\n\theight: 3rem;\r\n\tpadding: 1rem;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tmargin: 0 0 1rem 0;\r\n\tmin-width: 100%;\r\n`;\r\n\r\nexport const Select = styled.select`\r\n\tborder: 0 none;\r\n\tbackground: none;\r\n\tflex: 1;\r\n\tmax-width: 5.313rem;\r\n\tmin-width: 5.313rem;\r\n\tpadding: 0;\r\n\theight: 1.875rem;\r\n\tmin-height: 1.875rem;\r\n\tmax-height: 1.875rem;\r\n\tline-height: 1.875rem;\r\n\tfont-size: 1rem;\r\n\tcolor: #000;\r\n\r\n\t> option {\r\n\t\tfont-size: 1rem;\r\n\t\tcolor: #000;\r\n\t}\r\n`;\r\n\r\nexport const Paragraph = styled.p`\r\n\tmargin: 0 0 1rem 0;\r\n\ttext-align: center;\r\n\tfont-size: 14px;\r\n`;\r\n\r\nexport const Form = styled.form`\r\n\tflex: 1;\r\n\tmin-width: 100%;\r\n\tmax-width: 100%;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\r\n\t> p {\r\n\t\ttext-align: center;\r\n\t\tpadding: 0 1.2rem;\r\n\t}\r\n`;\r\n\r\nexport const Div = styled.div`\r\n\t&.footer {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: row;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\t\tmargin: 1rem 0 0 0;\r\n\t}\r\n`;\r\n\r\nexport const PhoneFieldsWrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-wrap: wrap;\r\n`;\r\n\r\nexport const SelectedPhoneWrapper = styled.span`\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tfont-weight: 700;\r\n\ttext-transform: uppercase;\r\n\tjustify-content: center;\r\n\tmargin: 0 0 2rem 0;\r\n`;\r\n\r\nexport const Block = styled.div`\r\n\twidth: 8px;\r\n\theight: 8px;\r\n\tborder-radius: 50%;\r\n\tbackground: ${(props) =>\r\n\t\t(props.theme &&\r\n\t\t\tprops.theme.main &&\r\n\t\t\tprops.theme.main.general &&\r\n\t\t\tprops.theme.main.general.textNinethColor) ||\r\n\t\t\"#CCC\"};\r\n\tmargin: 0 3px;\r\n\r\n\t&.active {\r\n\t\twidth: 10px;\r\n\t\theight: 10px;\r\n\t\tbackground: ${(props) =>\r\n\t\t\t(props.theme &&\r\n\t\t\t\tprops.theme.main &&\r\n\t\t\t\tprops.theme.main.general &&\r\n\t\t\t\tprops.theme.main.general.primaryColor) ||\r\n\t\t\t\"#CCC\"};\r\n\t}\r\n`;\r\n","import { Grid, makeStyles, TextField } from '@material-ui/core'\r\nimport React, {\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\n\r\nimport { CustomLoading } from '../../components'\r\n\r\nimport {\r\n\tWrapper,\r\n\tContentWrapper,\r\n\tButton,\r\n\tInput,\r\n\tParagraph,\r\n\tForm,\r\n\tDiv,\r\n\tTitle,\r\n\tBlock\r\n} from './styles'\r\nimport { useSnackbar } from 'react-simple-snackbar'\r\nimport { errorOptions, successOptions } from '../../../infra/utils/styleNotification'\r\n\r\nconst useStyles = makeStyles(() => ({\r\n\tinput: {\r\n\t\twidth: '100%',\r\n\t\theight: '50px',\r\n\t\tmarginLeft: 'auto',\r\n\t\tmarginRight: 'auto',\r\n\t\tpaddingBottom: 0,\r\n\t\tmarginTop: 0,\r\n\t\tfontSize: '1rem',\r\n\t\tfontWeight: 500,\r\n\t\t\"& .MuiInputBase-root\": {\r\n\t\t\theight: '50px',\r\n\t\t},\r\n\t\t\"& .MuiFormLabel-root\": {\r\n\t\t\t//transform: `translate(14px, 16px) scale(1)`,\r\n\t\t\tcolor: '#CECECE',\r\n\t\t},\r\n\t\t\"& .MuiInputBase-input:hover + fieldset\": {\r\n\t\t\tborder: `1px solid #CECECE`\r\n\t\t},\r\n\t\t\"& .MuiInputBase-input:focus + fieldset\": {\r\n\t\t\tborder: `1px solid #CECECE`\r\n\t\t}\r\n\t},\r\n\ttextField: {\r\n\t\tborderRadius: '15px'\r\n\t}\r\n}))\r\nexport function ChangePassword(props) {\r\n\tconst classes = useStyles()\r\n\tconst {\r\n\t\tpostEmailCode,\r\n\t\temail,\r\n\t\tpostPassword,\r\n\t\tclose,\r\n\t\tsetPassword,\r\n\t\tSubmitLogin,\r\n\t\tpostResendCode\r\n\t} = props\r\n\r\n\tconst [loading, setLoading] = useState(false)\r\n\tconst [step, setStep] = useState(1)\r\n\tconst [code1, setCode1] = useState(null)\r\n\tconst [code2, setCode2] = useState(null)\r\n\tconst [code3, setCode3] = useState(null)\r\n\tconst [code4, setCode4] = useState(null)\r\n\tconst [code5, setCode5] = useState(null)\r\n\tconst [code6, setCode6] = useState(null)\r\n\tconst [newPassword, setNewPassword] = useState(null)\r\n\tconst [checknewPassword, setCheckNewPassword] = useState(null)\r\n\r\n\tconst [time, setTime] = useState(30)\r\n\tconst [openSuccessSnackbar] = useSnackbar(successOptions({ modal: true }))\r\n\tconst [openErrorSnackbar] = useSnackbar(errorOptions({ modal: true }))\r\n\r\n\tlet timeout = null\r\n\r\n\tuseEffect(() => {\r\n\t\tif (time > 0) {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tpostTime(Number(time - 1))\r\n\r\n\t\t\t\tif (time - 1 > 0) {\r\n\t\t\t\t\thandleTime(30, time - 1)\r\n\t\t\t\t}\r\n\t\t\t}, 1000)\r\n\t\t}\r\n\t\treturn () => { }\r\n\t}, [time])\r\n\r\n\tfunction postTime(args) {\r\n\t\tsetTime(args)\r\n\t}\r\n\r\n\tfunction handleTime(startTime, time = 0, data = {}) {\r\n\t\tif (data.clear) {\r\n\t\t\tpostTime(30, 30)\r\n\t\t\tclearTimeout(timeout)\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\ttimeout = setTimeout(() => {\r\n\t\t\tpostTime(Number(time - 1))\r\n\r\n\t\t\tif (time - 1 > 0) {\r\n\t\t\t\thandleTime(startTime, time - 1)\r\n\t\t\t}\r\n\t\t}, 1000)\r\n\t}\r\n\tasync function handleResendCodeSubmit() {\r\n\t\tconst requestData = {\r\n\t\t\temail: email\r\n\t\t}\r\n\t\tawait postResendCode([{\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'payload',\r\n\t\t\tdata: requestData\r\n\t\t}, {\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'error',\r\n\t\t\tcallback: () => {\r\n\t\t\t\tconst notificationMessage = 'Não foi possível reenviar o código.'\r\n\t\t\t\topenErrorSnackbar(notificationMessage)\r\n\t\t\t}\r\n\t\t}, {\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'success',\r\n\t\t\tcallback: () => {\r\n\t\t\t\tsetTime(30)\r\n\t\t\t}\r\n\t\t}])\r\n\t}\r\n\r\n\tasync function handleCodeSubmit() {\r\n\t\tsetLoading(true)\r\n\r\n\t\tif (!code1 || !code2 || !code3 || !code4 || !code5 || !code6) {\r\n\t\t\topenErrorSnackbar('É necessário preencher o código corretamente!')\r\n\t\t\tsetLoading(false)\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tconst requestData = {\r\n\t\t\temail: email,\r\n\t\t\tcode: `${code1}${code2}${code3}${code4}${code5}${code6}`\r\n\t\t}\r\n\r\n\t\tawait postEmailCode([{\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'payload',\r\n\t\t\tdata: requestData\r\n\t\t}, {\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'error',\r\n\t\t\tcallback: () => {\r\n\t\t\t\tconst notificationMessage = 'Não foi possível validar o código para seu email.'\r\n\t\t\t\topenErrorSnackbar(notificationMessage)\r\n\t\t\t\tsetLoading(false)\r\n\t\t\t}\r\n\t\t}, {\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'success',\r\n\t\t\tcallback: () => {\r\n\t\t\t\tsetStep(2)\r\n\t\t\t\tsetLoading(false)\r\n\t\t\t}\r\n\t\t}])\r\n\t}\r\n\r\n\tasync function handlePasswordSubmit() {\r\n\t\tsetLoading(true)\r\n\r\n\t\tif (!newPassword) {\r\n\t\t\topenErrorSnackbar('É necessário preencher o campo \"senha\"!')\r\n\t\t\tsetLoading(false)\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tif (!checknewPassword) {\r\n\t\t\topenErrorSnackbar('É necessário preencher o campo \"Confirmar senha\"!')\r\n\t\t\tsetLoading(false)\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tif (newPassword !== checknewPassword) {\r\n\t\t\topenErrorSnackbar('As senhas são diferentes! Tente novamente.')\r\n\t\t\tsetLoading(false)\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tconst requestData = {\r\n\t\t\temail: email,\r\n\t\t\tpassword: newPassword\r\n\t\t}\r\n\r\n\t\tawait postPassword([{\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'payload',\r\n\t\t\tdata: requestData\r\n\t\t}, {\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'error',\r\n\t\t\tcallback: () => {\r\n\t\t\t\tconst notificationMessage = 'Não foi possível atualizar a sua senha. Tente mais tarde.'\r\n\t\t\t\topenErrorSnackbar(notificationMessage)\r\n\t\t\t\tsetLoading(false)\r\n\t\t\t}\r\n\t\t}, {\r\n\t\t\tname: 'code',\r\n\t\t\ttype: 'success',\r\n\t\t\tcallback: () => {\r\n\t\t\t\topenSuccessSnackbar('Senha atualizada com sucesso!', 2000)\r\n\r\n\t\t\t\tsetTime(() => {\r\n\t\t\t\t\tsetPassword(newPassword)\r\n\t\t\t\t\tSubmitLogin()\r\n\t\t\t\t\tclose()\r\n\t\t\t\t}, 5000)\r\n\t\t\t}\r\n\t\t}])\r\n\t}\r\n\r\n\tconst handleNextInput = ({ value, id }) => {\r\n\t\tlet next = null\r\n\t\tif (value && value.length === 1) {\r\n\t\t\tif (id === 'code1') next = 'code2'\r\n\t\t\telse if (id === 'code2') next = 'code3'\r\n\t\t\telse if (id === 'code3') next = 'code4'\r\n\t\t\telse if (id === 'code4') next = 'code5'\r\n\t\t\telse if (id === 'code5') next = 'code6'\r\n\t\t\tconst el = document.getElementById(next);\r\n\t\t\tel.focus();\r\n\t\t}\r\n\t\tif (!value) {\r\n\t\t\tif (id === 'code6') next = 'code5'\r\n\t\t\telse if (id === 'code5') next = 'code4'\r\n\t\t\telse if (id === 'code4') next = 'code3'\r\n\t\t\telse if (id === 'code3') next = 'code2'\r\n\t\t\telse if (id === 'code2') next = 'code1'\r\n\t\t\tconst el = document.getElementById(next);\r\n\t\t\tel.focus();\r\n\t\t}\r\n\t}\r\n\treturn \r\n\t\t\r\n\t\t\t\r\n\t\t\t \r\n\t \r\n}\r\n","import React from 'react'\r\nimport { useState, useEffect } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport FacebookLogin from 'react-facebook-login/dist/facebook-login-render-props'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport {\r\n\tuseStoreSettings\r\n} from '../hooks'\r\n\r\nimport { ReactComponent as IconGoogle } from '../assets/icons/icon_google_multicolor.svg'\r\nimport { ReactComponent as IconFacebook } from '../assets/icons/icon_facebook.svg'\r\nimport { ReactComponent as IconClose } from '../assets/icons/icon_close.svg'\r\n\r\nimport {\r\n\tFACEBOOK_APP_ID,\r\n} from '../../config'\r\n\r\nimport {\r\n\tlogin,\r\n\tsetNotification,\r\n\tpostFacebookLogin,\r\n\tpostGoogleLogin,\r\n\tsetUserHistory,\r\n\tsetCard,\r\n\tsetSignIn,\r\n\tsetUserCard,\r\n\tsetLogin,\r\n\tsetMethodAccess,\r\n\thandleGTM\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tloading,\r\n\tuserAddress,\r\n\tsignUp,\r\n\tuser,\r\n\taddressActions\r\n} from '../../state'\r\n\r\nimport history from '../../history'\r\n\r\nimport { pipe, GetContent } from '../../domain/helpers'\r\n\r\nimport { useDeviceLayout } from '../hooks'\r\n\r\nimport {\r\n\tCustomIcon,\r\n\tCustomLoading,\r\n\tInputRounded\r\n} from '../components'\r\n\r\nimport {\r\n\tWrapper,\r\n\tForm,\r\n\tFormField,\r\n\tStoreLogoImage,\r\n\tSubmitButton,\r\n\tSingUpButton,\r\n\tDivider,\r\n\tDividerLabel,\r\n\tGoogleButton,\r\n\tFacebookButton,\r\n\tTermsOfServiceLabel,\r\n\tForgotPasswordLink,\r\n\tMobileHeaderWrapper,\r\n\tCloseButton,\r\n\tErrorMessage\r\n} from './styles'\r\n\r\nimport { Phone } from '../sign-up'\r\nimport {\r\n\tPhoneHeader,\r\n\tTitle\r\n} from '../sign-up/styles'\r\nimport { ForgotPassword, useForgotPasswordDialogStyles } from '../password'\r\nimport { Dialog, Slide } from '@material-ui/core'\r\nimport { ChangePassword } from './ChangePassword'\r\nimport { useGoogleLogin } from '@react-oauth/google'\r\nimport Axios from 'axios'\r\n\r\nconst Context = React.createContext({})\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n\t\t\r\n\t\t\t{`${title} - Login`} \r\n\t\t\t\r\n\t\t\t\r\n\t\t \r\n\t\t\r\n\t\t\t {\r\n\t\t\t\thistory.push(`/${URLParameters}`)\r\n\t\t\t\tclose()\r\n\t\t\t}}>\r\n\t\t\t\t \r\n\t\t \r\n\t\t{!phoneReady ? <>\r\n\t\t\t\r\n\t\t\t\t\t{message}\r\n\t\t\t\t\t \r\n\t\t\t}\r\n\r\n\t\t\t\r\n\t\t : <>\r\n\t\t\t{signInError &&\r\n\t\t\t\t\r\n\t\t\t\t\t{signInError}\r\n\t\t\t\t\t \r\n\t\t\t}\r\n\t\t\t\r\n\t\t\t\t{phoneHeaderTitle} \r\n\t\t\t \r\n\t\t\t\r\n\t\t}\r\n\r\n\t\t handleCloseDialogForgotPassword()}\r\n\t\t\taria-labelledby='forgot-password-dialog'\r\n\t\t\topen={loginForgotPassword}\r\n\t\t\tmaxWidth={'xs'}\r\n\t\t\tfullWidth={false}\r\n\t\t\tfullScreen={false}\r\n\t\t\tclasses={{\r\n\t\t\t\tscrollPaper: forgotPasswordDialogClasses.scrollPaper,\r\n\t\t\t\tpaper: forgotPasswordDialogClasses.paper\r\n\t\t\t}}\r\n\t\t\tTransitionComponent={Transition}\r\n\t\t>\r\n\t\t\t handleCloseDialogForgotPassword()} />\r\n\t\t\r\n\r\n\t\t handleCloseDialogChangePassword()}\r\n\t\t\taria-labelledby='forgot-password-dialog'\r\n\t\t\tclassName={isMobile ? 'change-password' : ''}\r\n\t\t\tPaperProps={{\r\n\t\t\t\tstyle: {\r\n\t\t\t\t\tmaxWidth: '22rem',\r\n\t\t\t\t\tmaxHeight: '25rem',\r\n\t\t\t\t\tborderRadius: '.75rem',\r\n\t\t\t\t\ttop: isMobile ? '16rem' : ''\r\n\t\t\t\t}\r\n\t\t\t}}\r\n\t\t\topen={loginChangePassword}\r\n\t\t\tmaxWidth={'xs'}\r\n\t\t\tfullWidth={false}\r\n\t\t\tfullScreen={false}\r\n\t\t\tTransitionComponent={Transition}\r\n\t\t>\r\n\t\t\t \r\n}\r\n\r\nSignInPage.propTypes = {\r\n\tloading: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]))\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tloading: state.loading.loading || [],\r\n\t\taddress: (state.address.address) || {},\r\n\t\tsignIn: (state.main.login) || {},\r\n\t\tuserHistory: (state.main.userHistory) || {},\r\n\t\taccessToken: state.user.accessToken || '',\r\n\t\tURLParameters: (state.main.URLParameters) || '',\r\n\t\tchangePassword: (state.user.changePassword) || false,\r\n\t\tproducts: (state.main.cart && state.main.cart.products) || [],\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tfetchUserAddresses: userAddress.fetch,\r\n\taddUserAddress: userAddress.add,\r\n\tsetLoading: loading.setLoading,\r\n\tpostCode: signUp.postSignUpPhoneCode,\r\n\tpostEmailCode: signUp.postSignUpEmailCode,\r\n\tpostPassword: signUp.postSignUpPassword,\r\n\tpostResendCode: signUp.postSignUpResendCode,\r\n\tpostSignUp: signUp.postSignUp,\r\n\tpostPhone: signUp.postSignUpPhone,\r\n\tgetSignUp: signUp.getSignUp,\r\n\tsetSignUp: signUp.setSignUp,\r\n\tsetUserCpf: user.setUserCpf,\r\n\tsetUserName: user.setUserName,\r\n\tsetAccessToken: user.setAccessToken,\r\n\tsetNoAddressesList: addressActions.setNoAddressesList,\r\n\tsetNotification,\r\n\tpostGoogleLogin,\r\n\tpostFacebookLogin,\r\n\tsetSignIn,\r\n\tlogin,\r\n\tsetUserHistory,\r\n\tsetCard,\r\n\tsetUserCard,\r\n\tsetLogin,\r\n\tsetMethodAccess,\r\n\tsetMethod: signUp.setMethod\r\n})\r\n\r\nexport const SignIn = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'signin' })\r\n)(SignInPage))\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport ContentLoader from 'react-content-loader'\r\n\r\nfunction SkeletonContent(props) {\r\n const {\r\n module\r\n } = props\r\n\r\n if (module === 'home') {\r\n return <>\r\n {/* Highlights */}\r\n \r\n \r\n}\r\n\r\nSkeleton.propTypes = {\r\n module: PropTypes.string.isRequired\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n height: 3.125rem;\r\n z-index: 10;\r\n transition: all .5s ease-out;\r\n\r\n @media (max-width: 60rem) {\r\n ${props => {\r\n if (props.fixed) {\r\n return `\r\n position: fixed; \r\n top: 0; \r\n left: 0; \r\n opacity: 1; \r\n overflow: hidden;\r\n \r\n -webkit-animation: fadein 1s;\r\n -moz-animation: fadein 1s;\r\n -ms-animation: fadein 1s;\r\n -o-animation: fadein 1s;\r\n animation: fadein 1s; \r\n `\r\n }\r\n\r\n return `display: none; opacity: 0;`\r\n }}\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const HeaderBox = styled.div`\r\n background: #fff;\r\n color: ${props => props.theme.main.general.primaryColor || '#000'};\r\n box-sizing: border-box;\r\n cursor: pointer; \r\n min-width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n margin-top: 1.25rem;\r\n padding: 0;\r\n font-size: 1.125rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: uppercase;\r\n text-align: center;\r\n padding-bottom: 1.25rem;\r\n`\r\n","var _path, _path2;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconMotorcycle = function SvgIconMotorcycle(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20,\n height: 22,\n viewBox: \"0 0 20 22\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18.999 0.935924H16.157C15.9478 0.937031 15.7442 0.99766 15.575 1.10928L15.319 1.28263C14.798 1.62537 14.2148 1.88249 13.596 2.04229C13.3701 1.45858 12.9517 0.95215 12.3976 0.591822C11.8435 0.231494 11.1806 0.034747 10.499 0.0283203C9.81466 0.0376601 9.14969 0.235762 8.5924 0.596306C8.03511 0.956849 7.61189 1.46276 7.37897 2.04683C6.7601 1.88703 6.17692 1.62991 5.65597 1.28717L5.39897 1.11744C5.23109 1.0031 5.02782 0.93959 4.81797 0.935924H1.99897C1.86519 0.93673 1.73292 0.961723 1.6099 1.00944C1.48688 1.05716 1.37558 1.12665 1.28248 1.21385C1.18938 1.30105 1.11636 1.40421 1.06768 1.51731C1.019 1.63041 0.995644 1.75118 0.998968 1.87257C0.996182 1.99365 1.01994 2.11403 1.06886 2.22671C1.11778 2.33939 1.19089 2.44212 1.28393 2.52893C1.37697 2.61574 1.4881 2.68491 1.61085 2.7324C1.7336 2.77989 1.86553 2.80477 1.99897 2.80559H4.49197C5.32391 3.35776 6.27667 3.74154 7.28597 3.93101C7.40108 4.33384 7.6071 4.71058 7.89097 5.03738C6.99381 5.48724 6.24615 6.14742 5.72602 6.949C5.20588 7.75059 4.93235 8.66419 4.93397 9.59446V15.4939C4.93053 15.7021 4.97242 15.9089 5.05722 16.1023C5.14203 16.2958 5.26808 16.4722 5.42816 16.6214C5.58824 16.7705 5.77918 16.8895 5.99005 16.9716C6.20092 17.0536 6.42756 17.0971 6.65697 17.0994H7.16897V14.1334C7.15802 13.3159 7.50496 12.5278 8.13362 11.9423C8.76227 11.3568 9.62126 11.0216 10.522 11.0103C10.967 11.0162 11.4063 11.1018 11.8147 11.2622C12.2232 11.4226 12.5927 11.6546 12.9021 11.945C13.2115 12.2353 13.4547 12.5783 13.6177 12.9541C13.7807 13.33 13.8603 13.7313 13.852 14.1352V17.1085H14.364C14.5934 17.1061 14.82 17.0627 15.0309 16.9807C15.2418 16.8986 15.4327 16.7796 15.5928 16.6304C15.7529 16.4813 15.8789 16.3049 15.9637 16.1114C16.0485 15.9179 16.0904 15.7112 16.087 15.503V9.60353C16.0885 8.23295 15.5042 6.91526 14.457 5.92774C14.0617 5.57738 13.6152 5.27808 13.13 5.03829C13.4069 4.71006 13.6051 4.33289 13.712 3.93101C14.7198 3.73745 15.6717 3.35404 16.506 2.80559H18.999C19.1324 2.80477 19.2643 2.77989 19.3871 2.7324C19.5098 2.68491 19.621 2.61574 19.714 2.52893C19.8071 2.44212 19.8802 2.33939 19.9291 2.22671C19.978 2.11403 20.0018 1.99365 19.999 1.87257C20.0017 1.62842 19.8982 1.39315 19.711 1.2178C19.5238 1.04245 19.2679 0.941167 18.999 0.935924ZM10.499 1.43511C10.993 1.44204 11.4639 1.62634 11.8086 1.94766C12.1532 2.26898 12.3436 2.70115 12.338 3.14957C12.3437 3.37209 12.3003 3.5934 12.2105 3.8005C12.1206 4.0076 11.986 4.1963 11.8146 4.35551C11.6432 4.51473 11.4385 4.64124 11.2125 4.72762C10.9865 4.81399 10.7437 4.85849 10.4985 4.85849C10.2532 4.85849 10.0105 4.81399 9.78444 4.72762C9.55841 4.64124 9.35369 4.51473 9.18231 4.35551C9.01093 4.1963 8.87635 4.0076 8.78648 3.8005C8.6966 3.5934 8.65325 3.37209 8.65897 3.14957C8.65442 2.70162 8.84539 2.27025 9.19015 1.94969C9.53492 1.62913 10.0055 1.44543 10.499 1.43874V1.43511Z\",\n fill: \"#F27C25\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.499 13.123C9.97027 13.1242 9.46359 13.3154 9.08974 13.6547C8.7159 13.994 8.50529 14.4539 8.50397 14.9337V19.9981C8.50397 20.4784 8.71415 20.9389 9.08829 21.2785C9.46242 21.618 9.96986 21.8088 10.499 21.8088C11.0281 21.8088 11.5355 21.618 11.9096 21.2785C12.2838 20.9389 12.494 20.4784 12.494 19.9981V14.9337C12.4885 14.455 12.2766 13.9974 11.9036 13.6589C11.5306 13.3204 11.0264 13.128 10.499 13.123V13.123Z\",\n fill: \"#F27C25\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconMotorcycle, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_motorcycle.986a7fef.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useEffect, useState } from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n Wrapper,\r\n HeaderBox,\r\n H1\r\n} from './styles'\r\nexport function FixedHeader(props) {\r\n const {\r\n name\r\n } = props\r\n const [fixed, setFixed] = useState(false)\r\n useEffect(() => {\r\n const handleScroll = () => {\r\n if (window.scrollY > 400 && !fixed) {\r\n setFixed(true)\r\n } else if (window.scrollY < 400 && !!fixed) {\r\n setFixed(false)\r\n }\r\n }\r\n window.addEventListener('scroll', handleScroll, true)\r\n return () => {\r\n window.removeEventListener('scroll', handleScroll)\r\n }\r\n }, [\r\n fixed\r\n ])\r\n return \r\n \r\n \r\n \r\n}\r\n\r\nFixedHeader.propTypes = {\r\n\tname: PropTypes.string\r\n}\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconPickup = function SvgIconPickup(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 18.087,\n height: 22.274,\n viewBox: \"0 0 18.087 22.274\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9436\",\n \"data-name\": \"Grupo 9436\",\n transform: \"matrix(0.999, 0.035, -0.035, 0.999, 652.815, -3722.854)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6330\",\n \"data-name\": \"Caminho 6330\",\n d: \"M-518.374,3743.589a1.073,1.073,0,0,0-.95.511,13.564,13.564,0,0,0-1.615,2.546.774.774,0,0,0,.653,1.016l10.965.5a.706.706,0,0,0,.649-.388l1.307-2.458a.787.787,0,0,0-.584-1.172Z\",\n transform: \"translate(-0.521 -0.254)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9418\",\n \"data-name\": \"Grupo 9418\",\n transform: \"translate(-521.729 3746.023)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6331\",\n \"data-name\": \"Caminho 6331\",\n d: \"M-509.811,3758.726l-9.806-.362a.8.8,0,0,0-.792.747l-1.316,12.861a.831.831,0,0,0,.646.924l2.208.379,4.578.785,3.887.668a1.15,1.15,0,0,0,1.132-.219,1.3,1.3,0,0,0,.245-.948l-.035-.663-.1-1.865-.261-4.947-.253-4.8-.133-2.516Z\",\n transform: \"translate(521.729 -3755.615)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6332\",\n \"data-name\": \"Caminho 6332\",\n d: \"M-476.208,3765.7l-2.573-15.444-1.537,2.726a.818.818,0,0,1-.2.227l.791,15.006a.464.464,0,0,0,.753.376l2.475-2.074A.88.88,0,0,0-476.208,3765.7Z\",\n transform: \"translate(493.624 -3750.255)\",\n fill: \"#191750\"\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconPickup, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_pickup.34bd0b04.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconCurrency = function SvgIconCurrency(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 15,\n height: 25,\n viewBox: \"0 0 15 25\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M14.15 16.5152C14.15 17.8486 13.6833 18.9736 12.75 19.8902C11.8333 20.8069 10.5917 21.3819 9.025 21.6152V23.1902C9.025 23.5736 8.90833 23.8819 8.675 24.1152C8.44167 24.3652 8.13333 24.4902 7.75 24.4902C7.36667 24.4902 7.05833 24.3652 6.825 24.1152C6.59167 23.8819 6.475 23.5736 6.475 23.1902V21.6652C5.525 21.5819 4.6 21.3819 3.7 21.0652C2.8 20.7486 2.025 20.3319 1.375 19.8152C1.15833 19.6652 1.00833 19.4986 0.925 19.3152C0.841667 19.1319 0.8 18.9069 0.8 18.6402C0.8 18.2902 0.9 17.9819 1.1 17.7152C1.31667 17.4486 1.55833 17.3152 1.825 17.3152C1.99167 17.3152 2.14167 17.3486 2.275 17.4152C2.425 17.4652 2.61667 17.5569 2.85 17.6902C3.61667 18.1902 4.36667 18.5569 5.1 18.7902C5.85 19.0236 6.63333 19.1402 7.45 19.1402C8.56667 19.1402 9.425 18.9236 10.025 18.4902C10.6417 18.0569 10.95 17.4319 10.95 16.6152C10.95 16.1319 10.7833 15.7402 10.45 15.4402C10.1167 15.1402 9.7 14.9069 9.2 14.7402C8.7 14.5569 8 14.3486 7.1 14.1152C5.85 13.7986 4.83333 13.4819 4.05 13.1652C3.26667 12.8319 2.59167 12.3319 2.025 11.6652C1.45833 10.9986 1.175 10.0986 1.175 8.96523C1.175 7.61523 1.65833 6.46523 2.625 5.51523C3.59167 4.56523 4.85833 3.97357 6.425 3.74023V2.16523C6.425 1.7819 6.54167 1.47357 6.775 1.24023C7.00833 0.990233 7.31667 0.865233 7.7 0.865233C8.08333 0.865233 8.39167 0.990233 8.625 1.24023C8.85833 1.47357 8.975 1.7819 8.975 2.16523V3.71523C10.6583 3.9319 12.1083 4.54023 13.325 5.54023C13.725 5.84023 13.925 6.2319 13.925 6.71523C13.925 7.06523 13.8167 7.37357 13.6 7.64023C13.4 7.9069 13.1583 8.04023 12.875 8.04023C12.725 8.04023 12.575 8.01523 12.425 7.96523C12.2917 7.91523 12.1083 7.81523 11.875 7.66523C11.1917 7.1819 10.5417 6.82357 9.925 6.59023C9.325 6.34023 8.60833 6.21523 7.775 6.21523C6.74167 6.21523 5.91667 6.44857 5.3 6.91523C4.68333 7.36523 4.375 7.99023 4.375 8.79023C4.375 9.34023 4.55 9.79023 4.9 10.1402C5.25 10.4736 5.69167 10.7319 6.225 10.9152C6.75833 11.0986 7.48333 11.3069 8.4 11.5402C9.61667 11.8402 10.6083 12.1486 11.375 12.4652C12.1417 12.7819 12.7917 13.2652 13.325 13.9152C13.875 14.5486 14.15 15.4152 14.15 16.5152Z\",\n fill: \"#F37922\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconCurrency, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_currency.d8cee6d4.svg\";\nexport { ForwardRef as ReactComponent };","var _defs, _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconAgendamento = function SvgIconAgendamento(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 24,\n height: 24,\n viewBox: \"0 0 24 24\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _defs || (_defs = /*#__PURE__*/React.createElement(\"defs\", null, /*#__PURE__*/React.createElement(\"clipPath\", {\n id: \"clip-path\"\n }, /*#__PURE__*/React.createElement(\"rect\", {\n id: \"Ret\\\\xE2ngulo_4270\",\n \"data-name\": \"Ret\\\\xE2ngulo 4270\",\n width: 24,\n height: 24,\n transform: \"translate(0 0)\",\n fill: \"#f78a2f\"\n })))), _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9816\",\n \"data-name\": \"Grupo 9816\",\n transform: \"translate(0 -0.001)\"\n }, /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9815\",\n \"data-name\": \"Grupo 9815\",\n transform: \"translate(0 0.001)\",\n clipPath: \"url(#clip-path)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6393\",\n \"data-name\": \"Caminho 6393\",\n d: \"M21.1,24H2.9a.231.231,0,0,0-.061-.034A3.2,3.2,0,0,1,0,20.632Q0,12.886,0,5.14a3.822,3.822,0,0,1,.051-.723,3.256,3.256,0,0,1,3.3-2.638c.412,0,.823,0,1.262,0,0-.286,0-.55,0-.813A.918.918,0,0,1,5.542,0a.907.907,0,0,1,.915.974c0,.263,0,.525,0,.788H17.54c0-.094,0-.171,0-.248,0-.2,0-.406,0-.609a.9.9,0,0,1,.889-.9.909.909,0,0,1,.951.872c.015.294,0,.589,0,.908.473,0,.917,0,1.36,0A3.27,3.27,0,0,1,24,5.07q0,4.816,0,9.633c0,2.008,0,4.016,0,6.023a3.2,3.2,0,0,1-2.431,3.161c-.154.041-.31.076-.466.114M22.154,9.348H1.856c-.005.07-.012.123-.012.177q0,5.611,0,11.223A1.43,1.43,0,0,0,3.4,22.22H20.6a1.918,1.918,0,0,0,.363-.025,1.431,1.431,0,0,0,1.192-1.518q0-5.529,0-11.059ZM1.843,7.535H22.13c0-.938.036-1.859-.013-2.777a1.188,1.188,0,0,0-1.01-1.127,12.038,12.038,0,0,0-1.721-.1c0,.315,0,.573,0,.829a.924.924,0,1,1-1.845,0c0-.263,0-.525,0-.784H6.456a6.229,6.229,0,0,1-.01.88,1.2,1.2,0,0,1-.247.587.853.853,0,0,1-.972.235.891.891,0,0,1-.613-.848c-.008-.285,0-.571,0-.873-.432,0-.828,0-1.224,0A1.433,1.433,0,0,0,1.844,5.04c-.005.5,0,1,0,1.5v.995\",\n transform: \"translate(0 0)\",\n fill: \"#f78a2f\"\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconAgendamento, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_agendamento.e476ef98.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconIos = function SvgIconIos(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 19.566,\n height: 24,\n viewBox: \"0 0 19.566 24\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_7078\",\n \"data-name\": \"Caminho 7078\",\n d: \"M10.8,2.089A5.137,5.137,0,0,1,14.565,0a5.125,5.125,0,0,1-1.24,3.836A4.053,4.053,0,0,1,9.75,5.518,4.457,4.457,0,0,1,10.8,2.089Zm-.845,4.8c.811,0,2.317-1.115,4.277-1.115a5.357,5.357,0,0,1,4.7,2.4,5.212,5.212,0,0,0-2.6,4.547A5.344,5.344,0,0,0,19.566,17.6s-2.26,6.362-5.313,6.362c-1.4,0-2.492-.945-3.97-.945-1.506,0-3,.98-3.973.98C3.522,24,0,17.965,0,13.114,0,8.342,2.981,5.838,5.777,5.838,7.6,5.838,9.006,6.886,9.951,6.886Z\",\n fillRule: \"evenodd\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconIos, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_ios.03a4a980.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconAndroid = function SvgIconAndroid(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 20.307,\n height: 24,\n viewBox: \"0 0 20.307 24\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_7079\",\n \"data-name\": \"Caminho 7079\",\n d: \"M1.485,7.775a1.433,1.433,0,0,0-1.053.433A1.416,1.416,0,0,0,0,9.246v6.2A1.432,1.432,0,0,0,.433,16.5a1.433,1.433,0,0,0,1.053.433A1.411,1.411,0,0,0,2.531,16.5a1.446,1.446,0,0,0,.425-1.053v-6.2a1.416,1.416,0,0,0-.433-1.038,1.417,1.417,0,0,0-1.039-.433M13.428,2.208,14.452.319A.19.19,0,0,0,14.38.03a.2.2,0,0,0-.288.086l-1.038,1.9a7.234,7.234,0,0,0-5.8,0L6.217.117A.2.2,0,0,0,5.928.03a.19.19,0,0,0-.072.288L6.88,2.208A6.324,6.324,0,0,0,4.4,4.422,5.592,5.592,0,0,0,3.476,7.53H16.817a5.594,5.594,0,0,0-.923-3.108A6.351,6.351,0,0,0,13.428,2.208ZM7.507,4.956a.541.541,0,0,1-.4.166.516.516,0,0,1-.389-.166.575.575,0,0,1,0-.793A.518.518,0,0,1,7.11,4a.561.561,0,0,1,.4.959m6.079,0a.517.517,0,0,1-.389.166A.562.562,0,0,1,13.2,4a.518.518,0,0,1,.389.166.575.575,0,0,1,0,.793M3.534,17.655A1.575,1.575,0,0,0,5.12,19.241H6.187L6.2,22.516a1.434,1.434,0,0,0,.433,1.053A1.416,1.416,0,0,0,7.673,24a1.477,1.477,0,0,0,1.485-1.486V19.242h1.99v3.274a1.485,1.485,0,1,0,2.971,0V19.242H15.2a1.575,1.575,0,0,0,1.572-1.586V8.049H3.534Zm15.289-9.88a1.429,1.429,0,0,0-1.038.425,1.411,1.411,0,0,0-.433,1.046v6.2a1.432,1.432,0,0,0,.433,1.053,1.416,1.416,0,0,0,1.038.433,1.477,1.477,0,0,0,1.485-1.486v-6.2A1.41,1.41,0,0,0,19.875,8.2a1.447,1.447,0,0,0-1.053-.425\",\n transform: \"translate(0 -0.001)\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconAndroid, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_android.e9951b99.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgCashback = function SvgCashback(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 22,\n height: 25,\n viewBox: \"0 0 22 25\",\n fill: \"none\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M10.9074 8.63953L8.06914 5.81395H14.6605V9.88372H16.4198V4.06977H8.06914L10.9074 1.24419L9.6642 0L4.69136 4.94186L9.6642 9.88372L10.9074 8.63953ZM10.5556 14.5349C9.85966 14.5349 9.17939 14.7395 8.60077 15.1228C8.02215 15.5061 7.57118 16.0509 7.30487 16.6883C7.03856 17.3257 6.96888 18.0271 7.10464 18.7038C7.24041 19.3805 7.57551 20.0021 8.06759 20.4899C8.55966 20.9778 9.1866 21.31 9.86913 21.4446C10.5517 21.5792 11.2591 21.5101 11.902 21.2461C12.545 20.9821 13.0945 20.535 13.4811 19.9613C13.8677 19.3876 14.0741 18.7132 14.0741 18.0233C14.0741 17.0981 13.7034 16.2108 13.0435 15.5566C12.3837 14.9024 11.4887 14.5349 10.5556 14.5349ZM0 11.0465V25H21.1111V11.0465M18.7654 20.3488C18.1433 20.3488 17.5467 20.5939 17.1068 21.03C16.6669 21.4661 16.4198 22.0576 16.4198 22.6744H4.69136C4.69136 22.0576 4.44422 21.4661 4.00432 21.03C3.56442 20.5939 2.96779 20.3488 2.34568 20.3488V15.6977C2.96779 15.6977 3.56442 15.4527 4.00432 15.0165C4.44422 14.5804 4.69136 13.9889 4.69136 13.3721H16.4198C16.4198 13.9889 16.6669 14.5804 17.1068 15.0165C17.5467 15.4527 18.1433 15.6977 18.7654 15.6977V20.3488Z\",\n fill: \"white\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgCashback, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/cashback.8a22b4af.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n position: relative;\r\n overflow: hidden;\r\n\r\n > p {\r\n margin-bottom: .938rem;\r\n }\r\n`\r\n\r\nexport const ImageLogo = styled.img``\r\n\r\nexport const H1 = styled.h1`\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1.25rem;\r\n line-height: 1.25rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n padding-left: 1.25rem;\r\n max-width: 100%;\r\n min-width: 100%;\r\n box-sizing: border-box;\r\n`\r\n\r\nexport const StoreStatusWrapper = styled.p`\r\n color: ${props => {\r\n if (props.status === 1) {\r\n return '#19BF2B'\r\n }\r\n\r\n if (props.status === 2) {\r\n return '#FF0000'\r\n }\r\n\r\n if (props.status === 3) {\r\n return '#9B9B9B'\r\n }\r\n\r\n if (props.status === 4) {\r\n return '#FF9900'\r\n }\r\n\r\n if (props.status === 5 || props.status === 6) {\r\n return '#FF9900'\r\n }\r\n\r\n return '#000'\r\n\r\n }};\r\n text-transform: uppercase;\r\n font-size: .688rem;\r\n margin: 0;\r\n padding: 0;\r\n padding-left: 1.25rem;\r\n`\r\n\r\nexport const Background = styled.div`\r\n position: relative;\r\n margin-bottom: 1.563rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\r\n > img {\r\n width: 100%;\r\n transform: scale(1);\r\n\r\n &.logo {\r\n width: 4.063rem;\r\n height: auto;\r\n position: absolute;\r\n right: 1.875rem;\r\n top: 100%;\r\n transform: translate(0, -50%);\r\n border-radius: 50%;\r\n }\r\n }\r\n`\r\n\r\nexport const Div = styled.div``\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n`\r\n\r\nexport const DetailedStoreHeaderContainer = styled.header`\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n`\r\nexport const HeaderNavigation = styled.div`\r\n backgroung: #fff;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 1rem;\r\n z-index: 2;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundHeader) || '#333'};;\r\n\r\n svg {\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n\r\n &.none{\r\n display:none;\r\n }\r\n\r\n path {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#333'};\r\n }\r\n \r\n &:first-of-type {\r\n width: .85rem;\r\n height: 1.25rem;\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const BackButton = styled.span`\r\n cursor: pointer;\r\n`\r\n\r\nexport const HeaderBanner = styled.div`\r\n width: 100%;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n\r\n img, svg {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n }\r\n`\r\n\r\nexport const HeaderBannerMobile = styled.div`\r\n width: 100%;\r\n height: 8.563rem\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n\r\n img, svg {\r\n width: 100%;\r\n height: auto;\r\n\t\tmin-height: 100%;\r\n\t\tmax-height: 100%;\r\n display: block;\r\n }\r\n`\r\n\r\nexport const HeaderStore = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n`\r\n\r\nexport const StoreInfosContent = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n\r\n @media (min-width: 60rem) {\r\n flex-direction: row;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'};\r\n }\r\n`\r\n\r\nexport const StoreIcon = styled.div`\r\n position: absolute;\r\n max-width: 4rem;\r\n height: 4rem;\r\n //background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n top: -2.5rem;\r\n right: 1.5rem;\r\n\r\n img, svg {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 50%;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n position: unset;\r\n margin: 0 1rem 0 3rem;\r\n max-width: 6rem;\r\n height: 6rem;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n flex: 1; \r\n }\r\n`\r\n\r\nexport const StoreDetails = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n padding: 2.5rem 1rem 0rem 1rem;\r\n\r\n >div{\r\n &.app{\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n padding: 1.5rem;\r\n flex: 1;\r\n\r\n > p {\r\n margin-bottom: 0.5rem;\r\n }\r\n }\r\n`\r\n\r\nexport const ButtonApp = styled.div`\r\n cursor: pointer;\r\n padding: .4rem .8rem;\r\n background: none;\r\n font-size: .8rem;\r\n border: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n display: flex;\r\n align-items: center;\r\n border-radius: 8px;\r\n\r\n svg {\r\n margin-left: 8px;\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const StoreName = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin: 0;\r\n\r\n h1 {\r\n margin: 0 1rem 0 0;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#000'};\r\n }\r\n\r\n img, svg {\r\n cursor: pointer;\r\n width: 1.2rem;\r\n height: 1.2rem;\r\n\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#333'};\r\n }\r\n\r\n g {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const StoreStatus = styled.p`\r\n font-size: .875rem;\r\n text-transform: uppercase;\r\n margin: 0;\r\n margin-bottom: 1rem;\r\n\r\n &.store-status--open {\r\n color: #19BF2B; \r\n }\r\n\r\n &.store-status--close {\r\n color: #FF0000; \r\n }\r\n\r\n &.store-status--unavailable {\r\n color: #9B9B9B; \r\n }\r\n\r\n &.store-status--no-communication {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'}; \r\n }\r\n\r\n &.store-status--temporarily-closed {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'}; \r\n }\r\n`\r\n\r\nexport const BoxFreeShipping = styled.div`\r\n\r\n & span {\r\n\tfont-family: 'Roboto';\r\n\tdisplay: inline-block;\r\n\tflex-direction: row;\r\n\tborder: 1px solid #007141;\r\n\tcolor: #007141;\r\n\tborder-radius: 4px;\r\n\tbackground: #fff;\r\n\tfont-size: 12px;\r\n\tpadding: 2px 2px;\r\n\tmargin-bottom: 8px;\r\n\t\r\n\t& .icon {\r\n\t\twidth: 22px;\r\n\t\theight: 17px;\r\n\t\tmargin-right: 5px;\r\n\t}\t\r\n }\r\n`;\r\n\r\n\r\nexport const StoreCost = styled.div`\r\n display: flex;\r\n flex: 0;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n max-width: 7rem;\r\n min-width: 6rem;\r\n\tjustify-content: center;\r\n\r\n &.fee {\r\n svg {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n &.minimum-value{\r\n svg {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n &.time {\r\n svg {\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n g {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n path {\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n h3 {\r\n margin: 0;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#000'};\r\n font-size: .7rem;\r\n font-weight: 500;\r\n text-align: start;\r\n flex: 1;\r\n font-weight: bold;\r\n\r\n @media (min-width: 60rem) {\r\n position: relative;\r\n margin-top: -1.3rem;\r\n }\r\n }\r\n\r\n p {\r\n width: 100%;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.titleColor) || '#CCC'};\r\n font-size: 1rem;\r\n margin: .3rem 0 0 0;\r\n\r\n @media (min-width: 60rem) {\r\n padding-left: 1.7rem;\r\n position: relative;\r\n margin-top: -1.6rem;\r\n }\r\n @media (max-width: 60rem) {\r\n height:100%;\r\n }\r\n }\r\n\r\n @media (min-width: 25rem) {\r\n min-width: 7rem;\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n max-width: unset;\r\n min-width: 9.5rem;\r\n \r\n h3 {\r\n font-size: .9rem;\r\n }\r\n\r\n &.fee {\r\n min-width: 9.5rem;\r\n }\r\n\r\n &.time {\r\n min-width: 11rem;\r\n }\r\n }\r\n`\r\nexport const AppDownload = styled.div`\r\n min-width: 190px;\r\n \r\n @media (max-width: 40rem) {\r\n display:none;\r\n }\r\n`\r\n\r\nexport const StoreCosts = styled.div`\r\n display: flex;\r\n\r\n ${StoreCost}:not(:first-of-type) {\r\n padding-left: .5rem;\r\n border-left: .15rem solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#CCC'};\r\n }\r\n\r\n ${StoreCost}:not(:last-of-type) {\r\n padding-right: .5rem;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n margin: 0;\r\n\r\n ${StoreCost}:not(:first-of-type) {\r\n padding-left: 1rem;\r\n }\r\n }\r\n\r\n\t@media (max-width: 60rem) {\r\n\t\tjustify-content: space-around;\r\n }\r\n`\r\n\r\nexport const CostIconContainer = styled.div`\r\n flex: 1;\r\n display: flex;\r\n justify-content: flex-start;\r\n margin: 0 .25rem 0 0;\r\n min-width: 1.2rem;\r\n max-width: 1.2rem;\r\n align-items: center;\r\n\r\n @media (min-width: 20rem) {\r\n margin: 0 .6rem 0 0;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n min-height: 3rem;\r\n }\r\n`\r\nexport const ModalityContainer = styled.div`\r\n margin: 0;\r\n display: flex;\r\n border: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textFourthColor) || '#000'};\r\n border-radius: .5rem;\r\n\r\n &.btn-store {\r\n border-radius: 1rem;\r\n\r\n > button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 8px 3px 8px 8px;\r\n cursor: pointer;\r\n float: left;\r\n font-weight: bold;\r\n border-radius: 1rem;\r\n font-size: .8rem;\r\n \r\n svg {\r\n width: 1.5rem;\r\n height: 1.1rem;\r\n margin: 0 .2rem;\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n stroke:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.btn-group button {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 5px 15px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n border-radius: .5rem;\r\n font-size: .8rem;\r\n\r\n &.active{\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.colorTextHeader) || '#000'};\r\n border-radius: .5rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n box-shadow:2px 2px 9px 1px;\r\n z-index: 1;\r\n }\r\n }\r\n`\r\n\r\nexport const Button = styled.button``\r\n\r\nexport const ButtonDisable = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#000'};\r\n padding: 9px 4px 9px 9px;\r\n float: left;\r\n font-weight: bold;\r\n font-size: .8rem;\r\n width: 30px;\r\n background-color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.backgroundHeader) || '#000'};\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const CashbackContent = styled.div`\r\n display: flex;\r\n align-items: center;\r\n background-color: #00a958;\r\n color: #fff;\r\n font-size: .8rem;\r\n font-weight: bold;\r\n padding: .2rem 4.5rem;\r\n border-bottom-right-radius: 16px;\r\n width: max-content;\r\n & svg {\r\n margin-right: 8px;\r\n width: 16px;\r\n }\r\n @media (min-width: 35rem) and (max-width: 60rem) {\r\n padding: .2rem 5rem .2rem 1rem !important;\r\n font-size: 1rem;\r\n }\r\n @media (max-width: 35rem) {\r\n position: absolute;\r\n padding: .2rem 2rem .2rem 1rem;\r\n font-size: 1rem;\r\n }\r\n\r\n ${props => (props.smallSizeOnly && props.top) && `\r\n position: absolute !important;\r\n padding: .2rem 1rem .2rem 1rem !important;\r\n font-size: 1rem !important;\r\n font-size: .75rem !important;\r\n ` }\r\n`\r\n","import React from \"react\";\r\n\r\nimport { ReactComponent as IconCashback } from '../../../assets/icons/cashback.svg'\r\nimport { CashbackContent } from \"./styles\";\r\n\r\nexport const Cashback = (props) => {\r\n\r\n const { cashback, isMobile, smallSizeOnly, top } = props;\r\n\r\n return (\r\n \r\n \r\n )\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n connect\r\n} from 'react-redux'\r\n\r\nimport history from '../../../history'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../../domain/helpers'\r\n\r\nimport { ReactComponent as IconInfo } from '../../assets/icons/icon_info.svg'\r\nimport { ReactComponent as IconMotorcycle } from '../../assets/icons/icon_motorcycle.svg'\r\nimport { ReactComponent as IconPickup } from '../../assets/icons/icon_pickup.svg'\r\nimport { ReactComponent as IconCurrency } from '../../assets/icons/icon_currency.svg'\r\nimport { ReactComponent as IconClock } from '../../assets/icons/icon_clock.svg'\r\nimport { ReactComponent as IconStoreAgendamento } from '../../assets/icons/icon_agendamento.svg'\r\nimport { ReactComponent as IconIOS } from '../../assets/icon_ios.svg'\r\nimport { ReactComponent as IconAndroid } from '../../assets/icon_android.svg'\r\nimport { ReactComponent as MotoSvg } from '../../assets/moto.svg'\r\n\r\nimport {\r\n useDeviceLayout\r\n} from '../../hooks'\r\n\r\nimport {\r\n DetailedStoreHeaderContainer,\r\n HeaderBanner,\r\n HeaderStore,\r\n StoreIcon,\r\n StoreDetails,\r\n StoreName,\r\n StoreStatus,\r\n StoreCosts,\r\n StoreCost,\r\n CostIconContainer,\r\n HeaderBannerMobile,\r\n AppDownload,\r\n Div,\r\n ButtonApp,\r\n StoreInfosContent,\r\n\tBoxFreeShipping\r\n} from './styles'\r\nimport { APP_SHOW_BUTTON, HAS_CASHBACK, TITLE } from '../../../config'\r\nimport Logo from './../../assets/LogoVQPStore.png'\r\nimport { Cashback } from './Cashback/Cashback'\r\n\r\nconst getStatusProps = (args) => {\r\n const allStatus = {\r\n 1: { name: 'Aberto', textClassName: 'store-status--open' },\r\n 2: { name: 'Fechado', textClassName: 'store-status--close' },\r\n 3: { name: 'Indisponível', textClassName: 'store-status--unavailable' },\r\n 4: { name: 'Sem comunicação', textClassName: 'store-status--no-communication' },\r\n 5: { name: 'Fechado Temporariamente', textClassName: 'store-status--temporarily-closed' },\r\n 6: { name: 'Fechado Temporariamente', textClassName: 'store-status--temporarily-closed' }\r\n }\r\n\r\n return allStatus[args] || allStatus['2']\r\n}\r\n\r\nexport const Context = React.createContext({})\r\nexport function HeaderComponent(props) {\r\n const {\r\n storeName,\r\n image,\r\n imageMobile,\r\n deliveryFee,\r\n deliveryMinimumValue,\r\n pickupFee,\r\n pickupMinimumValue,\r\n deliveryTime,\r\n modalityId,\r\n storeImg,\r\n scheduling,\r\n URLParameters,\r\n storeFees,\r\n storeStatus,\r\n isMenu,\r\n setAppDownload,\r\n cashback,\r\n\t\tminForFreeShipping\r\n } = props\r\n\r\n const minimumValue = (modalityId === 2 ? pickupMinimumValue : deliveryMinimumValue) || 0\r\n\r\n const statusProps = getStatusProps(storeStatus);\r\n\r\n const hasCashback = JSON.parse(HAS_CASHBACK);\r\n\r\n const isMobile = useDeviceLayout({\r\n isMobile: true\r\n })\r\n\r\n return (\r\n \r\n {!isMobile ? (\r\n \r\n 
\r\n \r\n ) : (\r\n \r\n 
\r\n \r\n )}\r\n \r\n {\r\n (hasCashback && !!cashback) && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n history.push(isMenu ? `/store-info${URLParameters}` : `/${URLParameters}`)} />\r\n \r\n \r\n {statusProps.name}\r\n \r\n\t\t\t\t\t\t{ !!deliveryFee && minForFreeShipping && (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t )}\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nHeaderComponent.propTypes = {\r\n deliveryFee: PropTypes.number,\r\n pickupFee: PropTypes.number,\r\n deliveryMinimumValue: PropTypes.number,\r\n deliveryTime: PropTypes.string,\r\n modalityId: PropTypes.number,\r\n pickupMinimumValue: PropTypes.number,\r\n storeName: PropTypes.string,\r\n image: PropTypes.string,\r\n imageMobile: PropTypes.string,\r\n status: PropTypes.number,\r\n handleModality: PropTypes.func,\r\n storeImg: PropTypes.string,\r\n accessToken: PropTypes.string,\r\n storeDelivery: PropTypes.bool,\r\n storePickup: PropTypes.bool,\r\n opened: PropTypes.bool,\r\n scheduling: PropTypes.bool,\r\n URLParameters: PropTypes.string,\r\n storeFees: PropTypes.shape({}),\r\n setVisibleNavigation: PropTypes.func,\r\n storeStatus: PropTypes.number,\r\n isMenu: PropTypes.bool,\r\n cashback: PropTypes.number,\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n const store = { ...state.store.store }\r\n const cashback = ((store && store.loyaltyPoints && store.loyaltyPoints[0]) && store.loyaltyPoints[0].points) || 0;\r\n return {\r\n deliveryFee: store && store.deliveryFee,\r\n deliveryMinimumValue: store && store.deliveryMinimumValue,\r\n deliveryTime: store && store.deliveryTime,\r\n modalityId: state.main.modality && state.main.modality.id,\r\n pickupFee: store && store.pickupFee,\r\n pickupMinimumValue: store && store.pickupMinimumValue,\r\n scheduling: store && store.scheduling,\r\n storeDelivery: (store && store.delivery) || null,\r\n storeFees: store && store.fees,\r\n storeImg: (store && store.logo) || '',\r\n storeName: store && store.name,\r\n storeStatus: store && store.status,\r\n storePickup: (store && store.pickup) || null,\r\n URLParameters: (state.main.URLParameters) || '',\r\n accessToken: (state.user.accessToken) || '',\r\n\t\tminForFreeShipping: store && store.minForFreeShipping,\r\n cashback,\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const Header = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'store' })\r\n)(HeaderComponent))\r\n","var _path, _path2, _path3, _path4;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgGooglePlay = function SvgGooglePlay(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Componente_1_1\",\n \"data-name\": \"Componente 1 \\\\u2013 1\",\n width: 19.803,\n height: 22.008,\n viewBox: \"0 0 19.803 22.008\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_7074\",\n \"data-name\": \"Caminho 7074\",\n d: \"M420.313,306.752l-4.009-2.314-3.3,3.187,3.013,2.913,4.293-2.478a.756.756,0,0,0,0-1.309\",\n transform: \"translate(-400.888 -296.544)\"\n })), _path2 || (_path2 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_7075\",\n \"data-name\": \"Caminho 7075\",\n d: \"M164.251,130.939l-4.412-2.547-9.668-4.955,10.92,10.556Z\",\n transform: \"translate(-149.516 -123.437)\"\n })), _path3 || (_path3 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_7076\",\n \"data-name\": \"Caminho 7076\",\n d: \"M153.85,399.966l9.525-5.247,4.111-2.373-2.876-2.781Z\",\n transform: \"translate(-153.034 -377.958)\"\n })), _path4 || (_path4 = /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_7077\",\n \"data-name\": \"Caminho 7077\",\n d: \"M135.152,133.23l-.01,21.319,11.032-10.665Z\",\n transform: \"translate(-135.141 -132.803)\"\n })));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgGooglePlay, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/google_play.60e8419e.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nimport { fadeIn } from '../components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n position: relative;\r\n max-width: 100%;\r\n min-width: 100%;\r\n ${ props => props.maxHeight ?\r\n `max-height: ${ props.maxHeight }px;\r\n min-height: ${ props.maxHeight }px;\r\n overflow: hidden;` :\r\n `` }\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n min-width: 100%;\r\n max-width: 100%;\r\n\r\n &#cart {\r\n position: absolute;\r\n left: 0;\r\n top: 100%;\r\n z-index: 2;\r\n min-width: 100%;\r\n max-width: 100%;\r\n min-height: 100%;\r\n\r\n > div {\r\n &#cart-content {\r\n flex: none;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n padding-bottom: 5.625rem;\r\n \r\n > div {\r\n &.cart-list {\r\n flex: none;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n &#store-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n flex: 1;\r\n max-width: 100%;\r\n min-width: 100%;\r\n position: relative;\r\n\r\n &.no-cart {\r\n > div {\r\n &#store-cartbar {\r\n opacity: 0;\r\n pointer-events: none;\r\n }\r\n\r\n &#store-products {\r\n padding-bottom: 0;\r\n }\r\n }\r\n }\r\n\r\n > div {\r\n &#store-header {\r\n padding-bottom: .625rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n\r\n &#store-search {\r\n padding: 0 1.25rem;\r\n margin-bottom: 1.25rem;\r\n max-width: 100%;\r\n min-width: 100%;\r\n }\r\n \r\n &#store-search-category {\r\n padding: 0 1.25rem;\r\n margin-bottom: 1.875rem;\r\n max-width: 100%;\r\n min-width: 100%;\r\n }\r\n\r\n &#store-products {\r\n padding: 0 1.25rem;\r\n padding-bottom: 0;\r\n max-width: 100%;\r\n min-width: 100%;\r\n }\r\n\r\n &#addressbar {\r\n position: fixed;\r\n left: 0;\r\n bottom: 0;\r\n opacity: 0;\r\n max-width: 100%;\r\n min-width: 100%;\r\n\r\n &.motion {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n &#store-product {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n z-index: 5;\r\n }\r\n\r\n &#store-categories-products {\r\n max-width: 100%;\r\n min-width: 100%;\r\n padding-bottom: 6.875rem;\r\n }\r\n }\r\n }\r\n }\r\n \r\n > div {\r\n display: flex;\r\n flex: 1;\r\n\r\n > main {\r\n background: #fff;\r\n min-height: 100%;\r\n max-height: unset;\r\n box-sizing: border-box;\r\n position: relative;\r\n\r\n > div {\r\n &#cards {\r\n\t\t\t\t\t@media (min-width: 60rem) {\r\n\t\t\t\t\t\tmin-height: calc(100% - 17rem);\r\n\t\t\t\t\t\tmax-height: calc(100% - 17rem);\r\n\t\t\t\t\t}\r\n }\r\n }\r\n\r\n > img {\r\n height: auto;\r\n max-height: unset;\r\n max-width: 100%;\r\n min-height: auto;\r\n min-width: 100%;\r\n width: 100%;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: unset;\r\n }\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n > div {\r\n > main {\r\n margin: 0px auto;\r\n min-height: calc(100% - 5.625rem);\r\n max-height: calc(100% - 5.625rem);\r\n box-sizing: unset !important;\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n flex: 1;\r\n min-width: 100%;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n\r\n ${fadeIn}\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n margin: 0;\r\n padding: 0;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333'};\r\n font-size: 1rem;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: #FFF;\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n\r\n @media (min-width: 40rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-bottom: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#CCC'}\r\n flex: 1;\r\n`\r\n\r\nexport const SubHeaderWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n padding: 1.5rem 1rem 0;\r\n max-width: 100%;\r\n min-width: 100%;\r\n box-sizing: border-box;\r\n\r\n #store-search {\r\n min-width: auto;\r\n flex: 1;\r\n }\r\n\r\n @media (min-width: 60rem) {\r\n padding: 2rem 2rem 0;\r\n\r\n #store-search {\r\n flex: 0 0 calc(60% - .5rem);\r\n }\r\n }\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n text-align: left;\r\n font-size: 1.25rem;\r\n text-transform: uppercase;\r\n padding: 2rem 2rem 1rem 2rem;\r\n min-width: calc(100% - 4rem);\r\n margin-bottom: 1rem;\r\n }\r\n`\r\nexport const WhattsAppImg = styled.div`\r\n width: 4rem;\r\n height: 4rem;\r\n position: fixed;\r\n bottom: 1.25rem;\r\n right: 1.25rem;\r\n cursor: pointer;\r\n z-index: 1;\r\n\r\n &.ativo{\r\n bottom: 7rem;\r\n }\r\n \r\n img, svg {\r\n width: 4rem;\r\n height: 4rem;\r\n display: block;\r\n }\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\twidth: 100%;\r\n\tbackground: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.invertedPrimaryColor) || '#000'};\r\n\r\n\t&.cart{\r\n\t\t\tmargin-bottom:6rem;\r\n\t}\r\n`\r\nexport const WrapperButtons = styled.div`\r\ndisplay: flex;\r\nflex-direction: row;\r\n`\r\n\r\nexport const AppDownload = styled.div`\r\n\tpadding: .7rem;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\r\n\t>p{\r\n\t\tfont-size: 14px;\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\ttext-align: center;\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n\t\tfont-weight: bold;\r\n\r\n\t\t.noBold{\r\n\t\t\tfont-weight: 400;\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: 40rem) {\r\n\t\tdisplay:none;\r\n\t }\r\n`\r\nexport const ButtonApp = styled.div`\r\n cursor: pointer;\r\n padding: .4rem 1rem;\r\n background: none;\r\n font-size: .9rem;\r\n border: 1px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n display: flex;\r\n align-items: center;\r\n border-radius: 8px;\r\n margin: 10px 5px 0 0;\r\n \r\n >span{\r\n\t>p{\r\n\t\tfont-size: .7rem;\r\n\t\tmargin: 0;\r\n\t\tpadding: 0;\r\n\t}\r\n }\r\n\r\n svg {\r\n margin-right: 10px;\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n`\r\n\r\nexport const Copy = styled.div`\r\n\tpadding: .7rem;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: center;\r\n\r\n\t>p{\r\n\t\tfont-size: 14px;\r\n\t\tpadding: 0;\r\n\t\tmargin: 0;\r\n\t\ttext-align: center;\r\n\t\tcolor: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#000'};\r\n\t\tfont-weight: bold;\r\n\r\n\t\t.noBold{\r\n\t\t\tfont-weight: 400;\r\n\t\t}\r\n\t}\r\n\t\r\n\t>img{\r\n\t\tmargin: .4rem 0 1rem 0;\r\n\t\tcursor: pointer;\r\n\t}\r\n`\r\nexport const Link = styled.div`\r\n\ttext-decoration: underline;\r\n\tcursor: pointer; \r\n`\r\n","import React from 'react'\r\nimport Logo from './../../assets/VQP_logo.png'\r\nimport {\r\n\tconnect\r\n} from 'react-redux'\r\n\r\nimport {\r\n\tcalculateItemTotal,\r\n\tpipe\r\n} from '../../../domain/helpers'\r\nimport {\r\n\tWrapper,\r\n\tCopy,\r\n\tLink,\r\n\tAppDownload,\r\n\tButtonApp,\r\n\tWrapperButtons\r\n} from './styles'\r\n\r\nimport { ReactComponent as IconIOS } from '../../assets/icon_ios.svg'\r\nimport { ReactComponent as IconAndroid } from '../../assets/google_play.svg'\r\nimport { APP_SHOW_BUTTON, URL_DOWNLOAD_APP } from '../../../config'\r\n\r\nconst openApp = () => {\r\n\twindow.open(URL_DOWNLOAD_APP);\r\n}\r\n\r\nconst openInstitutional = () => {\r\n\twindow.open(`https://institucional.voceqpad.com.br/`);\r\n}\r\n\r\nconst openTerms = () => {\r\n\twindow.open(`https://institucional.voceqpad.com.br/termoscondicoes.html/`)\r\n}\r\n\r\nconst calculateCartTotal = (items) => {\r\n\tconst total = items && items.reduce((acc, item) => acc + calculateItemTotal(item), 0)\r\n\r\n return total\r\n}\r\n\r\nfunction FooterComponent(props) {\r\n\tconst { data } = props\r\n\tconst valueTotal = calculateCartTotal(data)\r\n\r\n\treturn \r\n\t{APP_SHOW_BUTTON === 'true' && (\r\n\t\t\t\r\n\t\t\t\t\t\tBaixe nosso app:\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t openApp()}>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t openApp()}>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t \r\n\r\n\t\t\t\t\t \r\n\t)}\r\n\t\t\r\n\t\t\t
openInstitutional()} />\r\n\t\t\t \r\n\t \r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tdata: (state.main.cart && state.main.cart.products) || []\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const Footer = React.memo(pipe(\r\n\tGetConnection\r\n)(FooterComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tjustify-content: center;\r\n\talign-items: center;\r\n\twidth: 100%;\r\n\r\n\t>h3{\r\n\t\twidth: 220px;\r\n\t\ttext-align: center;\r\n\t}\r\n`\r\nexport const Dialog = styled.div`\r\n\tmargin: 0 auto 1.5rem auto;\r\n\tbackground: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n\tfont-size: 1.3rem;\r\n\tline-height: 1.6em;\r\n\tborder-radius: 15px;\r\n\t/* width: 300px; */\r\n\theight: auto;\r\n\tcolor: #fff;\r\n\tpadding: 10px 15px;\r\n\tposition: relative;\r\n\tmargin-top: 30px;\r\n\tfont-weight: bold;\r\n\r\n\t&:after{\r\n\t\tcontent: \"\";\r\n\t\twidth: 0;\r\n\t\theight: 0;\r\n\t\tposition: absolute;\r\n\t\tborder-left: 20px solid transparent;\r\n\t\tborder-right: 20px solid transparent;\r\n\t\t/*Faz seta \"apontar para baixo. Definir o valor como 'top' fará ela \"apontar para cima\" */\r\n\t\t/*Aqui entra a cor da \"aba\" do balão */\r\n\t\tborder-bottom: 20px solid ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};;\r\n\t\ttop: -20px; /*localização. Experimente alterar para 'bottom'*/\r\n\t\tleft: 42%;\r\n\t}\r\n`","import React from 'react'\r\nimport QRCode from \"qrcode.react\";\r\n\r\nexport const QRcode = (value) => {\r\n\treturn (\r\n \r\n \r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n data: (state.main.cart && state.main.cart.products) || []\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {})\r\n\r\nexport const AppDownload = React.memo(pipe(\r\n GetConnection\r\n)(AppDownloadComponent))\r\n","import React, {\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect, useStore } from 'react-redux'\r\nimport { Dialog, Slide } from '@material-ui/core'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport {\r\n\tCARDAPIO_CARD,\r\n\tIMAGE_ELEVATE,\r\n\tWHATSAPP,\r\n\tWHATSAPP_NUMBER\r\n} from '../../config'\r\n\r\nimport WhattsAppImage from '../assets/whatsapp_icone.png'\r\n\r\nimport {\r\n\tuseStoreSettings,\r\n\tuseCustomLayout,\r\n\tuseDeviceLayout,\r\n\tuseLayout,\r\n\tuseSidebar,\r\n\tuseScroll\r\n} from '../hooks'\r\n\r\nimport {\r\n\tmenuActions,\r\n\tmodality,\r\n\tstore\r\n} from '../../state'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent,\r\n\tcaculateProductsQuantity,\r\n\tcalculateCartTotal\r\n} from '../../domain/helpers'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n\taddProduct,\r\n\r\n\thandleGTM,\r\n\r\n\tfetchStoreFees,\r\n\r\n\tremoveProduct,\r\n\tremoveSelectedOldCategory,\r\n\tremoveSelectedOldProduct,\r\n\tremoveSelectedProductsCategories,\r\n\r\n\t//setSelectedCategory,\r\n\tsetSearch,\r\n\tsetShowSignUp,\r\n\tsetDirectAccess,\r\n\thandlePixel,\r\n\tsetCart,\r\n\tgetApplicationsSettings\r\n} from '../../redux/actions/main'\r\n\r\nimport {\r\n\tDefaultImage as Image\r\n} from '../components'\r\n\r\nimport {\r\n\tProductCard,\r\n\tCards,\r\n\tCart,\r\n\tCartContainer,\r\n\tSkeleton,\r\n\tMainHeader,\r\n\tNavigation,\r\n\tPageContainer,\r\n\tPageContainerHeader,\r\n\tPageContainerMain,\r\n\tPageContainerSide,\r\n\tOrderTracking,\r\n\tMenu,\r\n\tSearch,\r\n\tCategoriesProducts,\r\n\tCategoriesProductsCard,\r\n\tCategoriesSelect,\r\n\tCategories,\r\n\tCartBar,\r\n\tStatusOverlay\r\n} from '..'\r\n\r\nimport {\r\n\tHeader,\r\n\tFixedHeader\r\n} from '.'\r\n\r\nimport {\r\n\tWrapper,\r\n\tParagraph,\r\n\tLoadingWrapper,\r\n\tSubHeaderWrapper,\r\n\tWhattsAppImg\r\n} from './styles.js'\r\nimport { Footer } from './Footer'\r\nimport { Product } from '../product'\r\nimport { AppDownload } from './AppDownload'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n\t\t\r\n\t\t\t{`${title} - Cardápio`} \r\n\t\t\t\r\n\t\t\t\r\n\t\t \r\n\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t{loading.includes('store') && !isMobile && \r\n\t\t\t\t\t }\r\n\r\n\t\t\t\t{!loading.includes('store') && {\r\n\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\tsetViewCards(false)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.nav)\r\n\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tcartClicked={() => {\r\n\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tisSidebarOpen={sidebarOpened}\r\n\t\t\t\t/>}\r\n\t\t\t \r\n\t\t\t\r\n\t\t\t\t{!viewCards && <>\r\n\t\t\t\t\t{loading.includes('store') && 0 ? 'ativo' : sidebarContent === layoutModeEnum.sideFullContent ||\r\n\t\t\t\t\t\t\t\tlayoutMode === layoutModeEnum.headerFullContent ? 'open-cart' : ''} onClick={() => handleWhattsApp()}>\r\n\t\t\t\t\t\t\t\t }\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t }\r\n\r\n\t\t\t\t\t\t{!viewCards && Nenhum produto foi encontrado. :\r\n\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t{isMobile && !cartDisplay && {\r\n\t\t\t\t\t\t\t\t\thistory.push(`/cart${URLParameters}`)\r\n\t\t\t\t\t\t\t\t}} /> :\r\n\t\t\t\t\t\t\tnull\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t\t{!!viewCards && <>\r\n\t\t\t\t\t \r\n\t\t\t\r\n\t\t\t\t{!isMobile && layoutMode === layoutModeEnum.sideFullContent &&\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\tconst storeQuerySelector = document.querySelector('#cart-content')\r\n\t\t\t\t\t\t\t\tconst maxHeight = storeQuerySelector && parseInt(storeQuerySelector.offsetHeight)\r\n\r\n\t\t\t\t\t\t\t\tsetStoreContentMaxHeight(maxHeight)\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\thandleClose={cartHelper.handleClose}\r\n\t\t\t\t\t\t\thandleNoToken={handleNoToken}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t\r\n\t\t\t\t}\r\n\t\t\t\t{layoutMode === layoutModeEnum.headerFullContent &&\r\n\t\t\t\t\t handleContactUs()}\r\n\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\tcurrentRoute='store'\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t/>\r\n\t\t\t\t}\r\n\t\t\t \r\n\r\n\t\t\t{CARDAPIO_CARD === 'true' ? handleCloseDialog()}\r\n\t\t\t\taria-labelledby='product-view-dialog'\r\n\t\t\t\topen={!!selectedProduct}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\tscroll={'body'}\r\n\t\t\t\tclassName={`product-detail ${selectedProduct && selectedProduct.additionals &&\r\n\t\t\t\t\tselectedProduct.additionals.length ? 'has-additionals' : ''} ${isMobile ? 'mobile' : ''}`}\r\n\t\t\t\tPaperProps={{\r\n\t\t\t\t\televation: 0,\r\n\t\t\t\t\tstyle: {\r\n\t\t\t\t\t\tmaxWidth: isMobile ? 'unset' : (selectedProduct && selectedProduct.additionals &&\r\n\t\t\t\t\t\t\tselectedProduct.additionals.length ? '40rem' : '24rem'),\r\n\t\t\t\t\t\tminWidth: isMobile ? 'calc(100% - 3rem)' : (selectedProduct && selectedProduct.additionals &&\r\n\t\t\t\t\t\t\tselectedProduct.additionals.length ? '40rem' : '24rem'),\r\n\t\t\t\t\t\tmargin: isMobile ? '5px' : '',\r\n\t\t\t\t\t\tbackgroundColor: colorPrimary\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t {\r\n\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t : handleCloseDialog()}\r\n\t\t\t\taria-labelledby='product-view-dialog'\r\n\t\t\t\topen={!!selectedProduct}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\tscroll={'body'}\r\n\t\t\t\tclassName={`product-detail ${selectedProduct && selectedProduct.additionals &&\r\n\t\t\t\t\tselectedProduct.additionals.length ? 'has-additionals' : ''} ${isMobile ? 'mobile' : ''}`}\r\n\t\t\t\tPaperProps={{\r\n\t\t\t\t\televation: 0,\r\n\t\t\t\t\tstyle: {\r\n\t\t\t\t\t\tmaxWidth: isMobile ? 'unset' : (selectedProduct && selectedProduct.additionals &&\r\n\t\t\t\t\t\t\tselectedProduct.additionals.length ? '40rem' : '24rem'),\r\n\t\t\t\t\t\tminWidth: isMobile ? 'calc(100% - 3rem)' : (selectedProduct && selectedProduct.additionals &&\r\n\t\t\t\t\t\t\tselectedProduct.additionals.length ? '40rem' : '24rem'),\r\n\t\t\t\t\t\tmargin: isMobile ? '5px' : '',\r\n\t\t\t\t\t\tbackgroundColor: colorPrimary\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t {\r\n\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t}\r\n\r\n\t\t\t handleCloseDialogCategories()}\r\n\t\t\t\taria-labelledby='categories-dialog'\r\n\t\t\t\topen={visibleCategories}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t\tclassName={`categories-detail`}\r\n\t\t\t>\r\n\t\t\t\t handleCloseDialogCategoriesCard()}\r\n\t\t\t\taria-labelledby='categories-card-dialog'\r\n\t\t\t\topen={visibleCategoriesCard}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t>\r\n\t\t\t\t handleCloseDialogAppDownload()}\r\n\t\t\t\taria-labelledby='app-download-dialog'\r\n\t\t\t\topen={appDownload}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'sm'}\r\n\t\t\t>\r\n\t\t\t\t handleCloseDialogNavigation()}\r\n\t\t\t\taria-labelledby='navigation-dialog'\r\n\t\t\t\topen={visibleNavigation}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t>\r\n\t\t\t\t handleContactUs()}\r\n\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\tcurrentRoute='store'\r\n\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t}}\r\n\t\t\t\t\tsetVisibleNavigation={setVisibleNavigation}\r\n\t\t\t\t>\r\n\t\t\t}\r\n\t\t\r\n\t \r\n}\r\n\r\nStorePage.propTypes = {\r\n\taisle: PropTypes.bool,\r\n\tallCategories: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tcategories: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tdevice: PropTypes.string,\r\n\tmodalityId: PropTypes.number,\r\n\tproducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tsearch: PropTypes.shape({\r\n\t\ttext: PropTypes.string,\r\n\t}),\r\n\tselectedCategory: PropTypes.shape({\r\n\t\tname: PropTypes.string,\r\n\t}),\r\n\tselectedProduct: PropTypes.shape({\r\n\t\tadditionals: PropTypes.arrayOf(PropTypes.shape({})),\r\n\t}),\r\n\tstoreLogo: PropTypes.string,\r\n\tstoreName: PropTypes.string,\r\n\tstoreStatus: PropTypes.number,\r\n\tuserName: PropTypes.string,\r\n\r\n\taddProduct: PropTypes.func,\r\n\r\n\tfetchStore: PropTypes.func,\r\n\tfetchStoreFees: PropTypes.func,\r\n\tgetApplicationsSettings: PropTypes.func,\r\n\r\n\thandleGTM: PropTypes.func,\r\n\r\n\tremoveProduct: PropTypes.func,\r\n\tremoveSelectedOldCategory: PropTypes.func,\r\n\tremoveSelectedOldProduct: PropTypes.func,\r\n\tremoveSelectedProduct: PropTypes.func,\r\n\r\n\tsetCategories: PropTypes.func,\r\n\tsetModality: PropTypes.func,\r\n\tsetQuantity: PropTypes.func,\r\n\tsetSelectedCategory: PropTypes.func,\r\n\tsetSelectedProduct: PropTypes.func,\r\n\tsetSearch: PropTypes.func,\r\n\tremoveSelectedProductsCategories: PropTypes.func,\r\n\taccessToken: PropTypes.string,\r\n\tcartProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\toldSelectedProduct: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tname: PropTypes.string,\r\n\t}),\r\n\toldSelectedCategory: PropTypes.shape({\r\n\t\tname: PropTypes.string,\r\n\t}),\r\n\topenModalCategory: PropTypes.bool,\r\n\tselectedProductsCategories: PropTypes.bool,\r\n\tstoreImg: PropTypes.string,\r\n\ttheme: PropTypes.shape({\r\n\t\theaderImage: PropTypes.string,\r\n\t\theaderImageMobile: PropTypes.string,\r\n\t\tlogoImageSingin: PropTypes.string,\r\n\t\tcolorPrimary: PropTypes.string,\r\n\t\tmain: PropTypes.shape({\r\n\t\t\tgeneral: PropTypes.shape({\r\n\t\t\t\tbackgroundMain: PropTypes.string,\r\n\t\t\t}),\r\n\t\t}),\r\n\t}),\r\n\tlocation: PropTypes.shape({\r\n\t\tpathname: PropTypes.string,\r\n\t}),\r\n\tuserHistory: PropTypes.shape({\r\n\t\tback: PropTypes.string,\r\n\t}),\r\n\tmatch: PropTypes.shape({\r\n\t\tparams: PropTypes.shape({\r\n\t\t\tproductURL: PropTypes.string,\r\n\t\t}),\r\n\t}),\r\n\tURLParameters: PropTypes.string,\r\n\tsetShowSignUp: PropTypes.func,\r\n\tsetStore: PropTypes.func,\r\n\tsetStoreFees: PropTypes.func,\r\n\tcleanStore: PropTypes.func,\r\n\tsetOpenCart: PropTypes.func,\r\n\tdeliveryMinimumValue: PropTypes.number,\r\n\tpickupMinimumValue: PropTypes.number,\r\n\thandlePixel: PropTypes.func,\r\n};\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\taisle: (state.store.store && state.store.store.aisle) || false,\r\n\t\tallCategories: state.menu.allCategories || [],\r\n\t\tcategories: state.menu.categories || [],\r\n\t\tselectedProduct: (state.menu.selectedProduct) || null,\r\n\t\tcartProducts: (state.main.cart && state.main.cart.products) || [],\r\n\t\topenModalCategory: state.store.store && state.store.store.selectedCategory && state.store.store.selectedCategory.openModalCategory,\r\n\t\tproducts: (state.store.store && state.store.store.products) || [],\r\n\t\tselectedCategory: state.store.store && state.store.store.selectedCategory,\r\n\t\tselectedProductsCategories: state.store.store && state.store.store.selectedCategory && state.store.store.selectedCategory.selectedProductsCategories,\r\n\t\tstoreName: state.store.store && state.store.store.name,\r\n\t\tstoreStatus: state.store.store && state.store.store.status,\r\n\t\tstoreImg: (state.store.store && state.store.store.logo) || '',\r\n\t\toldSelectedProduct: (state.store.store && state.store.store.oldSelectedProduct) || {},\r\n\t\toldSelectedCategory: (state.store.store && state.store.store.oldSelectedCategory) || {},\r\n\t\tsearch: state.main.search,\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t\tdevice: (state.main.params && state.main.params.device) || '',\r\n\t\taccessToken: state.user.accessToken,\r\n\t\tuserName: state.user.name || '',\r\n\t\tuserHistory: state.main.userHistory || {},\r\n\t\tURLParameters: (state.main.URLParameters) || '',\r\n\t\tdeliveryMinimumValue: (state.store.store && state.store.store.deliveryMinimumValue) || 0,\r\n\t\tpickupMinimumValue: (state.store.store && state.store.store.pickupMinimumValue) || 0,\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\taddProduct,\r\n\tsetCart,\r\n\tfetchStore: store.fetch,\r\n\tsetStoreFees: store.setStoreFees,\r\n\tcleanStore: store.cleanStore,\r\n\tfetchStoreFees,\r\n\tgetApplicationsSettings,\r\n\thandleGTM,\r\n\tsetDirectAccess,\r\n\r\n\tremoveProduct,\r\n\tremoveSelectedOldCategory,\r\n\tremoveSelectedOldProduct,\r\n\r\n\tsetCategories: menuActions.setCategories,\r\n\tsetModality: modality.setModality,\r\n\tsetSelectedCategory: store.setSelectedCategory,\r\n\tsetSelectedProduct: menuActions.setSelectedProduct,\r\n\tsetSearch,\r\n\tsetShowSignUp,\r\n\tremoveSelectedProductsCategories,\r\n\thandlePixel\r\n})\r\n\r\nexport const Store = pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'store' })\r\n)(StorePage)\r\n","import { useDispatch, useStore } from 'react-redux'\r\n\r\nimport { scroll } from '../../state/scroll'\r\n\r\nexport function useScroll() {\r\n\tconst dispatch = useDispatch()\r\n\tconst store = useStore()\r\n\r\n\tconst stateScroll = (store.getState().main && store.getState().main.scroll) || {}\r\n\tconst scrollX = stateScroll && stateScroll.x\r\n\tconst scrollY = stateScroll && stateScroll.y\r\n\r\n\tfunction setScroll({x, y}) {\r\n\t\tdispatch(scroll.set({x, y}))\r\n\t}\r\n\r\n\treturn {\r\n\t\tsetScroll,\r\n\t\tscrollX,\r\n\t\tscrollY\r\n\t}\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\r\n > p {\r\n margin-bottom: .938rem;\r\n }\r\n`\r\nexport const ContactWrapper = styled.div`\r\n width: 100%;\r\n border-bottom: 1px solid #c2c2c2;\r\n`\r\n\r\nexport const Contact = styled.div`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n padding: 1rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n padding: 1rem 2rem;\r\n }\r\n`\r\nexport const ScheduleWrapper = styled.div`\r\n width: 100%;\r\n border-bottom: 1px solid #c2c2c2;\r\n\r\n @media (min-width: 60rem) {\r\n box-sizing: border-box\r\n }\r\n`\r\nexport const Contened = styled.div`\r\n @media (min-width: 60rem) {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.payment{\r\n flex-grow: 1\r\n }\r\n } \r\n`\r\n\r\nexport const Schedule = styled.div`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n padding: 1rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n padding: 1rem 2rem;\r\n }\r\n`\r\n\r\nexport const PaymentWrapper = styled.div`\r\n width: 100%;\r\n border-bottom: 1px solid #c2c2c2;\r\n\r\n @media (min-width: 60rem) {\r\n box-sizing: border-box\r\n }\r\n`\r\nexport const PaymentOnline = styled.div`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n padding: 1rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n padding: 1rem 2rem;\r\n }\r\n\r\n > img {\r\n margin: 0 .7rem 1rem 0\r\n }\r\n`\r\n\r\nexport const PaymentOffline = styled.div`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n padding: 1rem;\r\n\r\n\t@media (min-width: 60rem) {\r\n padding: 1rem 2rem;\r\n }\r\n\r\n > img {\r\n margin: 0 .7rem 1rem 0\r\n }\r\n`\r\n\r\nexport const Title = styled.h3`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n`\r\nexport const Paragraph = styled.p`\r\n min-width: 90px;\r\n\r\n ${props => props.today ?\r\n `color: ${(props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n font-weight: bold;` :\r\n `color: ${(props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n font-weight: 500;`}\r\n \r\n &.label{\r\n font-weight: bold;\r\n margin: .5rem .6rem .5rem 0;\r\n }\r\n\r\n &.itens{\r\n margin: .5rem 0;\r\n }\r\n\r\n &.phone{\r\n min-width: 30rem;\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n Wrapper,\r\n ContactWrapper,\r\n Title,\r\n Contact,\r\n Paragraph,\r\n Contened,\r\n ScheduleWrapper,\r\n Schedule,\r\n PaymentWrapper,\r\n PaymentOnline,\r\n PaymentOffline\r\n} from './styles'\r\n\r\nexport function Infos(props) {\r\n const {\r\n storeContact,\r\n openingHours,\r\n onlineFlags,\r\n presentialFlags\r\n } = props\r\n\r\n function handleDayWeek(day) {\r\n switch (day) {\r\n case \"Dom\":\r\n return \"Domingo\"\r\n case \"Seg\":\r\n return \"Segunda\"\r\n case \"Ter\":\r\n return \"Terça\"\r\n case \"Qua\":\r\n return \"Quarta\"\r\n case \"Qui\":\r\n return \"Quinta\"\r\n case \"Sex\":\r\n return \"Sexta\"\r\n case \"Sab\":\r\n return \"Sábado\"\r\n case \"Fer\":\r\n return \"Feriado\"\r\n default:\r\n break\r\n }\r\n }\r\n\r\n return \r\n \r\n \r\n \r\n Contato\r\n \r\n \r\n Telefone: {`(${storeContact.ddd}) ${storeContact.phone}`} \r\n Email: {storeContact.email} \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n Horário de Funcionamento\r\n \r\n {openingHours && openingHours.map((item) => {\r\n return (<>\r\n \r\n \r\n {handleDayWeek(item.day)}:\r\n \r\n \r\n {item.hour}\r\n \r\n \r\n )\r\n })}\r\n \r\n \r\n\r\n \r\n \r\n {onlineFlags && onlineFlags.length > 0 && \r\n \r\n Pagamentos aceitos pelo site\r\n \r\n {onlineFlags.map((item, index) => {\r\n\t\t\t\t\t\tconst key = `store-info-presential-card-flags-${index}`\r\n\r\n return 
\r\n })}\r\n }\r\n {presentialFlags && presentialFlags.length > 0 && \r\n \r\n Pagamentos aceitos pelo site\r\n \r\n {presentialFlags.map((item, index) => {\r\n\t\t\t\t\t\tconst key = `store-info-online-card-flags-${index}`\r\n\r\n return \r\n })}\r\n }\r\n \r\n \r\n \r\n}\r\n\r\nInfos.propTypes = {\r\n\tstoreContact: PropTypes.string,\r\n\topeningHours: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tonlineFlags: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tpresentialFlags: PropTypes.arrayOf(PropTypes.shape({}))\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n\tbackground: #fff;\r\n\tflex: 1;\r\n\tbox-sizing: border-box;\r\n\tmargin: 0 auto;\r\n\tposition: relative;\r\n\tmax-width: 100%;\r\n\tmin-width: 100%;\r\n\tmin-height: 100%;\r\n\tdisplay: flex;\r\n\t${props => props.maxHeight ?\r\n\t\t`max-height: ${ props.maxHeight }px;\r\n\t\tmin-height: ${ props.maxHeight }px;\r\n\t\toverflow: hidden;` :\r\n\t\t``}\r\n\r\n\t* {\r\n\t\tfont-family: 'Nunito', 'sans-serif';\r\n\t}\r\n\r\n\t> div {\r\n\t\tdisplay: flex;\r\n\t\tmin-height: 100%;\r\n\r\n\t\t> main {\r\n\t\t\tbackground: #fff;\r\n\t\t\tmin-height: 100%;\r\n\t\t\tmax-height: 100%;\r\n\t\t\tbox-sizing: border-box;\r\n\t\t\tposition: relative;\r\n\r\n\t\t\t> div {\r\n\t\t\t\t&.row {\r\n\t\t\t\t\tmargin: 1.5rem 2rem 0 2rem;\r\n\r\n\t\t\t\t\t> div {\r\n\t\t\t\t\t\t&.column {\r\n\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\tflex-direction: column;\r\n\r\n\t\t\t\t\t\t\t&.center {\r\n\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t@media (min-width: 60rem) {\r\n\t\t\t\t\t\t\t\tmax-width: 60%;\r\n\t\t\t\t\t\t\t\tmin-width: 60%;\r\n\r\n\t\t\t\t\t\t\t\t&.center {\r\n\t\t\t\t\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\t\t\t\t\talign-items: center;\r\n\t\t\t\t\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\t\t\t\t\tmax-width: 40%;\r\n\t\t\t\t\t\t\t\t\tmin-width: 40%;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t> svg {\r\n\t\t\t\t\t\t\t\tflex: 1;\r\n\t\t\t\t\t\t\t\theight: unset;\r\n\t\t\t\t\t\t\t\tmin-height: auto;\r\n\t\t\t\t\t\t\t\tmax-height: unset;\r\n\t\t\t\t\t\t\t\tmax-width: 30%;\r\n\t\t\t\t\t\t\t\tmin-width: 30%;\r\n\t\t\t\t\t\t\t\topacity: .3;\r\n\r\n\t\t\t\t\t\t\t\tpath {\r\n\t\t\t\t\t\t\t\t\tfill: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#CCC' };\r\n\t\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t\t@media (min-width: 60rem) {\r\n\t\t\t\t\t\t\t\t\tmax-width: 50%;\r\n\t\t\t\t\t\t\t\t\tmin-width: 50%;\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> img {\r\n\t\t\t\theight: auto;\r\n\t\t\t\tmax-height: unset;\r\n\t\t\t\tmax-width: 100%;\r\n\t\t\t\tmin-height: auto;\r\n\t\t\t\tmin-width: 100%;\r\n\t\t\t\twidth: 100%;\r\n\t\t\t\tdisplay: none;\r\n\r\n\t\t\t\t@media (min-width: 60rem) {\r\n\t\t\t\t\tdisplay: unset;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t@media (min-width: 60rem) {\r\n\t\t> div {\r\n\t\t\t> main {\r\n\t\t\t\tmin-height: calc(100% - 5.625rem);\r\n\t\t\t\tmax-height: calc(100% - 5.625rem);\r\n\t\t\t\tmargin: 0px auto;\r\n\t\t\t\tbox-sizing: unset;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`\r\n\r\nexport const H1 = styled.h1`\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n margin: 0;\r\n padding: 1rem 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: bold;\r\n min-width: 100%;\r\n text-transform: none;\r\n text-align: center;\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textThirdColor) || '#000' } .063rem solid;\r\n padding-bottom: 1.25rem;\r\n\r\n @media (min-width: 60rem) {\r\n text-align: left;\r\n font-size: 1.25rem;\r\n text-transform: uppercase;\r\n padding: 1rem 0;\r\n margin: 1.5rem 2rem 0 2rem;\r\n min-width: calc(100% - 4rem);\r\n }\r\n`\r\n\r\nexport const H2 = styled.h2`\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n border-bottom: 0 none;\r\n padding: 1.5rem 0 .5rem 0;\r\n margin: 0 1.25rem .5rem;\r\n\r\n @media (min-width: 60rem) {\r\n font-size: 1.25rem;\r\n line-height: 1.688rem;\r\n padding: 2.25rem 0 .5rem 0;\r\n margin: 0 2rem 1rem;\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const BackButton = styled.button`\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n border: 0 none;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000' };\r\n font-size: 1rem;\r\n position: absolute;\r\n cursor: pointer;\r\n left: 1.25rem;\r\n top: 1.25rem;\r\n z-index: 1;\r\n`\r\n","import React, {\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { Dialog, Slide } from '@material-ui/core'\r\nimport { Helmet } from 'react-helmet'\r\n\r\nimport history from '../../history'\r\n\r\nimport {\r\n\tuseStoreSettings,\r\n\tuseDeviceLayout,\r\n\tuseLayout,\r\n\tuseSidebar\r\n} from '../hooks'\r\n\r\nimport {\r\n\thandleGTM,\r\n\tlogout,\r\n\tsetModality\r\n} from '../../redux/actions/main'\r\n\r\nimport { cart } from '../../state'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent,\r\n\tcaculateProductsQuantity,\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tMainHeader\r\n} from '../main-header'\r\n\r\nimport {\r\n\tPageContainerSide,\r\n\tPageContainer,\r\n\tPageContainerHeader,\r\n\tPageContainerMain,\r\n\tCart,\r\n\tCartContainer,\r\n\tNavigation,\r\n\tSkeleton\r\n} from '..'\r\n\r\nimport { Header } from '../store/Header'\r\n\r\nimport { Infos } from './Infos'\r\n\r\nimport {\r\n\tWrapper,\r\n\tLoadingWrapper,\r\n} from './styles'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n\treturn \r\n\t\t\t\r\n\t\t\t\t{`${title} - Informações da loja`} \r\n\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t \r\n\r\n\t\t\t{loading.includes('store-info') && \r\n\t\t\t\t }\r\n\r\n\t\t\t{!loading.includes('store-info') && \r\n\t\t\t\t\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\tsetViewCards(false)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.nav) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.nav)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tcartClicked={() => {\r\n\t\t\t\t\t\t\tif (sidebarOpened && sidebarContent === sidebarContentEnum.cart) {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.default)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(false)\r\n\t\t\t\t\t\t\t} else {\r\n\t\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.sideFullContent)\r\n\t\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tisSidebarOpen={sidebarOpened}\r\n\t\t\t\t\t/>\r\n\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t<>\r\n\t\t\t\t\t\t \r\n\t\t\t\t\r\n\t\t\t\t\t{!isMobile && layoutMode === layoutModeEnum.sideFullContent &&\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t { }}\r\n\t\t\t\t\t\t\t\thandleClose={() => { }}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t }\r\n\r\n\t\t\t\t\t{layoutMode === layoutModeEnum.headerFullContent && handleContactUs()}\r\n\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\tcurrentRoute='contact-us'\r\n\t\t\t\t\t/>}\r\n\t\t\t\t \r\n\r\n\t\t\t\t{isMobile && handleCloseDialogNavigation()}\r\n\t\t\t\t\taria-labelledby=\"navigation-dialog\"\r\n\t\t\t\t\topen={visibleNavigation}\r\n\t\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\t\tfullWidth={fullWidth}\r\n\t\t\t\t\tfullScreen={fullScreen}\r\n\t\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\t>\r\n\t\t\t\t\t handleContactUs()}\r\n\t\t\t\t\t\tuserName={userName}\r\n\t\t\t\t\t\tcurrentRoute='store'\r\n\t\t\t\t\t\tuserClicked={() => {\r\n\t\t\t\t\t\t\thandleLayoutMode(layoutModeEnum.headerFullContent)\r\n\t\t\t\t\t\t\thandleSidebarContent(sidebarContentEnum.cart)\r\n\t\t\t\t\t\t\thandleSidebarOpened(true)\r\n\t\t\t\t\t\t}}\r\n\t\t\t\t\t\tsetVisibleNavigation={setVisibleNavigation}\r\n\t\t\t\t\t>\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t \r\n\t)\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\taccessToken: state.user.accessToken,\r\n\t\taddressDelivery: state.address.addressByCEP || '',\r\n\t\tcartProducts: (state.main.cart && state.main.cart.products) || [],\r\n\t\tloading: state.loading.loading || [],\r\n\t\tregisteredCoupons: state.main.coupons || { coupons: [] },\r\n\t\taddress: state.address.address || '',\r\n\t\tuserAddresses: state.userAddress.userAddresses || [],\r\n\t\tuserHistory: state.main.userHistory || {},\r\n\t\tuserName: state.user.name || '',\r\n\t\tstoreImg: (state.store.store && state.store.store.logo) || '',\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t\tstoreName: state.store.store && state.store.store.name,\r\n\t\tstoreId: state.main.store && state.main.store.id,\r\n\t\tstoreStatus: state.store.store && state.store.store.status,\r\n\t\tdeliveryFee: state.store.store && state.store.store.deliveryFee,\r\n\t\tdeliveryMinimumValue: state.store.store && state.store.store.deliveryMinimumValue,\r\n\t\tpickupMinimumValue: state.store.store && state.store.store.pickupMinimumValue,\r\n\t\tdeliveryTime: state.store.store && state.store.store.deliveryTime,\r\n\t\tstoreContact: state.store.store && state.store.store.contact,\r\n\t\topeningHours: state.store.store && state.store.store.openingHours,\r\n\t\tonlineFlags: state.store.store && state.store.store.onlineFlags,\r\n\t\tpresentialFlags: state.store.store && state.store.store.presentialFlags,\r\n\t\tstorePickup: (state.store.store && state.store.store.pickup) || null,\r\n\t\tstoreDelivery: (state.store.store && state.store.store.delivery) || null,\r\n\t\tscheduling: state.store.store && state.store.store.scheduling,\r\n\t\tURLParameters: (state.main.URLParameters) || ''\r\n\t}\r\n}\r\n\r\nStoreInfoPage.propTypes = {\r\n\taccessToken: PropTypes.string,\r\n\tloading: PropTypes.arrayOf(PropTypes.shape({})),\r\n\ttheme: PropTypes.shape({\r\n\t\theaderImage: PropTypes.string,\r\n\t\tlogoImage: PropTypes.string,\r\n\t\theaderImageMobile: PropTypes.string\r\n\t}),\r\n\tstoreName: PropTypes.string,\r\n\tstoreImg: PropTypes.string,\r\n\tstoreId: PropTypes.number,\r\n\tstoreStatus: PropTypes.number,\r\n\tmodalityId: PropTypes.number,\r\n\tdeliveryFee: PropTypes.number,\r\n\tdeliveryMinimumValue: PropTypes.number,\r\n\theaderBackgroundImage: PropTypes.string,\r\n\tpickupMinimumValue: PropTypes.string,\r\n\tdeliveryTime: PropTypes.string,\r\n\tstoreContact: PropTypes.string,\r\n\topeningHours: PropTypes.string,\r\n\tonlineFlags: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tpresentialFlags: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tuserName: PropTypes.string,\r\n\taddress: PropTypes.shape({}),\r\n\taddressDelivery: PropTypes.string,\r\n\tcartProducts: PropTypes.arrayOf(PropTypes.shape({})),\r\n\tsetModality: PropTypes.func,\r\n\tstoreDelivery: PropTypes.bool,\r\n\tstorePickup: PropTypes.bool,\r\n\tscheduling: PropTypes.bool,\r\n\tURLParameters: PropTypes.string\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tfetchCart: cart.fetchCart,\r\n\tlogout,\r\n\tsetModality,\r\n\thandleGTM\r\n})\r\n\r\nexport const StoreInfo = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'store-info' })\r\n)(StoreInfoPage))\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconDelivery = function SvgIconDelivery(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 13,\n height: 12.948,\n viewBox: \"0 0 13 12.948\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9409\",\n \"data-name\": \"Grupo 9409\",\n transform: \"translate(-124.374 -492.238)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_2205\",\n \"data-name\": \"Caminho 2205\",\n d: \"M12.315.687H10.371a.685.685,0,0,0-.4.131L9.8.949a3.763,3.763,0,0,1-1.179.573A2.271,2.271,0,0,0,6.5,0,2.307,2.307,0,0,0,4.365,1.521,3.763,3.763,0,0,1,3.186.949L3.011.818a.685.685,0,0,0-.4-.131H.685a.689.689,0,0,0-.685.7.689.689,0,0,0,.685.7h1.7A4.93,4.93,0,0,0,4.3,2.945a2.266,2.266,0,0,0,.414.834A3.918,3.918,0,0,0,2.692,7.214v4.45a1.192,1.192,0,0,0,1.179,1.211h.35V10.633A2.326,2.326,0,0,1,6.516,8.278a2.313,2.313,0,0,1,2.278,2.356v2.241h.35a1.192,1.192,0,0,0,1.179-1.211V7.214A3.991,3.991,0,0,0,9.208,4.45,4.118,4.118,0,0,0,8.3,3.779a2.235,2.235,0,0,0,.4-.834,5.037,5.037,0,0,0,1.912-.851h1.7a.689.689,0,0,0,.685-.7A.7.7,0,0,0,12.315.687ZM6.5,1.063A1.278,1.278,0,0,1,7.759,2.356a1.259,1.259,0,1,1-2.517,0A1.278,1.278,0,0,1,6.5,1.063Z\",\n transform: \"translate(124.374 492.238)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_2206\",\n \"data-name\": \"Caminho 2206\",\n d: \"M34.23,57.1a1.333,1.333,0,0,0-1.33,1.33v3.721a1.33,1.33,0,1,0,2.66,0V58.43A1.344,1.344,0,0,0,34.23,57.1Z\",\n transform: \"translate(96.644 444.758)\",\n fill: \"#191750\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconDelivery, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_delivery.58ee6575.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgIconRetirada = function SvgIconRetirada(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 12.269,\n height: 12.948,\n viewBox: \"0 -2 12.269 12.948\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9419\",\n \"data-name\": \"Grupo 9419\",\n transform: \"translate(521.729 -3743.333)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6330\",\n \"data-name\": \"Caminho 6330\",\n d: \"M-519.293,3743.588a.712.712,0,0,0-.615.3,7.968,7.968,0,0,0-1.044,1.509.462.462,0,0,0,.422.6l7.089.294a.463.463,0,0,0,.419-.23l.845-1.456a.463.463,0,0,0-.378-.694Z\",\n transform: \"translate(-0.604 -0.254)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"g\", {\n id: \"Grupo_9418\",\n \"data-name\": \"Grupo 9418\",\n transform: \"translate(-521.729 3744.927)\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6331\",\n \"data-name\": \"Caminho 6331\",\n d: \"M-514.023,3758.579l-6.34-.215a.5.5,0,0,0-.512.443l-.851,7.621a.5.5,0,0,0,.418.547l1.428.225,2.96.465,2.513.4a.8.8,0,0,0,.732-.129.722.722,0,0,0,.158-.562l-.023-.393-.063-1.1-.169-2.931-.164-2.842-.086-1.491Z\",\n transform: \"translate(521.729 -3756.736)\",\n fill: \"#191750\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n id: \"Caminho_6332\",\n \"data-name\": \"Caminho 6332\",\n d: \"M-477.731,3759.407l-1.664-9.151-.994,1.615a.5.5,0,0,1-.128.134l.511,8.892a.3.3,0,0,0,.487.223l1.6-1.229A.5.5,0,0,0-477.731,3759.407Z\",\n transform: \"translate(488.991 -3750.256)\",\n fill: \"#191750\"\n })))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgIconRetirada, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/icon_retirada.57c23b76.svg\";\nexport { ForwardRef as ReactComponent };","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex; \r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n padding: 1rem;\r\n margin: 1rem 0 0;\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textNinethColor) || '#e2e2e2'} .063rem solid;\r\n border-radius: .5rem;\r\n cursor: pointer;\r\n\r\n &.active{\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#e2e2e2'} .160rem solid;\r\n }\r\n\r\n &:first-child {\r\n margin-top: 0;\r\n }\r\n\r\n * {\r\n pointer-events: none;\r\n }\r\n\r\n > .full-text {\r\n min-width: 100%;\r\n max-width: 100%;\r\n }\r\n\r\n > .image {\r\n flex: 0;\r\n max-height: 5rem;\r\n min-height: 5rem;\r\n max-width: 5rem;\r\n min-width: 5rem;\r\n border-radius: .625rem;\r\n overflow: hidden;\r\n -webkit-overflow-scrolling: touch;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-right: 1.1rem;\r\n\r\n > img {\r\n min-height: auto;\r\n max-height: unset;\r\n min-width: 100%;\r\n max-width: 100%;\r\n flex: 1;\r\n }\r\n }\r\n\r\n > div {\r\n > div {\r\n &.service-info {\r\n margin-bottom: .313rem;\r\n }\r\n }\r\n\r\n > p {\r\n margin-bottom: .125rem;\r\n\r\n &.coupon {\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSixthColor) || '#e2e2e2'};\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: .625rem;\r\n font-size: .688rem;\r\n width: auto;\r\n padding: .313rem .625rem;\r\n line-height: .688rem;\r\n height: 1rem;\r\n box-sizing: border-box;\r\n display: inline-block;\r\n min-width: unset;\r\n\r\n & custom-icon{\r\n font-size: .875rem;\r\n }\r\n }\r\n\r\n &.coupon-free {\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSixthColor) || '#e2e2e2'};\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n border-radius: .625rem;\r\n font-size: .75rem;\r\n width: auto;\r\n padding: .313rem .938rem;\r\n line-height: .75rem;\r\n height: 1rem;\r\n box-sizing: border-box;\r\n display: inline-block;\r\n min-width: unset;\r\n\r\n & custom-icon{\r\n font-size: .875rem;\r\n }\r\n }\r\n }\r\n }\r\n`\r\nexport const Overlay = styled.div`\r\n min-height: 6.25rem;\r\n width: 90%;\r\n background: #000;\r\n position: absolute;\r\n opacity: .8;\r\n border-radius: 1.25rem;\r\n transform: translate(0, -10%);\r\n\r\n > div {\r\n margin-top: .938rem;\r\n\r\n &.over{\r\n display: flex;\r\n height: 100%;\r\n min-height: 100%;\r\n -webkit-align-items: center;\r\n align-items: center;\r\n -webkit-justify-content: center;\r\n justify-content: center;\r\n color: #fff;\r\n } \r\n\r\n &.text{\r\n display: flex;\r\n height: 100%;\r\n min-height: 100%;\r\n -webkit-align-items: center;\r\n align-items: center;\r\n -webkit-justify-content: center;\r\n justify-content: center;\r\n color: #fff;\r\n font-size: .688rem;\r\n margin-top: .313rem;\r\n text-align: center;\r\n }\r\n }\r\n`\r\nexport const Div = styled.div`\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n flex-direction: column;\r\n flex: 1;\r\n\r\n &.text {\r\n min-height: 5rem;\r\n }\r\n`\r\n\r\nexport const Image = styled.img`\r\n border-radius: .625rem;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n min-width: 100%;\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n flex-direction: row;\r\n margin: 0;\r\n padding: 0;\r\n font-size: .75rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textPrimaryColor) || '#333'};\r\n \r\n &.service-info{\r\n border: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'} .063rem solid;\r\n border-radius: 1rem;\r\n }\r\n\r\n &.description {\r\n font-size: .825rem\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.grey02) || '#333'};\r\n \r\n >span {\r\n &.dot{\r\n font-weight: bold;\r\n font-size: 1.6rem\r\n }\r\n }\r\n \r\n }\r\n\r\n &.address {\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n margin-bottom: .625rem;\r\n }\r\n\r\n > span {\r\n \r\n &.time-from {\r\n font-size: .8rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n margin-bottom: 0;\r\n padding: .1rem;\r\n border-radius: 1rem;\r\n max-height: 1.875rem;\r\n white-space: nowrap;\r\n\r\n svg {\r\n margin: 0 0 0 .3rem;\r\n width: .60rem;\r\n\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n\r\n &.value-from {\r\n font-size: .8rem;\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n margin-bottom: 0;\r\n padding: .1rem .2rem .1rem .1rem;\r\n border-radius: 1rem;\r\n max-height: 1.875rem;\r\n white-space: nowrap;\r\n\r\n svg {\r\n margin: 0 0 0 .3rem;\r\n width: .60rem;\r\n\r\n path {\r\n fill:${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#333'};\r\n }\r\n }\r\n }\r\n }\r\n`\r\n\r\nexport const Title = styled.h2`\r\n margin: 0;\r\n padding: 0;\r\n font-size: 1rem;\r\n line-height: 1.25rem;\r\n font-weight: 700;\r\n color: ${props => props.theme.main.general.textHighlightColor || '#002063'};\r\n`\r\n\r\nexport const Span = styled.span`\r\n &.dot {\r\n margin-left: .313rem;\r\n margin-right: .313rem;\r\n }\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { Icon } from '../../components/common'\r\nimport { CustomIcon } from '../../components'\r\n\r\nimport { ReactComponent as IconDelivery } from '../../assets/icon_delivery.svg'\r\nimport { ReactComponent as IconRetirada } from '../../assets/icon_retirada.svg'\r\n\r\nimport {\r\n\tWrapper,\r\n\tDiv,\r\n\tImage,\r\n\tParagraph,\r\n\tTitle,\r\n\tSpan\r\n} from './styles'\r\nimport { Cashback } from '../../store/Header/Cashback/Cashback'\r\nimport { HAS_CASHBACK } from '../../../config'\r\n\r\nexport function Store(props) {\r\n\tconst {\r\n\t\thandles,\r\n\t\tdata\r\n\t} = props\r\n\r\n\tconst {\r\n\t\tid,\r\n\t\tcoupon = {},\r\n\t\tname,\r\n\t\tdistance,\r\n\t\tcategory,\r\n\t\tpickup,\r\n\t\tdelivery,\r\n\t\tselectedStoreId,\r\n\t\tlogo\r\n\t} = data\r\n\r\n\tconst { handleStore } = handles\r\n\r\n\tconst {\r\n\t\tvalue: couponValue,\r\n\t\ttypeValueModalityDelivery\r\n\t} = coupon\r\n\r\n\tconsole.log(delivery)\r\n\tconst hasCashback = JSON.parse(HAS_CASHBACK);\r\n\tconst cashback = data.cashback || 0;\r\n\r\n\treturn {\r\n\t\t\thandleStore({\r\n\t\t\t\tid,\r\n\t\t\t\tcoupon,\r\n\t\t\t\tname,\r\n\t\t\t\tmodality: delivery ? 4 : 2,\r\n\t\t\t\tmodalities: {\r\n\t\t\t\t\tdelivery,\r\n\t\t\t\t\tpickup\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t}\r\n\t}>\r\n\t\t{logo && \r\n}\r\n\r\nStore.propTypes = {\r\n\thandles: PropTypes.shape({\r\n\t\thandleStore: PropTypes.func\r\n\t}),\r\n\tselectedStoreId: PropTypes.number,\r\n\tdata: PropTypes.shape({\r\n\t\tid: PropTypes.number,\r\n\t\tcoupon: PropTypes.shape({}),\r\n\t\tname: PropTypes.string,\r\n\t\tlogo: PropTypes.string,\r\n\t\tdistance: PropTypes.string,\r\n\t\tselectedStoreId: PropTypes.number,\r\n\t\tcategory: PropTypes.string,\r\n\t\tpickup: PropTypes.bool,\r\n\t\tdelivery: PropTypes.bool,\r\n\t\tstore: PropTypes.shape({\r\n\t\t\tid: PropTypes.number\r\n\t\t}),\r\n\t\tcashback: PropTypes.number\r\n\t})\r\n}\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport { Wrapper } from \"./styles\";\r\n\r\nimport { Store } from \"./../Store\";\r\n\r\nexport function List(props) {\r\n\tconst { data, handleStore, modalityId, selectedStoreId } = props;\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t{data\r\n\t\t\t\t.filter((filteredItem) => !!filteredItem)\r\n\t\t\t\t.map((mappedItem, index) => {\r\n\t\t\t\t\tconst key = `storeslist-${mappedItem.id}-${index}`;\r\n\r\n\t\t\t\t\tconst {\r\n\t\t\t\t\t\tid,\r\n\t\t\t\t\t\tname,\r\n\t\t\t\t\t\tlogo,\r\n\t\t\t\t\t\tcategory,\r\n\t\t\t\t\t\tdistance,\r\n\t\t\t\t\t\tvalueFrom,\r\n\t\t\t\t\t\tfullAddress,\r\n\t\t\t\t\t\tdeliveryEstimate,\r\n\t\t\t\t\t\tstatus,\r\n\t\t\t\t\t\tpickup,\r\n\t\t\t\t\t\tdelivery,\r\n\t\t\t\t\t\tcoupon = {},\r\n\t\t\t\t\t} = mappedItem;\r\n\r\n\t\t\t\t\tconst kmDistance = String(distance).replace(\".\", \",\");\r\n\r\n\t\t\t\t\tconst Content = {\r\n\t\t\t\t\t\tcomponent: Store,\r\n\t\t\t\t\t\tprops: {\r\n\t\t\t\t\t\t\tdata: {\r\n\t\t\t\t\t\t\t\tlogo,\r\n\t\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\t\tcategory,\r\n\t\t\t\t\t\t\t\tid,\r\n\t\t\t\t\t\t\t\tdistance: kmDistance,\r\n\t\t\t\t\t\t\t\tvalueFrom,\r\n\t\t\t\t\t\t\t\tfullAddress,\r\n\t\t\t\t\t\t\t\tdeliveryEstimate,\r\n\t\t\t\t\t\t\t\tstatus,\r\n\t\t\t\t\t\t\t\tcoupon,\r\n\t\t\t\t\t\t\t\tpickup,\r\n\t\t\t\t\t\t\t\tdelivery,\r\n\t\t\t\t\t\t\t\tmodalityId,\r\n\t\t\t\t\t\t\t\tselectedStoreId,\r\n\t\t\t\t\t\t\t},\r\n\r\n\t\t\t\t\t\t\thandles: {\r\n\t\t\t\t\t\t\t\thandleStore,\r\n\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\treturn \r\n\t);\r\n}\r\n\r\nList.propTypes = {\r\n\tdata: PropTypes.arrayOf(\r\n\t\tPropTypes.shape({\r\n\t\t\timages: PropTypes.shape({\r\n\t\t\t\thighlight: PropTypes.string,\r\n\t\t\t\tlogo: PropTypes.string,\r\n\t\t\t}),\r\n\t\t})\r\n\t),\r\n\tstore: PropTypes.shape({}),\r\n\thandleStore: PropTypes.func,\r\n\tmodalityId: PropTypes.number,\r\n\tselectedStoreId: PropTypes.number,\r\n};\r\n","import styled from 'styled-components'\r\n\r\nimport { fadeIn } from '../components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: flex-start;\r\n margin-top: 0;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n position: relative;\r\n background: #fff;\r\n\r\n ${fadeIn}\r\n\r\n * {\r\n font-family: 'Nunito', 'sans-serif';\r\n }\r\n\r\n > div {\r\n &#stores-list-loading {\r\n justify-content: center;\r\n align-items: center;\r\n display: flex;\r\n flex-direction: column;\r\n min-width: calc(100% - 2.5rem);\r\n max-width: calc(100% - 2.5rem);\r\n flex: 1;\r\n }\r\n }\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n padding: 1.25rem;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n flex: 1;\r\n flex-direction: column;\r\n min-width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n padding: 1.25rem;\r\n position: relative;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n position: relative;\r\n\r\n ${fadeIn}\r\n\r\n > div {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n &#stores-list-search {\r\n margin-bottom: 1.875rem;\r\n }\r\n }\r\n`\r\nexport const MobileHeaderWrapper = styled.header`\r\n width: 100%;\r\n height: 2rem;\r\n\r\n > button {\r\n &.close {\r\n background: none;\r\n padding: 0;\r\n margin: 0;\r\n position: absolute;\r\n right: 1.25rem;\r\n top: 1.25rem;\r\n font-size: 1.25rem;\r\n font-weight: 100;\r\n }\r\n }\r\n\r\n @media (min-width: 50rem) {\r\n display: none;\r\n }\r\n`\r\n\r\nexport const CloseButton = styled.button`\r\n color: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textHighlightColor) || '#000'};\r\n background: none;\r\n border: 0 none;\r\n padding: 0;\r\n margin: 0;\r\n`\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n","import styled,{keyframes} from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n min-width: 100%;\r\n max-width: 100%;\r\n margin-bottom: 30px;\r\n\r\n &:last-child {\r\n margin-bottom: 0;\r\n }\r\n`\r\nexport const Overlay = styled.div`\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 149px;\r\n width: 88%;\r\n background: #000;\r\n position: absolute;\r\n opacity: 0.8;\r\n border-radius: 15px;\r\n z-index: 10;\r\n\r\n > div {\r\n margin-top: 30px;\r\n\r\n &.over{\r\n height: 100%;\r\n min-height: 100%;\r\n -webkit-align-items: center;\r\n align-items: center;\r\n -webkit-justify-content: center;\r\n justify-content: center;\r\n color: #fff;\r\n text-align: center;\r\n } \r\n\r\n &.text{\r\n height: 100%;\r\n min-height: 100%;\r\n -webkit-align-items: center;\r\n align-items: center;\r\n -webkit-justify-content: center;\r\n justify-content: center;\r\n color: #fff;\r\n font-size: 12px;\r\n margin-top: 5px;\r\n text-align: center;\r\n }\r\n }\r\n`\r\n\r\nexport const Div = styled.div``\r\n\r\n\r\nexport const H2 = styled.h2`\r\n margin: 0;\r\n padding: 0;\r\n font-size: 16px;\r\n line-height: 20px;\r\n font-weight: 700;\r\n color: ${ props => props.theme.main.general.blue06Color || '#000'};\r\n`\r\n\r\nexport const StoreInfoWrapper = styled.div`\r\n > span {\r\n font-size: 13px;\r\n color: ${ props => props.theme.main.general.blue02Color || '#545454'};\r\n }\r\n`\r\n\r\nexport const BoxFreeShipping = styled.div`\r\n\tfont-family: 'Roboto';\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tborder: 1px solid #007141;\r\n\tcolor: #007141;\r\n\tborder-radius: 4px;\r\n\tbackground: #fff;\r\n\tfont-size: 12px;\r\n\tpadding: 2px 2px;\r\n\t& .icon {\r\n\t\twidth: 22px;\r\n\t\theight: 17px;\r\n\t\tmargin-right: 5px;\r\n\t}\t\r\n`;\r\n\r\nconst text = (amount) => keyframes`\r\n 0% { content:\"Entrega grátis\"; }\r\n\t80% { content:\"Entrega grátis\"; }\r\n\t80% { content:\"Acima de ${amount}\"; }\r\n 100% { content:\"Acima de ${amount}\"; }\r\n`;\r\n\r\nexport const FreeShippingLabel = styled.span`\r\n\t&::after {\r\n\t\tcontent: \"\";\r\n\t\tanimation: ${props => text(props.amount)} 8s linear infinite;\r\n\t\t}\r\n`;\r\n\r\nexport const Span = styled.span`\r\n &.dot {\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n }\r\n`\r\nexport const Background = styled.div`\r\n position: relative;\r\n margin-bottom: 10px;\r\n min-width: 100%;\r\n max-width: 100%;\r\n\r\n > img {\r\n width: 100%;\r\n border: #C6C6C6 1px solid;\r\n border-radius: 15px;\r\n\r\n &.banner{\r\n height: 149px;\r\n }\r\n\r\n &.logo {\r\n width: 65px;\r\n height: auto;\r\n position: absolute;\r\n right: 30px;\r\n top: 100%;\r\n transform: translate(0, -50%);\r\n border-radius: 50%;\r\n z-index: 10;\r\n }\r\n }\r\n`\r\n\r\nexport const ImageLogo = styled.img``\r\n\r\nexport const NameWrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 70%;\r\n`\r\nexport const Distance = styled.div`\r\n font-size: 12px;\r\n line-height: 2;\r\n`\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { Image, Shimmer } from 'react-shimmer'\r\nimport Lottie from \"lottie-react\";\r\nimport motoAnimation from \"../../../view/assets/animations/moto-anim.json\";\r\n\r\nimport {\r\n Wrapper,\r\n Background,\r\n H2,\r\n StoreInfoWrapper,\r\n Span,\r\n ImageLogo,\r\n NameWrapper,\r\n Distance,\r\n\tBoxFreeShipping,\r\n\tFreeShippingLabel\r\n} from './styles'\r\nimport { Cashback } from '../../store/Header/Cashback/Cashback'\r\nimport { HAS_CASHBACK } from '../../../config'\r\n\r\nconst StoreInfo = ({\r\n address\r\n}) => {\r\n return \r\n {`${address}`}\r\n \r\n}\r\n\r\nexport function StoreAlternative(props) {\r\n const {\r\n handles,\r\n data\r\n } = props\r\n\r\n const {\r\n id,\r\n coupon = {},\r\n name,\r\n distance,\r\n category,\r\n address,\r\n delivery,\r\n logo,\r\n highlight,\r\n pickup,\r\n cashback,\r\n\t\tminForFreeShipping\r\n } = data\r\n\r\n const { handleStore } = handles\r\n\r\n const hasCashback = JSON.parse(HAS_CASHBACK);\r\n\r\n return {\r\n handleStore({\r\n id,\r\n coupon,\r\n modality: delivery ? 4 : 2,\r\n name,\r\n modalities: {\r\n delivery,\r\n pickup\r\n }\r\n })\r\n }}>\r\n {(highlight && logo) ? (\r\n \r\n {\r\n (hasCashback && !!cashback) && (\r\n \r\n ) : (\r\n <>\r\n {\r\n (hasCashback && !!cashback) && (\r\n \r\n {`${distance} km`} \r\n \r\n\r\n \r\n\t\t )}\r\n \r\n}\r\n\r\nStoreAlternative.propTypes = {\r\n handles: PropTypes.shape({\r\n handleStore: PropTypes.func\r\n }),\r\n selectedStoreId: PropTypes.number,\r\n data: PropTypes.shape({\r\n id: PropTypes.number,\r\n coupon: PropTypes.shape({}),\r\n name: PropTypes.string,\r\n logo: PropTypes.string,\r\n distance: PropTypes.string,\r\n selectedStoreId: PropTypes.number,\r\n category: PropTypes.string,\r\n pickup: PropTypes.bool,\r\n delivery: PropTypes.bool,\r\n store: PropTypes.shape({\r\n id: PropTypes.number\r\n }),\r\n cashback: PropTypes.number\r\n })\r\n}\r\n","import React from 'react'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport {\r\n Wrapper\r\n} from './styles'\r\n\r\nimport { StoreAlternative } from '../StoreAlternative'\r\n\r\nexport function ListAlternative(props) {\r\n const {\r\n\t\tdata,\r\n\t\thandleStore,\r\n\t\tmodalityId,\r\n\t\tselectedStoreId\r\n\t} = props\r\n\r\n return \r\n {data.filter(filteredItem => !!filteredItem).map((mappedItem, index) => {\r\n const key = `storeslist-${mappedItem.id}-${index}`\r\n\r\n const {\r\n id,\r\n name,\r\n logo,\r\n category,\r\n distance,\r\n valueFrom,\r\n fullAddress,\r\n deliveryEstimate,\r\n status,\r\n pickup,\r\n delivery,\r\n coupon = {},\r\n highlight,\r\n address,\r\n cashback,\r\n\t\t\t\tminForFreeShipping\r\n } = mappedItem\r\n\r\n const kmDistance = String(distance).replace('.', ',')\r\n\r\n const Content = {\r\n component: StoreAlternative,\r\n props: {\r\n data: {\r\n logo,\r\n name,\r\n category,\r\n id,\r\n distance: kmDistance,\r\n valueFrom,\r\n fullAddress,\r\n deliveryEstimate,\r\n status,\r\n coupon,\r\n pickup,\r\n delivery,\r\n modalityId,\r\n\t\t\t\t\t\tselectedStoreId,\r\n highlight,\r\n address,\r\n cashback,\r\n\t\t\t\t\t\tminForFreeShipping\r\n },\r\n\r\n handles: {\r\n handleStore\r\n }\r\n }\r\n }\r\n\r\n return (\r\n \r\n}\r\n\r\nListAlternative.propTypes = {\r\n data: PropTypes.arrayOf(PropTypes.shape({\r\n\t\timages: PropTypes.shape({\r\n\t\t\thighlight: PropTypes.string,\r\n\t\t\tlogo: PropTypes.string\r\n\t\t})\r\n\t})),\r\n\tstore: PropTypes.shape({}),\r\n\thandleStore: PropTypes.func,\r\n\tmodalityId: PropTypes.number,\r\n\tselectedStoreId: PropTypes.number\r\n}\r\n","\r\nimport React, { useEffect, useState } from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport {\r\n\tconnect,\r\n\tuseDispatch,\r\n\tuseStore\r\n} from 'react-redux'\r\n\r\nimport { List } from './List'\r\n\r\nimport {\r\n\tstore,\r\n\taddressActions\r\n} from '../../state'\r\n\r\nimport { useDeviceLayout } from '../hooks'\r\n\r\nimport {\r\n\tpipe,\r\n\tGetContent\r\n} from '../../domain/helpers'\r\n\r\nimport {\r\n\tsetCart,\r\n\tfetchStoreFees,\r\n\tsetModality,\r\n\tsetStoreId,\r\n\thandleGTM\r\n} from '../../redux/actions/main'\r\n\r\nimport { CustomTitle } from '../components/CustomTitle'\r\n\r\nimport {\r\n\tSkeleton\r\n} from '../'\r\n\r\nimport {\r\n\tContentWrapper,\r\n\tLoadingWrapper,\r\n\tWrapper,\r\n} from './styles'\r\nimport { ListAlternative } from './ListAlternative'\r\nimport { ALTERNATIVE_STYLE_MULTI_STORE, MULTI_STORE, MULTI_STORE_SELECT_FIRST_STORE } from '../../config'\r\nimport { useSnackbar } from 'react-simple-snackbar'\r\nimport { errorOptions } from '../../infra/utils/styleNotification'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nfunction StoresListPage(props) {\r\n\tconst store = useStore()\r\n\tconst dispatch = useDispatch()\r\n\tconst [storesLoading, setStoresLoading] = useState(false)\r\n\tconst address = (store.getState().address && store.getState().address.address) || {}\r\n\r\n\tconst setAddress = (args) => dispatch(addressActions.setAddress(args))\r\n\r\n\tconst {\r\n\t\tmodalityId,\r\n\t\tselectedStoreId,\r\n\t\tstore: currentStore,\r\n\t\tstores,\r\n\r\n\t\tclose,\r\n\r\n\t\tfetchStores,\r\n\t\tfetchStore,\r\n\t\tfetchStoreFees,\r\n\t\tsetSelectedStoreId,\r\n\t\tsetModality,\r\n\t\tsetCart,\r\n\t\tsetStore,\r\n\t\tsetStoreId,\r\n\t\tsetStoreModalities,\r\n\t\thandleGTM,\r\n\t\thandleViewAddress\r\n\t} = props\r\n\r\n\tconst storesData = stores.list || []\r\n\tconst isMobile = useDeviceLayout({\r\n\t\tisMobile: true\r\n\t})\r\n\tconst [openErrorSnackbar] = useSnackbar(errorOptions({ modal: true }))\r\n\r\n\tuseEffect(() => {\r\n\t\tif (MULTI_STORE === \"true\") {\r\n\t\t\tsetStoresLoading(true)\r\n\t\t\tfetchStores([() => {\r\n\t\t\t\topenErrorSnackbar('Endereço fora da área de serviço! Nenhum estabelecimento encontrado :(', 7000)\r\n\t\t\t\tsetStoresLoading(false)\r\n\t\t\t\tclose()\r\n\t\t\t\thandleViewAddress()\r\n\t\t\t}, () => {\r\n\t\t\t\tsetStoresLoading(false)\r\n\t\t\t}])\r\n\t\t}\r\n\t}, [\r\n\t\tfetchStores\r\n\t])\r\n\r\n\tuseEffect(() => {\r\n\t\tif (MULTI_STORE === \"true\" && MULTI_STORE_SELECT_FIRST_STORE === \"true\") {\r\n\t\t\tif (storesData && storesData.length > 0 && selectedStoreId === 0) {\r\n\t\t\t\tconst [firstStore] = storesData;\r\n\r\n\t\t\t\thandleStore({\r\n\t\t\t\t\tid: firstStore.id,\r\n\t\t\t\t\tcoupon: firstStore.coupon,\r\n\t\t\t\t\tmodality: firstStore.delivery ? 4 : 2,\r\n\t\t\t\t\tname: firstStore.name,\r\n\t\t\t\t\tmodalities: {\r\n\t\t\t\t\t\tdelivery: firstStore.delivery,\r\n\t\t\t\t\t\tpickup: firstStore.pickup,\r\n\t\t\t\t\t},\r\n\t\t\t\t});\r\n\t\t\t}\r\n\t\t}\r\n\t}, [storesData]);\r\n\r\n\tasync function handleStore(args) {\r\n\t\t//GTM 3.0 - Evento para seleção do estabelecimento\r\n\t\thandleGTM({\r\n\t\t\t'event': 'escolha_estabelecimento',\r\n\t\t\t'affiliation': args.name\r\n\t\t})\r\n\r\n\t\tsetStoreModalities(args.modalities)\r\n\t\tsetModality({ id: args.modality })\r\n\r\n\t\tsetSelectedStoreId(args.id)\r\n\t\tsetStoreId(args.id)\r\n\t\tsetAddress({\r\n\t\t\t...address,\r\n\t\t\tverified: true\r\n\t\t})\r\n\r\n\t\tif (isMobile) {\r\n\t\t\tpostStore(args)\r\n\t\t\tpostCart({\r\n\t\t\t\tproducts: null\r\n\t\t\t})\r\n\r\n\t\t\thandleFetchStore(args.modality)\r\n\t\t\tclose()\r\n\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tpostStore(args)\r\n\t\tpostCart({\r\n\t\t\tproducts: null\r\n\t\t})\r\n\r\n\t\thandleFetchStore(args.modality)\r\n\r\n\t\tclose()\r\n\t}\r\n\r\n\tasync function postStore(args) {\r\n\t\tawait setStore(args)\r\n\t}\r\n\r\n\tasync function postCart(args) {\r\n\t\tawait setCart(args)\r\n\t}\r\n\r\n\tasync function handleFetchStore(modality) {\r\n\t\tif (modality === 4) {\r\n\t\t\tawait fetchStoreFees([{\r\n\t\t\t\tname: 'store-fees',\r\n\t\t\t\ttype: 'success',\r\n\t\t\t\tcallback: () => {\r\n\t\t\t\t\tsetModality({ id: 4 })\r\n\t\t\t\t\tfetchStore()\r\n\t\t\t\t}\r\n\t\t\t}, {\r\n\t\t\t\tname: 'store-fees',\r\n\t\t\t\ttype: 'error',\r\n\t\t\t\tcallback: () => {\r\n\t\t\t\t\tsetStoreModalities({ delivery: false, pickup: true })\r\n\t\t\t\t\tsetModality({ id: 2 })\r\n\t\t\t\t\tfetchStore()\r\n\t\t\t\t}\r\n\t\t\t}])\r\n\t\t}\r\n\t}\r\n\r\n\treturn \r\n\t\t{storesLoading && \r\n\t\t\t }\r\n\r\n\t\t{!storesLoading && <>\r\n\t\t\t\r\n\t\t\t\t }\r\n\t \r\n}\r\n\r\nStoresListPage.propTypes = {\r\n\tloading: PropTypes.arrayOf(PropTypes.string),\r\n\tmodalityId: PropTypes.number,\r\n\tstore: PropTypes.shape({}),\r\n\tstores: PropTypes.shape({\r\n\t\tlist: PropTypes.arrayOf(PropTypes.shape({}))\r\n\t}),\r\n\r\n\tclose: PropTypes.func,\r\n\tfetchStore: PropTypes.func,\r\n\tfetchStores: PropTypes.func,\r\n\tfetchStoreFees: PropTypes.func,\r\n\tsetStore: PropTypes.func,\r\n\tsetCart: PropTypes.func,\r\n\tselectedStoreId: PropTypes.number,\r\n\tsetSelectedStoreId: PropTypes.func,\r\n\tsetModality: PropTypes.func,\r\n\tsetStoreId: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n\treturn {\r\n\t\tloading: state.loading.loading || [],\r\n\t\tmodalityId: state.main.modality && state.main.modality.id,\r\n\t\tstore: state.store.store || {},\r\n\t\tstores: state.store.stores || [],\r\n\t\tselectedStoreId: state.store.selectedStoreId || 0\r\n\t}\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tfetchStore: store.fetch,\r\n\tfetchStores: store.fetchStores,\r\n\tsetSelectedStoreId: store.setSelectedStoreId,\r\n\tfetchStoreFees,\r\n\tsetCart,\r\n\tsetModality,\r\n\tsetStore: store.setStore,\r\n\tsetStoreModalities: store.setStoreModalities,\r\n\tsetStoreId,\r\n\thandleGTM\r\n})\r\n\r\nexport const StoresList = React.memo(pipe(\r\n\tGetConnection,\r\n\tGetContent({ context: Context, id: 'stores-list' })\r\n)(StoresListPage))\r\n","import React, { useEffect } from 'react'\r\nimport { connect } from 'react-redux'\r\nimport PropTypes from 'prop-types'\r\n\r\nimport { pipe } from '../../../domain/helpers'\r\n\r\nimport {\r\n modality,\r\n store,\r\n loading,\r\n\taddressActions,\r\n\tuser,\r\n\tuserAddress,\r\n\tsignUp\r\n} from '../../../state'\r\n\r\nimport {\r\n setUserCard,\r\n setCart,\r\n setUserCards,\r\n setURLParameters\r\n} from '../../../redux/actions/main'\r\n\r\nimport { useCustomLayout } from '../../hooks'\r\n\r\nimport {\r\n Stepper\r\n} from '../../components'\r\n\r\nimport {\r\n Home,\r\n Splash\r\n} from '../'\r\n\r\nfunction WelcomeComponent(props) {\r\n const {\r\n setModality,\r\n setStoresPagination,\r\n setLoading,\r\n setStore,\r\n setStores,\r\n setAccessToken,\r\n setUserName,\r\n setUserAddress,\r\n setUserAddresses,\r\n setAddressByCEP,\r\n setAddress,\r\n setCEP,\r\n setUserCard,\r\n setCart,\r\n setUserCards,\r\n setSignUp,\r\n theme,\r\n location\r\n } = props\r\n\r\n const {\r\n primaryColor\r\n } = props.theme.main.general\r\n\r\n useCustomLayout({\r\n backgroundColor: primaryColor\r\n })\r\n\r\n useEffect(() => {\r\n setAccessToken(null)\r\n setUserName(null)\r\n setUserAddresses(null)\r\n setAddressByCEP(null)\r\n setAddress(null)\r\n setCEP(null)\r\n setUserCard(null)\r\n setCart({ products: null })\r\n setUserCards(null)\r\n setSignUp(null)\r\n setStore(null)\r\n setStores([])\r\n setModality({ id: 4 })\r\n setStoresPagination({\r\n offset: 0,\r\n total: 1\r\n })\r\n setLoading(null)\r\n }, [\r\n setModality,\r\n setStoresPagination,\r\n setLoading,\r\n setStore,\r\n setStores,\r\n setAccessToken,\r\n setUserName,\r\n setUserAddress,\r\n setUserAddresses,\r\n setAddressByCEP,\r\n setAddress,\r\n setCEP,\r\n setUserCard,\r\n setCart,\r\n setUserCards,\r\n setSignUp\r\n ])\r\n\r\n return <>\r\n \r\n\t\t\r\n\t\t\t{title} \r\n\t\t\t\r\n\t\t\t\r\n\t\t \r\n\r\n {loading.includes('welcome') &&\r\n \r\n \r\n {sectionTitle} \r\n \r\n {sectionText}\r\n \r\n \r\n \r\n \r\n {postalCodeInputLabel}\r\n evt.key === 'e' && evt.preventDefault()}\r\n onChange={handlePostalCodeChange}\r\n />\r\n \r\n \r\n \r\n {warning ? {postalCodeInputWarningText} : null}\r\n \r\n \r\n \r\n }\r\n \r\n}\r\n\r\nHomeComponent.propTypes = {\r\n loading: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string])),\r\n\taccessToken: PropTypes.string,\r\n\tcurrentStep: PropTypes.number,\r\n\tfetchAddressByCEP: PropTypes.func,\r\n\tgoNextStep: PropTypes.func,\r\n\tpostalCode: PropTypes.string,\r\n\tsetCEP: PropTypes.func,\r\n\tsetLoading: PropTypes.func,\r\n\ttheme: PropTypes.shape({\r\n\t\tbackgroundImage: PropTypes.string,\r\n\t\tlogoImage: PropTypes.string,\r\n\t}),\r\n\tsetUserHistory: PropTypes.func\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n postalCode: state.address.cep || '',\r\n\r\n accessToken: state.user.accessToken,\r\n loading: state.loading.loading || []\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n\tsetCEP: addressActions.setCEP,\r\n setGeolocation: addressActions.setGeolocation,\r\n setLoading: loading.setLoading,\r\n fetchAddressByGeolocation: addressActions.fetchAddressByGeolocation,\r\n fetchAddressByCEP: addressActions.fetchAddressByCEP,\r\n\tsetUserHistory\r\n})\r\n\r\nexport const Home = React.memo(pipe(\r\n GetConnection,\r\n GetContent({ context: Context, id: 'welcome' })\r\n)(HomeComponent))\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n margin-top: 0;\r\n box-sizing: border-box;\r\n margin: 0 auto;\r\n box-sizing: border-box;\r\n max-width: 100%;\r\n min-width: 100%;\r\n min-height: 100%;\r\n max-height: 100%;\r\n position: relative;\r\n`\r\n\r\nexport const Paragraph = styled.p`\r\n color: #fff;\r\n font-size: 1.125rem;\r\n line-height: 1.5rem;\r\n margin-bottom: 1.875rem;\r\n flex-direction: column;\r\n flex: 1;\r\n text-align: center;\r\n margin: 0;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-weight: bold;\r\n`\r\n\r\nexport const Span = styled.span``\r\n\r\nexport const Image = styled.img`\r\n max-width: .938rem;\r\n max-height: 1.25rem;\r\n flex: 1;\r\n margin-bottom: .625rem;\r\n`\r\n\r\nexport const LoadingImage = styled.img`\r\n width: 6.25rem;\r\n height: auto;\r\n`\r\n\r\nexport const LoadingWrapper = styled.div`\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex: 1;\r\n min-width: 100%;\r\n`\r\n\r\nexport const ContentWrapper = styled.div`\r\n background: ${props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000'};\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 1.25rem;\r\n position: relative;\r\n\r\n`\r\n","import React, {\r\n useEffect\r\n} from 'react'\r\nimport PropTypes from 'prop-types'\r\nimport { connect } from 'react-redux'\r\nimport { withTheme } from 'styled-components'\r\n\r\nimport {\r\n pipe,\r\n GetContent\r\n} from '../../../domain/helpers'\r\n\r\nimport {\r\n setUserHistory\r\n} from '../../../redux/actions/main'\r\n\r\nimport {\r\n store,\r\n loading\r\n} from '../../../state'\r\n\r\nimport {\r\n CustomLoading\r\n} from '../../components'\r\n\r\nimport AddressPinIcon from '../../assets/ipiranga/address-pin-icon.png'\r\n\r\nimport {\r\n Wrapper,\r\n ContentWrapper,\r\n Image,\r\n Paragraph,\r\n Span\r\n} from './styles'\r\nimport { ESTABELECIMENTO_ID, MULTI_STORE } from '../../../config'\r\n\r\nexport const Context = React.createContext({})\r\n\r\nfunction SplashPage(props) {\r\n const {\r\n loading,\r\n setStore,\r\n currentStep,\r\n stores,\r\n addressByCEP,\r\n\t\taddress\r\n } = props\r\n\r\n useEffect(() => {\r\n if (MULTI_STORE === 'false' && currentStep === 2) {\r\n setStore({ id: ESTABELECIMENTO_ID })\r\n }\r\n\r\n if (MULTI_STORE === 'true' && stores && stores.list && currentStep === 2) {\r\n stores.list && stores.list[0] && stores.list[0].id && setStore({\r\n id: stores.list[0].id\r\n })\r\n }\r\n\r\n return () => ({})\r\n }, [\r\n stores,\r\n setStore,\r\n currentStep,\r\n ])\r\n\r\n return \r\n {loading.includes('welcome') &&\r\n \r\n \r\n \r\n }\r\n \r\n}\r\n\r\nSplashPage.propTypes = {\r\n loading: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string])),\r\n storeId: PropTypes.number,\r\n\tsetStore: PropTypes.func,\r\n\tcurrentStep: PropTypes.number,\r\n\tstores: PropTypes.shape({\r\n\t\tlist: PropTypes.arrayOf(PropTypes.shape({\r\n\t\t\tid: PropTypes.number\r\n\t\t}))\r\n\t}),\r\n\taddressByCEP: PropTypes.shape({\r\n\t\tmain: PropTypes.shape({})\r\n\t}),\r\n\taddress: PropTypes.shape({\r\n\t\tmain: PropTypes.shape({})\r\n\t})\r\n}\r\n\r\nconst mapStateToProps = (state) => {\r\n return {\r\n\t\taddress: (state.address.address) || {},\r\n addressByCEP: (state.address.addressByCEP) || {},\r\n loading: state.loading.loading || [],\r\n\r\n stores: state.store.stores || [],\r\n storeId: (state.main.store && state.main.store.id) || 0,\r\n URLParameters: (state.main.URLParameters) || ''\r\n }\r\n}\r\n\r\nconst GetConnection = connect(mapStateToProps, {\r\n fetchStores: store.fetchStores,\r\n setStore: store.setStore,\r\n setLoading: loading.setLoading,\r\n\r\n setUserHistory\r\n})\r\n\r\nexport const Splash = React.memo(pipe(\r\n withTheme,\r\n GetConnection,\r\n GetContent({ context: Context, id: 'welcome' })\r\n)(SplashPage))\r\n","import PropTypes from 'prop-types'\r\nimport React from 'react'\r\nimport { Route, Switch } from 'react-router-dom'\r\n\r\nimport { SPLASH_HOME } from '../config'\r\n\r\nimport {\r\n Addresses,\r\n Cart,\r\n ContactUs,\r\n Coupons,\r\n MyCards,\r\n NewAddress,\r\n NewCard,\r\n NoStore,\r\n OrderConfirmation,\r\n PlacedOrders,\r\n Receipt,\r\n SignIn,\r\n SignUp,\r\n Store,\r\n StoreInfo,\r\n StoresList,\r\n Welcome,\r\n} from './'\r\nimport useUTMTracker from './hooks/useUTMTracker'\r\n\r\nfunction Main(props) {\r\n\tuseUTMTracker();\r\n\t\r\n return (\r\n \r\n SPLASH_HOME === 'true' ?\r\n \r\n )\r\n}\r\n\r\nexport default Main\r\n\r\nMain.propTypes = {\r\n storeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n theme: PropTypes.shape({}).isRequired\r\n}\r\n","import PropTypes from 'prop-types'\r\nimport React from 'react'\r\nimport { withTheme } from 'styled-components'\r\n\r\nimport Main from '../Router'\r\n\r\nfunction WhiteLabel(props) {\r\n const {\r\n theme\r\n } = props\r\n\r\n if (!theme) {\r\n return <>Theme file invalid!\r\n }\r\n\r\n return \r\n}\r\n\r\nexport default withTheme(WhiteLabel)\r\n\r\nWhiteLabel.propTypes = {\r\n storeId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n theme: PropTypes.shape({}).isRequired\r\n}\r\n","import React, {\r\n\tuseEffect,\r\n\tuseState\r\n} from 'react'\r\nimport { ThemeProvider } from 'styled-components'\r\nimport { Provider } from 'react-redux'\r\nimport { Router } from 'react-router-dom'\r\nimport * as Sentry from '@sentry/react'\r\nimport PropTypes from 'prop-types'\r\nimport SnackbarProvider from 'react-simple-snackbar'\r\n\r\nimport {\r\n\tGOOGLE_CLIENT_ID,\r\n\tTHEME\r\n} from '../../config'\r\n\r\nimport GlobalStyle from './AppGlobalStyle'\r\nimport WhiteLabel from '../white-label'\r\nimport history from '../../history'\r\nimport \"animate.css\"\r\nimport { GoogleOAuthProvider } from '@react-oauth/google'\r\n\r\nfunction App({\r\n\tstore\r\n}) {\r\n\tconst [storeId, setStoreId] = useState('')\r\n\tconst [counterOnly, setCounterOnly] = useState('')\r\n\tconst [urlAddress, setUrlAddress] = useState(null)\r\n\r\n\tuseEffect(() => {\r\n\t\tconst pathnames = window.location.pathname.split('/')\r\n\t\tconst pathModality = window.location.href.split('?balcao=')\r\n\t\tconst localStorageStore = JSON.parse(window.localStorage.getItem('main'))\r\n\r\n\t\tif (!pathnames[1] && localStorageStore && localStorageStore.store && localStorageStore.store.id) {\r\n\t\t\tsetStoreId(localStorageStore.store.id)\r\n\t\t} else if (pathnames[1] && pathnames[1] === 'menu') {\r\n\t\t\twindow.location = '/'\r\n\t\t} else if (pathnames[1]) {\r\n\t\t\tsetStoreId(pathnames[1])\r\n\t\t}\r\n\r\n\t\tif (pathModality && pathModality[1] && pathModality[1] === '1') {\r\n\t\t\tsetCounterOnly(true)\r\n\t\t}\r\n\r\n\t\treturn () => { }\r\n\t}, [\r\n\t\tsetCounterOnly,\r\n\t\tsetStoreId\r\n\t]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst pathAddress = window.location.href.split('address?')\r\n\t\tconst URLParamsAddress = pathAddress && pathAddress[1]\r\n\r\n\t\tif (pathAddress && URLParamsAddress) {\r\n\t\t\tlet pairs = URLParamsAddress.split('&');\r\n\t\t\tlet result = {};\r\n\t\t\tpairs.forEach(function (p) {\r\n\t\t\t\tlet pair = p.split('=');\r\n\t\t\t\tlet key = pair[0];\r\n\t\t\t\tlet value = decodeURIComponent(pair[1] || '');\r\n\r\n\t\t\t\tif (result[key]) {\r\n\t\t\t\t\tif (Object.prototype.toString.call(result[key]) === '[object Array]') {\r\n\t\t\t\t\t\tresult[key].push(value);\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tresult[key] = [result[key], value];\r\n\t\t\t\t\t}\r\n\t\t\t\t} else {\r\n\t\t\t\t\tresult[key] = value;\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\tsetUrlAddress(JSON.parse(JSON.stringify(result)))\r\n\t\t}\r\n\t}, [])\r\n\r\n\treturn (\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t \r\n\t\t\t\t \r\n\t\t\t \r\n\t\t \r\n\r\n\t)\r\n}\r\n\r\nApp.propTypes = {\r\n\tstore: PropTypes.shape({})\r\n}\r\n\r\nexport default Sentry.withProfiler(App)\r\n","import React from 'react'\r\nimport ReactDOM from 'react-dom'\r\nimport * as Sentry from '@sentry/react'\r\nimport { Integrations } from '@sentry/tracing'\r\nimport LogRocket from 'logrocket'\r\nimport setupLogRocketReact from 'logrocket-react'\r\n\r\nimport { APP_VERSION, GOOGLE_ANALYTICS, LOGROCKET, LOGROCKET_PROJECT, SENTRY, SENTRY_DSN, SENTRY_PROJECT, SENTRY_RATE } from './config'\r\nimport * as container from './container'\r\nimport * as serviceWorker from './infra/service-worker'\r\nimport createStore from './state/createStore'\r\nimport App from './view/app'\r\n\r\nconst CURRENT_VERSION = APP_VERSION\r\n\r\nfunction cleanLocalStorage() {\r\n\tconst localStorageItem = window.localStorage.getItem('vqp') \r\n\tconst localStorageItemVQP = (localStorageItem && JSON.parse(localStorageItem)) || {version: null}\r\n\r\n\tif (localStorageItemVQP && localStorageItemVQP.version !== CURRENT_VERSION) {\r\n\t\twindow.localStorage.clear();\r\n\r\n\t\tconst initialLocalStorageVersion = { version: CURRENT_VERSION }\r\n\r\n\t\twindow.localStorage.setItem('vqp', JSON.stringify(initialLocalStorageVersion))\r\n\t}\r\n}\r\n\r\ncleanLocalStorage()\r\n\r\nconst store = createStore({\r\n container\r\n})\r\n\r\nif (SENTRY === 'true') {\r\n Sentry.init({\r\n dsn: SENTRY_DSN,\r\n release: `${ SENTRY_PROJECT }@` + process.env.npm_package_version,\r\n integrations: [new Integrations.BrowserTracing()],\r\n tracesSampleRate: SENTRY_RATE\r\n })\r\n}\r\n\r\nif (LOGROCKET === 'true') {\r\n LogRocket.init(`${ LOGROCKET_PROJECT }`)\r\n setupLogRocketReact(LogRocket)\r\n\r\n if (SENTRY === 'true') {\r\n LogRocket.getSessionURL(sessionURL => {\r\n Sentry.configureScope(scope => {\r\n scope.setExtra('sessionURL', sessionURL)\r\n })\r\n })\r\n }\r\n\r\n if (GOOGLE_ANALYTICS) {\r\n LogRocket.getSessionURL(function (sessionURL) {\r\n window.ga && window.ga('send', {\r\n hitType: 'event',\r\n eventCategory: 'LogRocket',\r\n eventAction: sessionURL\r\n })\r\n })\r\n }\r\n}\r\n\r\nReactDOM.render(
\r\n\t\t\t
\r\n\t\tForma de pagamento
\r\n\r\n\t\t\t\r\n\t\t\t\t{brand ? {number} : null}\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\r\n\t\t
\r\n\t\r\n\t\t\t\r\n\t\t\t{`Você irá ganhar ${points} selos nessa compra!`}
{`Acumule selos e troque por prêmios em nosso App.`} \r\n\t\t
\r\n\t\r\n}\r\n\r\nexport function LoyaltyPoints(props) {\r\n\tconst {\r\n\t\tmodalityId,\r\n\t\tpoints\r\n\t} = props\r\n\r\n\tconst textProps = {\r\n\t\tpoints,\r\n\t\tmodalityId\r\n\t}\r\n\tuseEffect(() => {\r\n\t\treturn () => { }\r\n\t}, [])\r\n\r\n\treturn {`Acumule selos e troque por prêmios em nosso App.`}
pronto para concluir
seu pedido?\r\n\t\t
Resumo do Pedido
: null}\r\n\r\n\t\t{data && data.length ?\r\n\t\t\t\t\t\t\t\t{selectedAdditionals && selectedAdditionals[0].items && selectedAdditionals[0].items.map((item) => {\r\n\t\t\t\t\t\t\t\t\treturn
}\r\n\t\t\t\t\t\t\t{modalityId === 2 && \r\n\t\t\t\t\t\t\t\t\t\t{item.name} \r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t{item.code == double ? \"Grátis\" : `R$ ${item.value && item.value.toFixed(2).replace('.', ',')}`}\r\n\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\tSua cesta está vazia!
\r\n\t\t\t\tAdicione seus itens favoritos aqui.
\r\n\t\t\tAssim você terá acesso aos produtos ofertas da sua região.
\r\n\t\t\t{context.title}
\r\n\r\n\t\t\t\t\t{code}
\r\n\r\n\t\t\t\t{context.title}
\r\n\r\n{newCouponSectionTitle}
\r\n\r\n\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t{!notificationError && notificationSucess &&\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\tCupom cadastrado com sucesso!\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\t{notificationError &&\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{notificationError.text}\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t}\r\n \t\t\t\t \t
\r\n {/* \r\n {notificationError ?
*/}\r\n \r\n {registeredCouponsSectionTitle}
: null}\r\n\r\n {coupons && coupons.length ?\r\n{mappedItem.name}\r\n { \r\n handleCategoriesProducts(mappedItem.name)\r\n setVisibleCategories(true)\r\n }}>Ver tudo
\r\n\r\n \r\n { image && { measure } \r\n\r\n {!promotionalValue && { value } }\r\n\r\n {promotionalValue && { `R$ ${ Number(promotionalValue).toFixed(2).replace('.', ',') }` } { value } }\r\n\r\n {status && status === 1 ? (!quantity ?\r\n :\r\n
\r\n \r\n
}\r\n\r\n { !image && \r\n
}\r\n\r\n { !image && storeLogo && \r\n
}\r\n\r\n { name }
\r\n\r\n\r\n \r\n\r\n { quantity }\r\n\r\n \r\n
) : \r\n \r\n }\r\n {mappedItem.name}
\r\n\r\n {products && products.map((mappedItem, index) => {\r\n const {\r\n id,\r\n name,\r\n description,\r\n image,\r\n value,\r\n additionals,\r\n promotionalValue\r\n } = mappedItem\r\n\r\n const key = `stores-products-category-group-${index}`\r\n const formattedPrice = `R$ ${Number(value).toFixed(2).replace('.', ',')}`\r\n const formattedPricePromotional = promotionalValue ? `R$ ${Number(promotionalValue).toFixed(2).replace('.', ',')}` : null\r\n const cartProductPrevious = cart && (cart.products && cart.products.length) ? (cart.products.filter(filteredItem => filteredItem.id === id))[0] : null\r\n const selectedAdditionals = (cartProductPrevious && cartProductPrevious.selectedAdditionals) || []\r\n\r\n return{mappedItem.name}\r\n\t\t\t\t\t {\r\n\t\t\t\t\t\thandleCategoriesProducts(mappedItem.name)\r\n\t\t\t\t\t\tsetVisibleCategories(true)\r\n\t\t\t\t\t}}>Ver tudo
\r\n\r\n\t\t\t\t\r\n\t\t\t\t\t{!promotionalValue && R$ {showFromValueText ? fromValue : value} }\r\n\t\t\t\t\t{promotionalValue && R$ {promotionalValue ? promotionalValue : value} }\r\n\t\t\t\t\t{promotionalValue && R${value} }\r\n\t\t\t\t
\r\n\t\t\t\t{status && status === 1 ? (!quantity ? {categoryName}
\r\n\r\n{categoryName}
\r\n\r\n {selectedProducts && selectedProducts.map((mappedItem, index) => {\r\n const {\r\n id,\r\n name,\r\n description,\r\n image,\r\n value,\r\n additionals,\r\n promotionalValue\r\n } = mappedItem\r\n\r\n const key = `stores-products-category-group-${index}`\r\n const formattedPrice = `R$ ${Number(value).toFixed(2).replace('.', ',')}`\r\n const formattedPricePromotional = promotionalValue ? `R$ ${Number(promotionalValue).toFixed(2).replace('.', ',')}` : null\r\n const cartProductPrevious = cart && (cart.products && cart.products.length) ? (cart.products.filter(filteredItem => filteredItem.id === id))[0] : null\r\n const cartProductPreviousQty = cartProductPrevious && cartProductPrevious.quantity\r\n const selectedAdditionals = (cartProductPrevious && cartProductPrevious.selectedAdditionals) || []\r\n\t\t\tconst requiredAdditionals = additionals && additionals.length && additionals.filter(item => item.minimum >= 1)\r\n\t\t\tconst hasRequiredAdditionals = requiredAdditionals && requiredAdditionals.length ? true : false\r\n \r\n\t\t\treturn\r\n \r\n \r\n {all}\r\n \r\n {options.map(option => (\r\n \r\n ))}\r\n \r\n
\r\n )\r\n}\r\n","import styled from 'styled-components'\r\n\r\nexport const Wrapper = styled.div`\r\n display: flex;\r\n flex: 1;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n min-width: 100%;\r\n max-width: 100%;\r\n background: #fff;\r\n font-size: .875rem;\r\n min-height: 100%;\r\n padding: 1.25rem;\r\n`\r\nexport const ListWrapper = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n justify-content: flex-start;\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n overflow-x: scroll;\r\n overflow: -moz-scrollbars-none;\r\n -ms-overflow-style: none;\r\n max-height: 3.75rem;\r\n min-height: 3.75rem;\r\n height: 2.5rem;\r\n min-width: 100%;\r\n max-width: 100%;\r\n transition: all .25s ease-in;\r\n\r\n &::-webkit-scrollbar {\r\n width: 0 !important\r\n }\r\n \r\n > a{\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n font-weight: bold;\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.textSecondaryColor) || '#999' };\r\n font-size: .875rem;\r\n padding-bottom: .625rem;\r\n min-height: 2.5rem;\r\n max-height: 2.5rem;\r\n line-height: 2.5rem;\r\n padding: 0;\r\n transition: all .25s;\r\n text-decoration: none;\r\n margin-right: 1.25rem;\r\n padding: 0 .125rem;\r\n\r\n &:hover, &:active, &.active {\r\n color: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' };\r\n border-bottom: ${ props => (props.theme && props.theme.main && props.theme.main.general && props.theme.main.general.primaryColor) || '#000' } .125rem solid;\r\n text-decoration: none;\r\n font-size: 1rem;\r\n }\r\n\r\n &:last-child {\r\n margin-right: 1.25rem;\r\n padding-right: 1.25rem;\r\n }\r\n }\r\n`\r\n\r\nexport const CategoriesSelectWrapper = styled.div`\r\n position: relative;\r\n display: none;\r\n\r\n @media (min-width: 60rem) {\r\n display: block;\r\n flex: 0 0 calc(40% - .5rem);\r\n margin: 0 1rem 0 0;\r\n }\r\n\r\n svg {\r\n width: 1rem;\r\n position: absolute;\r\n right: .938rem;\r\n padding: 0;\r\n top: 50%;\r\n transform: translate(0, -50%);\r\n\r\n path {\r\n stroke: #C3C3C3;\r\n };\r\n }\r\n`\r\n\r\nexport const CategoriesSelect = styled.select`\r\n border-color: #CDCDCD;\r\n cursor: pointer;\r\n height: 2.5rem;\r\n background-color: #F8F8F8;\r\n border-radius: 1rem;\r\n padding: 0 .938rem;\r\n color: #AEAEAE;\r\n font-weight: normal;\r\n font-size: .75rem;\r\n line-height: 1rem;\r\n color: #AEAEAE;\r\n appearance: none;\r\n width: 100%;\r\n`\r\n\r\nexport const CategoriesSelectOption = styled.option`\r\n\r\n`\r\n","var _g;\n\nvar _excluded = [\"svgRef\", \"title\"];\n\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar SvgStoreOff = function SvgStoreOff(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, _excluded);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: \"80.000000pt\",\n height: \"72.000000pt\",\n viewBox: \"0 0 80.000000 72.000000\",\n preserveAspectRatio: \"xMidYMid meet\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _g || (_g = /*#__PURE__*/React.createElement(\"g\", {\n transform: \"translate(0.000000,72.000000) scale(0.100000,-0.100000)\",\n fill: \"#000000\",\n stroke: \"none\"\n }, /*#__PURE__*/React.createElement(\"path\", {\n d: \"M402 377 c-188 -188 -342 -348 -342 -354 0 -27 24 -23 59 11 l37 36 301 0 c233 0 303 3 311 13 6 7 13 80 16 167 3 85 8 183 11 217 6 59 5 65 -31 123 l-37 60 22 24 c21 22 22 46 3 46 -4 0 -161 -154 -350 -343z m319 216 c7 -16 15 -31 17 -35 2 -5 -19 -8 -47 -8 -28 0 -51 3 -51 7 0 9 52 63 60 63 4 0 13 -12 21 -27z m-111 -123 c0 -66 -51 -101 -92 -63 -18 16 -17 18 24 60 53 54 68 55 68 3z m148 -7 c-2 -39 -8 -50 -29 -62 -24 -13 -29 -13 -53 2 -22 15 -26 25 -26 62 l0 45 56 0 55 0 -3 -47z m-206 -103 c19 0 44 7 56 16 21 15 25 15 41 0 10 -9 34 -16 54 -16 l37 0 0 -130 0 -130 -187 2 -188 3 -3 84 -3 85 58 58 c54 55 58 57 80 43 12 -8 37 -15 55 -15z m-226 -246 c-4 -10 -25 -14 -73 -14 l-67 0 69 70 70 71 3 -57 c2 -31 1 -63 -2 -70z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M447 333 c-4 -3 -7 -37 -7 -74 0 -83 7 -89 114 -89 94 0 116 16 116 86 0 79 -6 84 -119 84 -54 0 -101 -3 -104 -7z m183 -73 l0 -51 -77 3 -78 3 -3 33 c-6 58 0 62 83 62 l75 0 0 -50z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M52 615 c-54 -85 -54 -85 -47 -148 3 -34 9 -135 13 -224 4 -89 10 -165 15 -169 21 -21 29 21 28 150 l-2 136 37 0 c21 0 45 7 55 16 16 15 20 15 41 0 28 -20 88 -21 113 -2 10 7 26 11 36 9 25 -7 32 13 14 41 -9 14 -15 37 -13 53 3 26 6 28 57 31 31 2 57 -1 61 -8 4 -6 15 0 30 15 16 17 21 29 14 33 -6 4 -14 31 -18 60 l-7 52 41 0 c34 0 42 -4 50 -26 9 -22 13 -24 26 -13 8 6 13 18 10 26 -3 7 1 13 8 13 8 0 24 9 37 20 24 19 24 19 -261 20 l-285 0 -53 -85z m142 23 c-26 -82 -31 -88 -84 -88 -28 0 -50 2 -50 5 0 3 14 27 31 55 29 46 34 50 71 50 36 0 39 -2 32 -22z m123 -29 c-4 -29 -8 -54 -11 -56 -2 -2 -26 -3 -54 -1 l-50 3 20 53 c19 51 20 52 60 52 l41 0 -6 -51z m127 39 c3 -7 7 -32 9 -55 l5 -43 -54 0 -54 0 0 33 c0 65 9 77 51 77 23 0 41 -5 43 -12z m-296 -185 c-2 -39 -8 -50 -29 -62 -24 -13 -29 -13 -53 2 -22 15 -26 25 -26 62 l0 45 56 0 55 0 -3 -47z m160 11 c4 -36 -30 -84 -59 -84 -33 0 -59 36 -59 80 l0 41 58 -3 c56 -3 57 -4 60 -34z\"\n }), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M140 321 c-12 -23 -14 -151 -2 -151 21 0 32 29 32 82 l0 58 59 0 c40 0 63 5 71 15 11 13 2 15 -68 15 -70 0 -83 -3 -92 -19z\"\n }))));\n};\n\nvar ForwardRef = /*#__PURE__*/React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgStoreOff, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/store-off.15eeb9a4.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState } from 'react'\r\n\r\nimport { CustomSelect } from '../../components/CustomSelect'\r\n\r\nimport {\r\n\tCategoriesSelectWrapper\r\n} from './styles'\r\n\r\nexport function CategoriesSelect(props) {\r\n\tconst {\r\n\t\tdata,\r\n\t\thandleSearchCategories\r\n\t} = props\r\n\tconst [selectedOption, setSelectOption] = useState('')\r\n\r\n\tconst handleCategories = (search) => {\r\n\t\thandleSearchCategories(search)\r\n\t}\r\n\r\n\treturn {pageTitle}
: null}\r\n\r\n {pageContent ?\r\n {actions.map((actionsMappedItem, index) => {\r\n const {\r\n label,\r\n handleClick\r\n } = actionsMappedItem\r\n\r\n const key = `overlay-status-store-item-${index}-${new Date().getTime()}`\r\n\r\n return \r\n })}\r\n
: null}\r\n {context && context.title}
\r\n\r\n{context && context.subtitle}
\r\n\r\n \r\n \r\n{!newCard ? context.title : newCardContentTitle}
\r\n\r\nCadastre e consulte seus cupons
\r\nAcompanhe ou veja seu histórico
\r\nAcesse sua carteira digital
\r\nProblemas ou dúvidas? Pode falar!
\r\nNão estamos operando na sua região ainda.
\r\n\t\t\t\t\t\t\t{ title }
: null }\r\n\r\n { message ?\r\n { actions.map((actionsMappedItem, index) => {\r\n const {\r\n label,\r\n handleClick\r\n } = actionsMappedItem\r\n\r\n const key = `overlay-warning-button-item-${ index }-${ new Date().getTime() }`\r\n \r\n return \r\n }) }\r\n
: null }\r\n Confira os detalhes do seu pedido!
\r\n\r\n\r\n setPaymentMethodSelectionOpened(true)}\r\n changeSelectedDeliveryDate={() => setDeliveryDateSelectionOpened(true)}\r\n\t\t\t\t\tabove={above}\r\n selectedDeliveryDate={selectedDeliveryDate}\r\n />\r\n\r\n\t\t\t setPaymentMethodSelectionOpened(false)}\r\n\t\t\t\taria-labelledby='payment-method-selection'\r\n\t\t\t\topen={paymentMethodSelectionOpened}\r\n\t\t\t\tTransitionComponent={Transition}\r\n\t\t\t\tmaxWidth={'xs'}\r\n\t\t\t\tPaperProps={{\r\n\t\t\t\t\tstyle: {\r\n\t\t\t\t\t\twidth: '25rem',\r\n\t\t\t\t\t\tborderRadius: '.75rem'\r\n\t\t\t\t\t}\r\n\t\t\t\t}}\r\n\t\t\t\tfullWidth={false}\r\n\t\t\t>\r\n\t\t\t\t setPaymentMethodSelectionOpened(false)}/>\r\n\t\t\t\r\n\r\n
\r\n\r\n \r\n \r\n\t\t\t{!error && success &&\r\n\t\t\t\t\r\n\t\t\t\t\tCupom cadastrado com sucesso!\r\n\t\t\t\t\t \r\n\t\t\t}\r\n\r\n\t\t\t{error &&\r\n\t\t\t\t\r\n\t\t\t\t\t{error}\r\n\t\t\t\t\t \r\n\t\t\t}\r\n\t\t
\r\n\r\n\t\tConfira os detalhes do seu pedido!
\r\n\r\n\r\n {Array.from({ length: total }, (v, k) => k).map((mappedItem, index) => {\r\n const key = `steps-item-${index}-${new Date().getTime()}`\r\n\r\n return \r\n })}\r\n
: null\r\n}\r\n\r\nexport function Order(data) {\r\n const {\r\n id,\r\n storeLogo,\r\n storeName,\r\n time,\r\n status,\r\n modalityId,\r\n stepsTotal,\r\n currentStep,\r\n handleOrder,\r\n schedule,\r\n scheduling\r\n } = data\r\n\r\n const modality = modalityId === 2 ? 'Retirada' : 'Delivery'\r\n\r\n const statusLabel = getStatusLabel(status)\r\n\r\n return \r\n
\r\n\r\n \r\n {scheduling ? `#${id}` : modality} | {scheduling ? 'Pedido Confirmado' : statusLabel} \r\n {scheduling ? <>\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n Pedidos em Andamento
\r\n\r\n\r\n
\r\n \r\n {content.text} \r\n\r\n \r\n
\r\n {content.title}
\r\n\r\n\r\n {earnedPoints ? <>\r\n 
\r\n\r\n \r\n Cashback de R${earnedPoints.toFixed(2).replace('.', ',')}\r\n \r\n : '...'}\r\n
\r\n )\r\n}\r\n\r\nexport function Details({\r\n userName,\r\n deliveryTime,\r\n deliveryAddress,\r\n date,\r\n cardBrand,\r\n cardNumber,\r\n cpf,\r\n hasCpf,\r\n scheduling,\r\n orderId,\r\n followLink,\r\n status,\r\n requestNumber,\r\n earnedPoints\r\n}) {\r\n\r\n const hasCashback = JSON.parse(HAS_CASHBACK);\r\n const hasLoyalty = JSON.parse(HAS_LOYALTY);\r\n\r\n\r\n return (\r\n seu pedido {(requestNumber && requestNumber >= 1) ? `#${requestNumber}` : '...'} foi confirmado!
\r\n {status === null && \r\n {userName},
\r\n\r\n { orderDate } \r\n }\r\n\r\n {status === 2 && requestNumber && <>\r\n \r\n {userName},
\r\n }\r\n
\r\n\r\n {status && <>\r\n \r\n {userName},
\r\n seu pedido foi confirmado!\r\n
\r\n\r\n \r\n {userName},
\r\n seu pedido está pronto!\r\n
\r\n }\r\n \r\n
\r\n\r\n Dia e horário agendado
\r\n\r\n\r\n { deliveryAddress } \r\n
\r\n\r\n Local de entrega
\r\n\r\n\r\n
\r\n\r\n {products.summary && Resumo do Pedido
\r\n\r\n- \r\n {\r\n products && products.list && products.list.map((item, index) => {\r\n const {\r\n Quantidade: qty,\r\n Produto: name,\r\n Valor: value,\r\n Descricao: description,\r\n TextoAcompanhamento: extra\r\n } = item\r\n\r\n const key = `checkout-listitem-${index}`\r\n\r\n return
seu pedido {(requestNumber && requestNumber >= 1) ? `#${requestNumber}` : '...'} foi confirmado!
Seu pedido está em andamento!
\r\nComprovante
\r\n\r\n {status === null && \r\n {userName},
\r\n\r\n {orderDate} \r\n }\r\n\r\n {status === 2 && requestNumber && <>\r\n \r\n {userName},
\r\n }\r\n
\r\n\r\n { status && <>\r\n \r\n {userName},
\r\n seu pedido foi confirmado!\r\n
\r\n\r\n \r\n {userName},
\r\n seu pedido está pronto!\r\n
\r\n }\r\n \r\n
\r\n\r\n Dia e horário agendado
\r\n\r\n\r\n { deliveryAddress } \r\n
\r\n\r\n Local de entrega
\r\n\r\n\r\n
\r\n\r\n { products.summary && Resumo do Pedido
\r\n\r\n- \r\n {\r\n products && products.list && products.list.map((item, index) => {\r\n const {\r\n Quantidade: qty,\r\n Produto: name,\r\n Valor: value,\r\n Descricao: description,\r\n TextoAcompanhamento: extra\r\n } = item\r\n\r\n const key = `checkout-listitem-${index}`\r\n\r\n return
Dica de Segurança
\r\nNão aceite cobranças
adicionais na entrega!
\r\n site com sucesso
Meus Pedidos
\r\n{maskPhone(phone)}
\r\n\r\n \r\n{context.title}
\r\n\r\n{inProgressOrdersSelectedSectionTitle}
\r\n{finishedOrdersSelectedSectionTitle}
\r\n\r\nAlguma observação?
\r\n }\r\n\r\n\r\n
\r\n \r\n \r\n {quantity}\r\n \r\n
\r\n {status && status === 1 ? \r\n \r\n
: \r\n \r\n
}\r\n {selectedProduct.name}
\r\n\r\n\t\t\t{ name }
\r\n\t\t\t\t\t{ minimum >= 1 ? Obrigatório : null }\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t{ name } \r\n\t\t\t\t\t\t\t\t{ description } \r\n\t\t\t\t\t\t\t\t{ value && value > 0 ? { `+ R$ ${ value.toFixed(2).replace('.', ',') }` } : null }\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{ !checkbox ? {\r\n\t\t\t\t\t\t\t\t\t\t\t\tsetUpdate(true)\r\n\t\t\t\t\t\t\t\t\t\t\t\thandleChange(additionalsItemsMappedItem, checked)\r\n\t\t\t\t\t\t\t\t\t\t\t} }\r\n\t\t\t\t\t\t\t\t\t\t/> }\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\tAlguma observação?
\r\n\t\t\t\r\n\t\t\t
\r\n\t\r\n\t\t\t\t\r\n\t\t\t\t{quantity}\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t\t{status && status === 1 ? \r\n\t\t\t\t\r\n\t\t\t
: \r\n\t\t\t\t\r\n\t\t\t
}\r\n\t\t{selectedProduct.name}
\r\n\r\n\t\t\t\t\t\t{name}
\r\n\r\n\t\t\t\t\t{minimum >= 1 ? Obrigatório : null}\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t{name} \r\n\t\t\t\t\t\t\t\t{description} \r\n\t\t\t\t\t\t\t\t{value && value > 0 && !double ? {`+ R$ ${value.toFixed(2).replace('.', ',')}`} : null}\r\n\t\t\t\t\t\t\t\t{!!double ? Grátis! : null}\r\n\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{!checkbox ? : {\r\n\t\t\t\t\t\t\t\t\t\tsetUpdate(true)\r\n\t\t\t\t\t\t\t\t\t\thandleChange(additionalsItemsMappedItem, checked, checkbox, selectedGroupItemsQuantity)\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t/>}\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n \r\n \r\n {countries.map((mappedItem, index) => {\r\n const key = `phone-key-${index}`;\r\n const { abbr } = mappedItem;\r\n const codes = abbr.split('/');\r\n\r\n return (\r\n \r\n {`${codes[0]} +${mappedItem.ddi}`}\r\n \r\n );\r\n })}\r\n \r\n \r\n\r\n
\r\n\r\n \r\n {\r\n const { keyCode } = event;\r\n\r\n if (\r\n !(\r\n (keyCode >= 48 && keyCode <= 57) ||\r\n (keyCode >= 96 && keyCode <= 105) ||\r\n keyCode === 8 ||\r\n keyCode === 9 ||\r\n keyCode === 46 ||\r\n keyCode === 37 ||\r\n keyCode === 39\r\n )\r\n ) {\r\n event.preventDefault();\r\n }\r\n }}\r\n onChange={handleInput}\r\n />\r\n
\r\n\r\n \r\n\t\t\t\t
\r\n\t\t{name}
\r\n{storeName ? storeName : TITLE}
\r\n\r\n \r\n \r\n \r\n {modalityId === 4 ? \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {!scheduling ? \r\n \r\n \r\n\t\t\t\t\t\t\t{APP_SHOW_BUTTON === 'true' && (\r\n \r\n setAppDownload(true)}>\r\n \r\n Baixe nosso app:\r\n \r\n \r\n \r\n )}\r\n
\r\n {modalityId === 2 ? 'taxa de retirada' : 'taxa de entrega'}
\r\n\r\n{storeFees ? (modalityId === 2 ? (\r\n (pickupFee && `R$ ${pickupFee.toFixed(2).replace('.', ',')}`) || 'Grátis'\r\n ) : (\r\n (deliveryFee && `R$ ${deliveryFee.toFixed(2).replace('.', ',')}`) || 'Grátis'\r\n )) : '…'}
\r\nvalor mínimo
\r\n{minimumValue ? `R$ ${minimumValue.toFixed(2).replace('.', ',')}` : '...'}
\r\n{scheduling ? 'entrega agendada' : 'tempo de preparo'}
\r\n {!scheduling ?{deliveryTime ? deliveryTime : '...'}
: ''}\r\nAvailable on the
\r\n\t\t\t\t\t\t\t\t\tApp Store\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tAvailable on the
\r\n\t\t\t\t\t\t\t\t\tGoogle Play\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tDesenvolvido por
\r\n\t\t\tTermo de uso
\r\n\t\t\t\t openTerms()}>Termos e políticas VocêQpad\r\n\t\t\t
Escaneie o QR code e baixe nosso app agora!
\r\n\r\n\t\t\t
}\r\n\r\n\t\t{\r\n\t\t\t(hasCashback && !!cashback) && (\r\n\t\t\t\t\r\n\t\t\t{name} \r\n\r\n\t\t\t\r\n\t\t\t\t{`${distance} km`} ∙ {`${category}`}\r\n\t\t\t \r\n\r\n\t\t\t\r\n\t\t\t\t }\r\n\r\n\t\t\t{coupon && typeValueModalityDelivery && \r\n\t\t\t\t }\r\n\t\t
\r\n\t\r\n\t\t\t\t\r\n\t\t\t\t\t{delivery && \r\n\t\t\t\t\t\t \r\n\t\t\t
\r\n\r\n\t\t\t{coupon && couponValue && !typeValueModalityDelivery && {name}
\r\n\r\n\t\t\t
\r\n\t\t