m3-academy-template-vtexio-.../custom/react/components/Menu/MenuBottomMobile/MenuBottomMobile.tsx

83 lines
2.4 KiB
TypeScript
Raw Permalink Normal View History

2022-08-11 13:06:07 +00:00
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 };