add congrats when loyalty prize is available

This commit is contained in:
2025-10-21 16:18:21 +03:00
parent 6a6f92aefc
commit 778233acaa
5 changed files with 123 additions and 28 deletions

View File

@@ -10,10 +10,27 @@ import styles from "./LoyaltyCard.module.css";
const LoyaltyCard = () => {
const { t } = useTranslation();
const { data: restaurant } = useGetRestaurantDetailsQuery("595");
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>
)}
<Row
justify="space-between"
align="middle"
@@ -53,25 +70,32 @@ const LoyaltyCard = () => {
<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,
}}
>
x{restaurant?.loyalty_stamps}
</ProText>
{isHasLoyaltyGift ? (
<>
<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>{" "}
</>
) : null}
</div>
</div>
</Col>