diff --git a/package.json b/package.json index abd87c8..d87f31d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@material-ui/core": "4.12.2", "@material-ui/icons": "4.9.1", "@material-ui/lab": "4.0.0-alpha.56", + "@ramonak/react-progress-bar": "^3.2.1", "@sentry/react": "6.2.5", "@sentry/tracing": "6.2.5", "apexcharts": "3.27.2", diff --git a/src/pages/Client/hooks.js b/src/pages/Client/hooks.js index 7407392..8aa8dd1 100644 --- a/src/pages/Client/hooks.js +++ b/src/pages/Client/hooks.js @@ -37,6 +37,10 @@ export const LoginHooks = () => { history.push("/forgotpassword"); } + async function ClickRegister() { + history.push("/register"); + } + async function tryLogin(event) { event.preventDefault(); recaptchaRef.current.execute(); @@ -112,5 +116,6 @@ export const LoginHooks = () => { showLogin, setShowLogin, getMessageHour, + ClickRegister, ]; }; diff --git a/src/pages/Client/index.js b/src/pages/Client/index.js index f9bdff0..28e58f0 100644 --- a/src/pages/Client/index.js +++ b/src/pages/Client/index.js @@ -15,6 +15,8 @@ import { InputName, ContainerInput, Label, + PartnerRegisterText, + PartnerRegisterButton, } from "./styles"; import { LoginHooks } from "./hooks"; @@ -33,6 +35,7 @@ export default function Login() { showLogin, setShowLogin, getMessageHour, + ClickRegister, ] = LoginHooks(); return ( @@ -47,40 +50,50 @@ export default function Login() { items={access} /> ) : ( -
- - + <> + + + + + + setEmail(event.target.value)} + placeholder="exemplo@email.com" + /> + + - + setEmail(event.target.value)} - placeholder="exemplo@email.com" + type="password" + value={password} + onChange={(event) => setPassword(event.target.value)} + placeholder="Insira sua senha aqui" /> - - - - setPassword(event.target.value)} - placeholder="Insira sua senha aqui" + - - - -

Esqueceu a senha?

- + +

Esqueceu a senha?

+ - - + + + + Ainda não é parceiro do Foodzilla ?{" "} + + {" "} + Vire agora + + + + )} diff --git a/src/pages/Client/styles.js b/src/pages/Client/styles.js index ac4135d..62ddb38 100644 --- a/src/pages/Client/styles.js +++ b/src/pages/Client/styles.js @@ -168,3 +168,20 @@ export const ForgotPassword = styled.div` `; export const DivAlign = styled.div``; + +export const PartnerRegisterText = styled.text` + margin-top: 2%; + font-size: 15px; + display: flex; + flex-direction: row; +`; + +export const PartnerRegisterButton = styled.div` + font-size: 15px; + border: none; + color: #ffe115; + background: transparent; + padding: 0px; + margin-left: 2px; + cursor: pointer; +`; diff --git a/src/pages/Register/BasicInfo/index.js b/src/pages/Register/BasicInfo/index.js new file mode 100644 index 0000000..ce92193 --- /dev/null +++ b/src/pages/Register/BasicInfo/index.js @@ -0,0 +1,47 @@ +import React from "react"; +import Template from "../Template"; +import { Checkbox } from "@material-ui/core"; + +import { + InputName, + LabelName, + LabelNumber, + InputNumber, + LabelEmail, + InputEmail, + LabelPassword, + InputPassword, + Container, + LabelCheckbox, + DivCheckbox, + DivAlign, +} from "./styles"; + +export default function BasicInfo() { + return ( + + ); +} diff --git a/src/pages/Register/BasicInfo/styles.js b/src/pages/Register/BasicInfo/styles.js new file mode 100644 index 0000000..4704c4a --- /dev/null +++ b/src/pages/Register/BasicInfo/styles.js @@ -0,0 +1,108 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const LabelName = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: ${Themes().wordColors}; + align-self: baseline; +`; + +export const InputName = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: name; +`; + +export const LabelNumber = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: ${Themes().wordColors}; + margin-top: 2%; + align-self: baseline; +`; + +export const InputNumber = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: number; +`; + +export const LabelEmail = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: ${Themes().wordColors}; + margin-top: 2%; + align-self: baseline; +`; + +export const InputEmail = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: email; +`; + +export const LabelPassword = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: ${Themes().wordColors}; + margin-top: 2%; + align-self: baseline; +`; + +export const InputPassword = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: password; +`; + +export const LabelCheckbox = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 300; + font-size: 15px; + color: ${Themes().wordColors}; +`; + +export const DivCheckbox = styled.div` + justify-content: center; + display: flex; + align-items: center; + align-self: baseline; +`; + +export const DivAlign = styled.div` + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + width: 40%; + + @media (max-width: 800px) { + width: 90%; + } +`; diff --git a/src/pages/Register/LocalizationInfo/index.js b/src/pages/Register/LocalizationInfo/index.js new file mode 100644 index 0000000..2cda5b8 --- /dev/null +++ b/src/pages/Register/LocalizationInfo/index.js @@ -0,0 +1,31 @@ +import React from "react"; +import Template from "../Template"; +import { + Container, + DivAlign, + LabelAddress, + InputAddress, + LabelNumber, + InputNumber, + LabelComplement, + InputComplement, +} from "./styles"; + +export default function LocalizationInfo() { + return ( + + ); +} diff --git a/src/pages/Register/LocalizationInfo/styles.js b/src/pages/Register/LocalizationInfo/styles.js new file mode 100644 index 0000000..4d74225 --- /dev/null +++ b/src/pages/Register/LocalizationInfo/styles.js @@ -0,0 +1,75 @@ +import styled from "styled-components"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const DivAlign = styled.div` + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + width: 40%; + + @media (max-width: 800px) { + width: 90%; + } +`; + +export const LabelAddress = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + align-self: baseline; + margin-top: 1%; +`; + +export const InputAddress = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: name; +`; + +export const LabelNumber = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + margin-top: 2%; + align-self: baseline; +`; + +export const InputNumber = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: number; +`; + +export const LabelComplement = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + margin-top: 2%; + align-self: baseline; +`; + +export const InputComplement = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; +`; diff --git a/src/pages/Register/LogoAndThumb/hooks.js b/src/pages/Register/LogoAndThumb/hooks.js new file mode 100644 index 0000000..87b293b --- /dev/null +++ b/src/pages/Register/LogoAndThumb/hooks.js @@ -0,0 +1,104 @@ +import { useEffect, useState } from "react"; +import api from "../../../services/api"; +import filesize from "filesize"; +import { toast } from "../../../Components/Toast"; + +export const useLogoAndThumb = () => { + const [restaurant, setRestaurant] = useState(""); + const [thumbNail, setThumbNail] = useState(null); + const [logo, setLogo] = useState(null); + + const [showPopupThumb, setShowPopupThumbnail] = useState(false); + const [showPopupLogo, setShowPopupLogo] = useState(false); + + const [dimension, setDimension] = useState(null); + + useEffect(() => { + async function GetDetails() { + const { data } = await api.get("/partner/profile"); + + setRestaurant(data); + } + GetDetails(); + }, []); + + const handleUploadThumbail = (event) => { + const file = event.target.files[0]; + + if (!file) return; + + const uploadedFiles = { + file, + name: file.name, + readableSize: filesize(file.size), + preview: URL.createObjectURL(file), + progress: 0, + uploaded: false, + error: false, + url: null, + }; + + setThumbNail(uploadedFiles); + setShowPopupThumbnail(true); + }; + + const handleUploadLogo = (event) => { + const file = event.target.files[0]; + + if (!file) return; + + const uploadedFiles = { + file, + name: file.name, + readableSize: filesize(file.size), + preview: URL.createObjectURL(file), + progress: 0, + uploaded: false, + error: false, + url: null, + }; + + setLogo(uploadedFiles); + setShowPopupLogo(true); + }; + + async function onImgLoad({ target: img }) { + setDimension({ height: img.offsetHeight, width: img.offsetWidth }); + } + + async function changeThumbnail() { + try { + toast.info("Salvando suas informações, aguarde"); + + const data = new FormData(); + + if (thumbNail) data.append("thumb", thumbNail.file); + + await api.put(`/change/thumb`, data); + + toast.success("Imagem salva!"); + setShowPopupThumbnail(false); + } catch { + toast.error("Falha ao alterar imagem"); + } + } + + async function changeLogo() { + try { + toast.info("Salvando suas informações, aguarde"); + + const data = new FormData(); + + if (logo) data.append("logo", logo.file); + + await api.put(`/change/logo`, data); + + toast.success("Imagem salva!"); + setShowPopupLogo(false); + } catch { + toast.error("Falha ao alterar imagem"); + } + } + + return [handleUploadThumbail, handleUploadLogo]; +}; diff --git a/src/pages/Register/LogoAndThumb/index.js b/src/pages/Register/LogoAndThumb/index.js new file mode 100644 index 0000000..9a0bbaa --- /dev/null +++ b/src/pages/Register/LogoAndThumb/index.js @@ -0,0 +1,36 @@ +import React from "react"; +import Template from "../Template"; +import { useLogoAndThumb } from "./hooks"; +import { Container, DivAlign, ThumbNail, Logo2 } from "./styles"; + +function LogoAndThumb() { + const [handleUploadThumbail, handleUploadLogo] = useLogoAndThumb(); + + return ( + + ); +} + +export default LogoAndThumb; diff --git a/src/pages/Register/LogoAndThumb/styles.js b/src/pages/Register/LogoAndThumb/styles.js new file mode 100644 index 0000000..2cd794d --- /dev/null +++ b/src/pages/Register/LogoAndThumb/styles.js @@ -0,0 +1,61 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const DivAlign = styled.div` + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + + @media (max-width: 800px) { + width: 90%; + } +`; + +export const ThumbNail = styled.div` + border: 2px #ddd solid; + border-style: dashed; + + width: 100%; + height: 250px; + + background-size: cover; + background-repeat: no-repeat; + + background-image: url(${(props) => props.src}); + + display: flex; + align-items: center; + justify-content: center; + color: #ffe115; + + transition: all 0.5s; +`; + +export const Logo2 = styled.div` + border: 2px #ddd solid; + border-style: dashed; + + width: 100px; + height: 100px; + border-radius: 100px; + + background-size: cover; + background-repeat: no-repeat; + + background-image: url(${(props) => props.src}); + + display: flex; + align-items: center; + justify-content: center; + color: #ffe115; +`; diff --git a/src/pages/Register/MenuUpload/hooks.js b/src/pages/Register/MenuUpload/hooks.js new file mode 100644 index 0000000..09760fd --- /dev/null +++ b/src/pages/Register/MenuUpload/hooks.js @@ -0,0 +1,87 @@ +import { useEffect, useState } from "react"; +import api from "../../../services/api"; +import filesize from "filesize"; +import { toast } from "../../../Components/Toast"; + +export const useMenuUpload = () => { + const [restaurant, setRestaurant] = useState(""); + const [thumbNail, setThumbNail] = useState(null); + const [logo, setLogo] = useState(null); + + const [showPopupThumb, setShowPopupThumbnail] = useState(false); + const [showPopupLogo, setShowPopupLogo] = useState(false); + + const [dimension, setDimension] = useState(null); + + useEffect(() => { + async function GetDetails() { + const { data } = await api.get("/partner/profile"); + + setRestaurant(data); + } + GetDetails(); + }, []); + + const handleUploadThumbail = (event) => { + const file = event.target.files[0]; + + if (!file) return; + + const uploadedFiles = { + file, + name: file.name, + readableSize: filesize(file.size), + preview: URL.createObjectURL(file), + progress: 0, + uploaded: false, + error: false, + url: null, + }; + + setThumbNail(uploadedFiles); + setShowPopupThumbnail(true); + }; + + const handleUploadLogo = (event) => { + const file = event.target.files[0]; + + if (!file) return; + + const uploadedFiles = { + file, + name: file.name, + readableSize: filesize(file.size), + preview: URL.createObjectURL(file), + progress: 0, + uploaded: false, + error: false, + url: null, + }; + + setLogo(uploadedFiles); + setShowPopupLogo(true); + }; + + async function onImgLoad({ target: img }) { + setDimension({ height: img.offsetHeight, width: img.offsetWidth }); + } + + async function changeThumbnail() { + try { + toast.info("Salvando suas informações, aguarde"); + + const data = new FormData(); + + if (thumbNail) data.append("thumb", thumbNail.file); + + await api.put(`/change/thumb`, data); + + toast.success("Imagem salva!"); + setShowPopupThumbnail(false); + } catch { + toast.error("Falha ao alterar imagem"); + } + } + + return [handleUploadThumbail, handleUploadLogo]; +}; diff --git a/src/pages/Register/MenuUpload/index.js b/src/pages/Register/MenuUpload/index.js new file mode 100644 index 0000000..68e76cf --- /dev/null +++ b/src/pages/Register/MenuUpload/index.js @@ -0,0 +1,31 @@ +import React from "react"; +import Template from "../Template"; +import { useMenuUpload } from "./hooks"; +import { Container, DivAlign, ThumbNail, HeaderText } from "./styles"; + +function MenuUpload() { + const [handleUploadThumbail] = useMenuUpload(); + + return ( + + ); +} + +export default MenuUpload; diff --git a/src/pages/Register/MenuUpload/styles.js b/src/pages/Register/MenuUpload/styles.js new file mode 100644 index 0000000..4bb0eb9 --- /dev/null +++ b/src/pages/Register/MenuUpload/styles.js @@ -0,0 +1,48 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const DivAlign = styled.div` + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + + @media (max-width: 800px) { + width: 90%; + } +`; + +export const ThumbNail = styled.div` + border: 2px #ddd solid; + border-style: dashed; + + width: 100%; + height: 400px; + + background-size: cover; + background-repeat: no-repeat; + + background-image: url(${(props) => props.src}); + + display: flex; + align-items: center; + justify-content: center; + color: #ffe115; + + transition: all 0.5s; +`; + +export const HeaderText = styled.text` + font-weight: 300; + font-size: 18px; + margin-bottom: 2%; +`; diff --git a/src/pages/Register/PartnerInfo/index.js b/src/pages/Register/PartnerInfo/index.js new file mode 100644 index 0000000..675f0be --- /dev/null +++ b/src/pages/Register/PartnerInfo/index.js @@ -0,0 +1,52 @@ +import React from "react"; +import Template from "../Template"; +import { Checkbox } from "@material-ui/core"; +import { + Container, + InputCNPJ, + InputRestaurant, + LabelCNPJ, + LabelRestaurant, + LabelCheckbox, + DivCheckbox, + LabelNumber, + InputNumber, + LabelCPF, + InputCPF, + DivAlign, + LabelCheckboxSMS, +} from "./styles"; + +export default function PartnerInfo() { + return ( + + ); +} diff --git a/src/pages/Register/PartnerInfo/styles.js b/src/pages/Register/PartnerInfo/styles.js new file mode 100644 index 0000000..ab7f959 --- /dev/null +++ b/src/pages/Register/PartnerInfo/styles.js @@ -0,0 +1,114 @@ +import styled from "styled-components"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const InputCNPJ = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: number; +`; + +export const InputRestaurant = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: name; +`; + +export const LabelCNPJ = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + align-self: baseline; +`; + +export const LabelRestaurant = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + align-self: baseline; + margin-top: 1%; +`; + +export const LabelNumber = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + margin-top: 2%; + align-self: baseline; +`; + +export const InputNumber = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: number; +`; + +export const LabelCPF = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 15px; + color: #ddd; + margin-top: 2%; + align-self: baseline; +`; + +export const InputCPF = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 100%; + height: 50px; + padding: 10px; + type: number; +`; + +export const LabelCheckbox = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 300; + font-size: 15px; + color: #ddd; +`; + +export const LabelCheckboxSMS = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 300; + font-size: 15px; + color: #000; +`; + +export const DivCheckbox = styled.div` + justify-content: center; + display: flex; + align-items: center; + align-self: baseline; +`; + +export const DivAlign = styled.div` + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + width: 40%; + + @media (max-width: 800px) { + width: 90%; + } +`; diff --git a/src/pages/Register/PaymentMethod/hooks.js b/src/pages/Register/PaymentMethod/hooks.js new file mode 100644 index 0000000..8990fa4 --- /dev/null +++ b/src/pages/Register/PaymentMethod/hooks.js @@ -0,0 +1,58 @@ +import { useEffect, useState } from "react"; +import api from "../../../services/api"; + +export const usePaymentMethod = () => { + const [creditCards, setCreditCards] = useState([ + { flag: "Mastercard", active: false }, + { flag: "Redeshop", active: false }, + { flag: "BNDES", active: false }, + { flag: "Sorocred", active: false }, + { flag: "Elo", active: false }, + { flag: "American Express", active: false }, + { flag: "Dinnersclub", active: false }, + { flag: "Aura", active: false }, + { flag: "Hipercard", active: false }, + { flag: "VISA", active: false }, + ]); + const [debitCards, setDebitCards] = useState([ + { flag: "Mastercard/Maestro", active: false }, + { flag: "Redeshop", active: false }, + { flag: "Elo", active: false }, + { flag: "VISA Electron", active: false }, + ]); + const [online, setOnline] = useState(false); + + async function GetPayments() { + const { data } = await api.get("/partner/payments"); + + if (data) { + setCreditCards(data.creditCards); + setDebitCards(data.debitCards); + setOnline(data.online); + } + } + + useEffect(() => { + GetPayments(); + }, []); + + async function UpdateOrCreatePayment(index, credit, debit) { + const newArr1 = creditCards; + const newArr2 = debitCards; + + if (credit) { + newArr1[index].active = !newArr1[index].active; + } + if (debit) { + newArr2[index].active = !newArr2[index].active; + } + + await api.post("/partner/payments", { + creditCards: newArr1, + debitCards: newArr2, + online: !online, + }); + } + + return [creditCards, debitCards, online, UpdateOrCreatePayment, setOnline]; +}; diff --git a/src/pages/Register/PaymentMethod/index.js b/src/pages/Register/PaymentMethod/index.js new file mode 100644 index 0000000..d3525ad --- /dev/null +++ b/src/pages/Register/PaymentMethod/index.js @@ -0,0 +1,92 @@ +import React from "react"; +import Template from "../Template"; +import SettingsComponents from "../../../Components/SettingsComponents"; +import { usePaymentMethod } from "./hooks"; + +import { Container, Content, Title, Grid, Label, Row, Text } from "./styles"; + +function PaymentMethod() { + const [ + creditCards, + debitCards, + online, + UpdateOrCreatePayment, + setOnline, + ] = usePaymentMethod(); + + return ( + + ); +} + +export default PaymentMethod; diff --git a/src/pages/Register/PaymentMethod/styles.js b/src/pages/Register/PaymentMethod/styles.js new file mode 100644 index 0000000..15309b1 --- /dev/null +++ b/src/pages/Register/PaymentMethod/styles.js @@ -0,0 +1,59 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const DivAlign = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + align-items: stretch; + + @media (max-width: 800px) { + width: 90%; + } +`; + +export const Content = styled.div``; + +export const Title = styled.p` + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 15px; + line-height: 18px; + + color: ${Themes().wordColors}; +`; + +export const Grid = styled.div` + display: flex; + flex-direction: row; + flex-wrap: wrap; +`; + +export const Label = styled.p` + font-family: "Roboto", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 15px; + line-height: 18px; + + color: ${Themes().wordColors}; +`; + +export const Row = styled.div` + display: flex; + margin-top: 15px; + + width: 250px; +`; + +export const Text = styled.p``; diff --git a/src/pages/Register/ProductsType/index.js b/src/pages/Register/ProductsType/index.js new file mode 100644 index 0000000..086a7ca --- /dev/null +++ b/src/pages/Register/ProductsType/index.js @@ -0,0 +1,66 @@ +import React from "react"; +import Template from "../Template"; +import { Checkbox } from "@material-ui/core"; + +import { + Container, + DivAlign, + LabelCheckbox, + DivCheckbox, + TextTop, + InputProduct, + ProductAddButton, + ProductAddText, +} from "./styles"; + +export default function ProductsType() { + return ( + + ); +} diff --git a/src/pages/Register/ProductsType/styles.js b/src/pages/Register/ProductsType/styles.js new file mode 100644 index 0000000..27602ae --- /dev/null +++ b/src/pages/Register/ProductsType/styles.js @@ -0,0 +1,68 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const DivAlign = styled.div` + align-items: center; + display: flex; + justify-content: center; + flex-direction: column; + + @media (max-width: 800px) { + width: 90%; + } +`; + +export const LabelCheckbox = styled.label` + font-family: "Roboto", sans-serif; + font-weight: 300; + font-size: 15px; + color: ${Themes().wordColors}; +`; + +export const DivCheckbox = styled.div` + justify-content: center; + display: flex; + align-items: center; + align-self: baseline; +`; + +export const TextTop = styled.text` + align-self: baseline; + font-weight: 300; + font-size: 15px; + color: ${Themes().wordColors}; + margin-bottom: 2%; +`; + +export const InputProduct = styled.input` + align-self: baseline; + border-bottom: 1px solid #ddd; +`; + +export const ProductAddButton = styled.button` + align-self: baseline; + border-radius: 5px; + height: 60px; + background: transparent; + border-width: 0px; + + @media (max-height: 800px) { + width: 90%; + } +`; + +export const ProductAddText = styled.text` + font-family: "Roboto", sans-serif; + font-size: 16px; + color: #ffe115; + font-weight: 500; +`; diff --git a/src/pages/Register/RegisterFinal/index.js b/src/pages/Register/RegisterFinal/index.js new file mode 100644 index 0000000..bb9816f --- /dev/null +++ b/src/pages/Register/RegisterFinal/index.js @@ -0,0 +1,36 @@ +import React from "react"; +import { Themes } from "../../../utils/themes"; + +import { + ContainerImage, + Image, + DivText, + Logo, + Text, + Button, + ButtonText, +} from "./styles"; + +export default function RegisterFinal() { + return ( + + + + + Parece que chegamos ao fim + Parabéns, você completou o cadastro no FoodZilla Partners! + + Logo logo entraremos em contato com você, então é só aguardar + + + Enquanto isso, que tal ir aprendendo a usar nosso aplicatio no nosso + canal do YouTube ? + + + + + + ); +} diff --git a/src/pages/Register/RegisterFinal/styles.js b/src/pages/Register/RegisterFinal/styles.js new file mode 100644 index 0000000..62d743e --- /dev/null +++ b/src/pages/Register/RegisterFinal/styles.js @@ -0,0 +1,75 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const ContainerImage = styled.div` + display: flex; + background: ${Themes().background}; + + @media (max-width: 800px) { + padding: 20px 0; + } + + overflow-y: scroll; + height: 100%; +`; + +export const Image = styled.img` + @media screen and (max-width: 800px) { + display: none; + } + + height: 100%; + width: 50%; + object-fit: contain; +`; + +export const DivText = styled.div` + @media screen and (max-width: 800px) { + width: 100%; + padding-right: 0px; + + padding: 15px; + } + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + width: 50%; +`; + +export const Logo = styled.img` + width: 40%; + margin-bottom: 4%; + + @media (max-height: 800px) { + width: 60%; + } +`; + +export const Text = styled.text` + font-weight: 300; + font-size: 18px; + margin-bottom: 4%; +`; + +export const Button = styled.button` + background: #ffe115; + border-radius: 5px; + height: 60px; + width: 60%; + margin-top: 10%; + border-width: 0px; + + @media (max-height: 800px) { + width: 90%; + } +`; + +export const ButtonText = styled.text` + color: #fff; + font-family: "Roboto", sans-serif; + font-weight: bold; + font-size: 25px; +`; diff --git a/src/pages/Register/Template/hooks.js b/src/pages/Register/Template/hooks.js new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/Register/Template/index.js b/src/pages/Register/Template/index.js new file mode 100644 index 0000000..becd811 --- /dev/null +++ b/src/pages/Register/Template/index.js @@ -0,0 +1,48 @@ +import React from "react"; + +import { ArrowLeft } from "react-feather"; +import ProgressBar from "@ramonak/react-progress-bar"; +import { Themes } from "../../../utils/themes"; +import { + Container, + Logo, + ContainerLogo, + ContainerImg, + Button, + ButtonText, + ContainerButton, +} from "./styles"; + +function Template({ title = "Insira seu texto aqui", children, progress = 0 }) { + return ( + + + + + +

{title}

+ + + + + + {children} + + + + + + ); +} + +export default Template; diff --git a/src/pages/Register/Template/styles.js b/src/pages/Register/Template/styles.js new file mode 100644 index 0000000..9a2a9d3 --- /dev/null +++ b/src/pages/Register/Template/styles.js @@ -0,0 +1,79 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const ContainerLogo = styled.div` + width: 100vw; + display: flex; + justify-content: center; + > svg { + position: absolute; + left: 15px; + top: 15px; + } +`; + +export const ContainerImg = styled.div` + display: flex; + height: 100px; + position: absolute; + width: 100vw; + margin-top: 10px; + flex-direction: column; + align-items: center; + + > p { + line-height: 50px; + font-style: normal; + font-weight: 300; + font-size: 18px; + display: flex; + align-items: center; + + color: ${Themes().wordColors}; + } +`; + +export const Container = styled.div` + height: 100%; + width: 100%; + background: ${Themes().background}; + display: flex; + flex-direction: column; +`; + +export const Logo = styled.img` + width: 250px; + @media (max-height: 800px) { + width: 200px; + } +`; + +export const ContainerButton = styled.div` + width: 100vw; + position: absolute; + bottom: 20px; + height: 100px; + align-items: center; + display: flex; + justify-content: center; +`; + +export const Button = styled.button` + background: #ffe115; + border-radius: 5px; + height: 60px; + width: 20%; + + border-width: 0px; + + @media (max-height: 800px) { + width: 90%; + } +`; + +export const ButtonText = styled.text` + color: #fff; + font-family: "Roboto", sans-serif; + font-weight: bold; + font-size: 25px; +`; diff --git a/src/pages/Register/TimeAndFee/index.js b/src/pages/Register/TimeAndFee/index.js new file mode 100644 index 0000000..fefc60e --- /dev/null +++ b/src/pages/Register/TimeAndFee/index.js @@ -0,0 +1,60 @@ +import React from "react"; +import Template from "../Template"; + +import { + Container, + DivAlign, + TopText, + ColumnDiv, + TextLabel, + Input, + Div, +} from "./styles"; + +export default function TimeAndFee() { + return ( + + ); +} diff --git a/src/pages/Register/TimeAndFee/styles.js b/src/pages/Register/TimeAndFee/styles.js new file mode 100644 index 0000000..bf565b7 --- /dev/null +++ b/src/pages/Register/TimeAndFee/styles.js @@ -0,0 +1,49 @@ +import styled from "styled-components"; +import { Themes } from "../../../utils/themes"; + +export const Container = styled.div` + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +`; + +export const DivAlign = styled.div` + display: flex; + justify-content: center; + flex-direction: column; + align-items: stretch; + + @media (max-width: 800px) { + width: 90%; + } +`; + +export const TopText = styled.label` + font-weight: 400; + font-size: 18px; + align-self: baseline; +`; + +export const ColumnDiv = styled.div` + flex-direction: row; + justify-content: space-between; + display: flex; + align-items: center; + margin-top: 1%; +`; + +export const TextLabel = styled.label` + font-weight: 300; + font-size: 15px; +`; + +export const Input = styled.input` + border: 1px solid #ddd; + border-radius: 5px; + width: 50%; +`; + +export const Div = styled.div``; diff --git a/src/routes.js b/src/routes.js index 2294247..a7972ca 100644 --- a/src/routes.js +++ b/src/routes.js @@ -11,7 +11,7 @@ import Partners from "./pages/Settings/Partners"; import Message from "./pages/Messages"; import Tasks from "./pages/Tasks"; import Finance from "./pages/Finance"; - +import Register from "./pages/Register/RegisterFinal"; import Page404 from "./pages/404"; import Password from "./pages/Password"; import AuthContext from "./contexts/acessLevel"; @@ -67,6 +67,8 @@ export default function Router() { + + diff --git a/yarn.lock b/yarn.lock index b946990..983aa70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2062,6 +2062,11 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA= +"@ramonak/react-progress-bar@^3.2.1": + version "3.2.1" + resolved "https://registry.yarnpkg.com/@ramonak/react-progress-bar/-/react-progress-bar-3.2.1.tgz#dbb494f5b1c96af67489168dc5923e5982791bf2" + integrity sha512-maDK1QLnh8o0ziT6o6xPe76PBERkM1/pO+VHzomOpFW/dFPragmQm3Pd8+0AA/hl9YC3vJtgttK18TMOuDAxYA== + "@semantic-ui-react/event-stack@^3.1.2": version "3.1.2" resolved "https://registry.yarnpkg.com/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz#14fac9796695aa3967962d94ea9733a85325f9c4"