DEV-14/feat/partner_register

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",

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,
   ];
 };

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}
           />
         ) : (
-          <Form onSubmit={tryLogin}>
-            <Logo src={Themes().logo}></Logo>
-            <Input>
+          <>
+            <Form onSubmit={tryLogin}>
+              <Logo src={Themes().logo}></Logo>
+              <Input>
+                <ContainerInput>
+                  <Label>Email</Label>
+                  <InputName
+                    value={email}
+                    onChange={(event) => setEmail(event.target.value)}
+                    placeholder="exemplo@email.com"
+                  />
+                </ContainerInput>
+              </Input>
               <ContainerInput>
-                <Label>Email</Label>
+                <Label>Senha</Label>
                 <InputName
-                  value={email}
-                  onChange={(event) => setEmail(event.target.value)}
-                  placeholder="exemplo@email.com"
+                  type="password"
+                  value={password}
+                  onChange={(event) => setPassword(event.target.value)}
+                  placeholder="Insira sua senha aqui"
                 />
               </ContainerInput>
-            </Input>
-            <ContainerInput>
-              <Label>Senha</Label>
-              <InputName
-                type="password"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-                placeholder="Insira sua senha aqui"
+              <ReCAPTCHA
+                ref={recaptchaRef}
+                sitekey="6LeJfZsbAAAAAD0fXrsZvhAv8xPQg8Lkt10CAYhW"
+                size="invisible"
               />
-            </ContainerInput>
-            <ReCAPTCHA
-              ref={recaptchaRef}
-              sitekey="6LeJfZsbAAAAAD0fXrsZvhAv8xPQg8Lkt10CAYhW"
-              size="invisible"
-            />
-            <ForgotPassword>
-              <p onClick={ClickForgotPassword}>Esqueceu a senha?</p>
-            </ForgotPassword>
+              <ForgotPassword>
+                <p onClick={ClickForgotPassword}>Esqueceu a senha?</p>
+              </ForgotPassword>
 
-            <Button onSubmit={tryLogin} type="submit">
-              <ButtonText>Logar</ButtonText>
-            </Button>
-          </Form>
+              <Button onSubmit={tryLogin} type="submit">
+                <ButtonText>Logar</ButtonText>
+              </Button>
+
+              <PartnerRegisterText>
+                Ainda não é parceiro do Foodzilla ?{" "}
+                <PartnerRegisterButton onClick={ClickRegister}>
+                  {" "}
+                  Vire agora
+                </PartnerRegisterButton>
+              </PartnerRegisterText>
+            </Form>
+          </>
         )}
       </ContainerImage>
     </>

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;
+`;

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 (
+    <Template title="Primeiro, nos informe sobre você" progress="50">
+      <Container>
+        <DivAlign>
+          <LabelName>Nome completo do responsável</LabelName>
+          <InputName placeholder="Nome" />
+
+          <LabelNumber>Telefone</LabelNumber>
+          <InputNumber placeholder="(__) _____-____" />
+
+          <LabelEmail>Email do responsável</LabelEmail>
+          <InputEmail placeholder="email@exemplo.com" />
+
+          <LabelPassword>Senha</LabelPassword>
+          <InputPassword type="password" placeholder="Senha" />
+
+          <DivCheckbox>
+            <Checkbox />
+            <LabelCheckbox>
+              Ao continuar, concordo em receber emails do FoodZilla
+            </LabelCheckbox>
+          </DivCheckbox>
+        </DivAlign>
+      </Container>
+    </Template>
+  );
+}

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%;
+  }
+`;

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 (
+    <Template title="Onde seu estabelecimento fica ?" progress={50}>
+      <Container>
+        <DivAlign>
+          <LabelAddress>Endereço</LabelAddress>
+          <InputAddress placeholder="Endereço" />
+
+          <LabelNumber>Número</LabelNumber>
+          <InputNumber placeholder="Número" />
+
+          <LabelComplement>Complemento</LabelComplement>
+          <InputComplement placeholder="Complemento" />
+        </DivAlign>
+      </Container>
+    </Template>
+  );
+}