146 lines
4.7 KiB
TypeScript
146 lines
4.7 KiB
TypeScript
import { Button, Card, Col, Image, Row } from "antd";
|
|
import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
|
|
import PresentIcon from "components/Icons/cart/PresentIcon";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { useGetRestaurantDetailsQuery } from "redux/api/others";
|
|
import { ACCESS_TOKEN } from "utils/constants";
|
|
import { colors } from "../../ThemeConstants";
|
|
import ProText from "../ProText";
|
|
import styles from "./LoyaltyCard.module.css";
|
|
|
|
const LoyaltyCard = () => {
|
|
const { t } = useTranslation();
|
|
const { subdomain } = useParams();
|
|
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
|
|
const token = localStorage.getItem(ACCESS_TOKEN);
|
|
const isHasLoyaltyGift =
|
|
(restaurant?.loyalty_stamps || 0) -
|
|
(restaurant?.customer_loyalty_points || 0) <=
|
|
0;
|
|
|
|
|
|
return (
|
|
<div className={styles.loyaltyContainer}>
|
|
<Card className={styles.loyaltyCard}>
|
|
{isHasLoyaltyGift && (
|
|
<div className={styles.congratulationsContainer}>
|
|
<PresentIcon className={styles.congratulationsIcon} />
|
|
<div>
|
|
<p className={styles.congratulationsText}>
|
|
{t("menu.congratulations")}
|
|
</p>
|
|
<p className={styles.congratulationsSubtext}>
|
|
{t("menu.loyaltyGiftEarned")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{!isHasLoyaltyGift && (
|
|
<Row
|
|
justify="space-between"
|
|
align="middle"
|
|
style={{ marginBottom: "0.5rem" }}
|
|
>
|
|
<Col>
|
|
<Row align="middle" gutter={[8, 8]}>
|
|
<Col>
|
|
<LoyaltyIcon className={styles.loyaltyIcon} />
|
|
</Col>
|
|
<Col>
|
|
<ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
|
|
{t("menu.loyaltyPoints")}
|
|
</ProText>
|
|
</Col>
|
|
</Row>
|
|
<ProText
|
|
type="secondary"
|
|
strong
|
|
style={{
|
|
fontSize: "14px",
|
|
fontWeight: 700,
|
|
position: "relative",
|
|
top: -2,
|
|
}}
|
|
>
|
|
{token &&
|
|
t("menu.loyaltyDescription", {
|
|
value: restaurant?.loyalty_stamps ?? 0,
|
|
})}
|
|
{!token && (
|
|
<div style={{ paddingTop: 4 }}>
|
|
<Link
|
|
to={`/${subdomain}/login`}
|
|
style={{
|
|
color: colors.primary,
|
|
textDecoration: "underline",
|
|
fontSize: "14px",
|
|
fontWeight: 400,
|
|
padding: "0 4px",
|
|
}}
|
|
>
|
|
{t("menu.joinUs")}
|
|
</Link>
|
|
<span style={{ fontSize: "14px", color: colors.secondary }}>
|
|
{t("menu.joinUsDescription")}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</ProText>
|
|
</Col>
|
|
<Col>
|
|
<PresentIcon />
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
{token && !isHasLoyaltyGift && (
|
|
<Row justify="space-between" align="middle">
|
|
<Col>
|
|
<div className={styles.presentIcon}>
|
|
<div style={{ display: "flex" }}>
|
|
<Image
|
|
className={styles.presentIconItem}
|
|
preview={false}
|
|
width={32}
|
|
height={32}
|
|
src={restaurant?.loyalty_stamp_image}
|
|
/>
|
|
<ProText
|
|
type="secondary"
|
|
strong
|
|
style={{
|
|
fontSize: "1rem",
|
|
fontWeight: 400,
|
|
position: "relative",
|
|
top: 3,
|
|
margin: "0 2px",
|
|
}}
|
|
>
|
|
x
|
|
{(restaurant?.loyalty_stamps ?? 0) -
|
|
(restaurant?.customer_loyalty_points ?? 0)}
|
|
</ProText>{" "}
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
<Col>
|
|
<Button
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
color: "white",
|
|
border: 0,
|
|
height: 32,
|
|
}}
|
|
>
|
|
{t("menu.claim")}
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoyaltyCard;
|