83 lines
2.4 KiB
TypeScript
83 lines
2.4 KiB
TypeScript
|
import React, { useEffect } from "react";
|
||
|
|
|
||
|
|
import styles from "./MenuBottomMobile.css";
|
||
|
|
import userIcon from "../assets/userIcon.svg";
|
||
|
|
import GET_SESSION from "../../../graphql/query/GET_SESSION.graphql";
|
||
|
|
import { useLazyQuery } from "react-apollo";
|
||
|
|
import { Spinner } from "vtex.styleguide";
|
||
|
|
import { Link } from "vtex.render-runtime";
|
||
|
|
|
||
|
|
const MenuBottomMobile = () => {
|
||
|
|
const [getSession, { data, loading }] = useLazyQuery(
|
||
|
|
GET_SESSION,
|
||
|
|
{
|
||
|
|
fetchPolicy: "network-only",
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
getSession();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (!data || loading) {
|
||
|
|
return (
|
||
|
|
<div className={styles.MenuBottomMobile}>
|
||
|
|
<Spinner />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (data.getSession.profile === null) {
|
||
|
|
return (
|
||
|
|
<div className={styles.MenuBottomMobile}>
|
||
|
|
<div className={styles.MenuBottomMobileContent}>
|
||
|
|
<img
|
||
|
|
className={styles.MenuBottomMobileUserIcon}
|
||
|
|
src={userIcon}
|
||
|
|
alt="User Icon"
|
||
|
|
/>
|
||
|
|
<Link
|
||
|
|
className={styles.MenuBottomMobileLink}
|
||
|
|
to="/login"
|
||
|
|
title="login"
|
||
|
|
target="_self"
|
||
|
|
>
|
||
|
|
Entrar
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.MenuBottomMobile}>
|
||
|
|
<div className={styles.MenuBottomMobileContent}>
|
||
|
|
<img
|
||
|
|
className={styles.MenuBottomMobileUserIcon}
|
||
|
|
src={userIcon}
|
||
|
|
alt="User Icon"
|
||
|
|
/>
|
||
|
|
<Link
|
||
|
|
className={styles.MenuBottomMobileLink}
|
||
|
|
to="/account#/profile"
|
||
|
|
title="account"
|
||
|
|
target="_self"
|
||
|
|
>
|
||
|
|
Minha Conta
|
||
|
|
</Link>
|
||
|
|
<span className={styles.MenuBottomMobileSeparator}></span>
|
||
|
|
<Link
|
||
|
|
className={styles.MenuBottomMobileLink}
|
||
|
|
to="/account#/orders"
|
||
|
|
title="account"
|
||
|
|
target="_self"
|
||
|
|
>
|
||
|
|
Meus Pedidos
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export { MenuBottomMobile };
|