feat: add verificação ocupação

src/components/CardCliente/index.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { BsClock } from 'react-icons/bs';
+
+import Avvvatars from 'avvvatars-react';
+import { ClienteMetadata } from 'types/IContext';
+
+import { getPhoto } from 'services/get/photo';
+
+import styles from './CardCliente.module.scss';
+
+type Props = {
+  cliente: ClienteMetadata | undefined;
+  onClick?: () => void;
+};
+
+export function CardCliente({ cliente, onClick }: Props) {
+  const [photo, setPhoto] = useState('');
+  const [name, setName] = useState('');
+
+  async function getPhotoUser(id: string) {
+    const { data, error, status } = await getPhoto(id);
+
+    if (error) {
+      switch (status) {
+        default:
+          throw new Error('Erro ao buscar informações do usuário');
+      }
+    }
+
+    if (!data) return;
+
+    setPhoto(data[0].j[0].src);
+    setName(data[0].j[0].name);
+  }
+
+  useEffect(() => {
+    if (cliente) {
+      getPhotoUser(cliente.client_id);
+    }
+  }, [cliente]);
+
+  return (
+    <div className={styles.card} onClick={onClick} key={cliente?.client_id}>
+      <div className={styles.alert}>
+        <br />
+      </div>
+      <div className={styles.containerImg}>
+        {photo === '' ? (
+          <Avvvatars value={cliente?.client_name || ''} size={50} />
+        ) : (
+          <img src={photo || cliente?.client_avatar || cliente?.client_picture} alt={cliente?.client_name} />
+        )}
+      </div>
+      <div className={styles.containerInfo}>
+        <h2 className={styles.title}>{name || cliente?.client_name}</h2>
+        <strong className={styles.info}>
+          <BsClock color="#FF9000" size={16} style={{ marginRight: '12px' }} />
+          {cliente?.hour}
+        </strong>
+      </div>
+    </div>
+  );
+}

src/components/Verificacao/index.tsx

@@ -0,0 +1,47 @@
+import { Button } from 'components/Button';
+
+import { useAuth } from 'hooks/useAuth';
+import { useRegister } from 'hooks/useRegister';
+
+import styles from './Verificacao.module.scss';
+
+export function VerificacaoOcupacao() {
+  const { user } = useAuth();
+  const { formikLoginGoogle } = useRegister();
+
+  return (
+    <>
+      <h2 className={styles.titleHome}>
+        Oi {user?.user_metadata.name}, vi que você está logado com o Google.
+        <br /> E eu preciso saber se você é:
+      </h2>
+
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          formikLoginGoogle.handleSubmit(e);
+        }}
+      >
+        <div className={styles.containerButton}>
+          <Button
+            type="submit"
+            onClick={() => {
+              formikLoginGoogle.setFieldValue('ocupacao', 'barbeiro');
+            }}
+          >
+            Barbeiro
+          </Button>
+
+          <Button
+            type="submit"
+            onClick={() => {
+              formikLoginGoogle.setFieldValue('ocupacao', 'cliente');
+            }}
+          >
+            Cliente
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+}