103 lines
3.2 KiB
TypeScript
103 lines
3.2 KiB
TypeScript
import React, { useEffect } from "react";
|
|
// import lockIcon from "../assets/lock.png";
|
|
import closeIcon from "../assets/closeIcon.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";
|
|
// import userIcon from "../assets/userIcon.svg";
|
|
|
|
import styles from "./MenuHeaderMobile.css";
|
|
|
|
const MenuHeaderMobile = ({ close }: { close: () => void }) => {
|
|
const [getSession, { data, loading }] = useLazyQuery(
|
|
GET_SESSION,
|
|
{
|
|
fetchPolicy: "network-only",
|
|
}
|
|
// { variables: { language: "english" } }
|
|
);
|
|
|
|
useEffect(() => {
|
|
getSession();
|
|
}, []);
|
|
|
|
if (!data || loading) {
|
|
return (
|
|
<div className={styles.MenuBottomMobile}>
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (data.getSession.profile === null) {
|
|
return (
|
|
<div className={styles.menuMobileHeader}>
|
|
<div className={styles.menuMobileLogin}>
|
|
<div>
|
|
<Link
|
|
className={styles.menuLink}
|
|
to="/login"
|
|
title="login"
|
|
target="_self"
|
|
>
|
|
Entre ou faça login
|
|
</Link>
|
|
</div>
|
|
|
|
<button
|
|
className={styles.menuMobileHeaderClose}
|
|
onClick={close}
|
|
>
|
|
<img
|
|
src={closeIcon}
|
|
className={styles.menuMobileHeaderCloseIcon}
|
|
alt="Close Icon"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={styles.menuMobileHeader}>
|
|
<button className={styles.menuMobileHeaderClose} onClick={close}>
|
|
<img
|
|
src={closeIcon}
|
|
className={styles.menuMobileHeaderCloseIcon}
|
|
alt="Close Icon"
|
|
/>
|
|
</button>
|
|
<div className={styles.menuMobileLogin}>
|
|
<Link
|
|
className={styles.menuLink}
|
|
to="/account#/profile"
|
|
title="account"
|
|
target="_self"
|
|
>
|
|
Minha Conta
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
// return (
|
|
// <div className={styles.menuMobileHeader}>
|
|
// <div className={styles.menuMobileHeaderText}>
|
|
// <img src={lockIcon} className={styles.menuMobileLockIcon} alt="Lock Icon" />
|
|
// <span className={styles.menuMobileHeaderTextSpan}>compra 100% segura</span>
|
|
// </div>
|
|
// <button className={styles.menuMobileHeaderClose} onClick={close}>
|
|
// <img
|
|
// src={closeIcon}
|
|
// className={styles.menuMobileHeaderCloseIcon}
|
|
// alt="Close Icon"
|
|
// />
|
|
// </button>
|
|
// </div>
|
|
// );
|
|
};
|
|
|
|
export { MenuHeaderMobile };
|