m3-academy-template-vtexio/custom/react/components/Menu/MenuHeaderMobile/MenuHeaderMobile.tsx
Caroline Moran f2a03c53ae first commit
2022-08-11 09:06:07 -04:00

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