fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance loyalty card

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-11-05 19:05:10 +03:00
parent 27f522e75c
commit d7a56ba929
3 changed files with 80 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/components/LoyaltyCard/LoyaltyCard.tsx
View File

@@ -19,6 +19,7 @@ const LoyaltyCard = () => {
(restaurant?.customer_loyalty_points || 0) <= (restaurant?.customer_loyalty_points || 0) <=
0; 0;
return ( return (
<div className={styles.loyaltyContainer}> <div className={styles.loyaltyContainer}>
<Card className={styles.loyaltyCard}> <Card className={styles.loyaltyCard}>
@@ -35,62 +36,64 @@ const LoyaltyCard = () => {
</div> </div>
</div> </div>
)} )}
<Row {!isHasLoyaltyGift && (
justify="space-between" <Row
align="middle" justify="space-between"
style={{ marginBottom: "0.5rem" }} align="middle"
> style={{ marginBottom: "0.5rem" }}
<Col> >
<Row align="middle" gutter={[8, 8]}> <Col>
<Col> <Row align="middle" gutter={[8, 8]}>
<LoyaltyIcon className={styles.loyaltyIcon} /> <Col>
</Col> <LoyaltyIcon className={styles.loyaltyIcon} />
<Col> </Col>
<ProText style={{ fontSize: "1rem", fontWeight: 400 }}> <Col>
{t("menu.loyaltyPoints")} <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
</ProText> {t("menu.loyaltyPoints")}
</Col> </ProText>
</Row> </Col>
<ProText </Row>
type="secondary" <ProText
strong type="secondary"
style={{ strong
fontSize: "14px", style={{
fontWeight: 700, fontSize: "14px",
position: "relative", fontWeight: 700,
top: -2, position: "relative",
}} top: -2,
> }}
{token && >
t("menu.loyaltyDescription", { {token &&
value: restaurant?.loyalty_stamps ?? 0, t("menu.loyaltyDescription", {
})} value: restaurant?.loyalty_stamps ?? 0,
{!token && ( })}
<div style={{ paddingTop: 4 }}> {!token && (
<Link <div style={{ paddingTop: 4 }}>
to={`/${subdomain}/login`} <Link
style={{ to={`/${subdomain}/login`}
color: colors.primary, style={{
textDecoration: "underline", color: colors.primary,
fontSize: "14px", textDecoration: "underline",
fontWeight: 400, fontSize: "14px",
padding: "0 4px", fontWeight: 400,
}} padding: "0 4px",
> }}
{t("menu.joinUs")} >
</Link> {t("menu.joinUs")}
<span style={{ fontSize: "14px", color: colors.secondary }}> </Link>
{t("menu.joinUsDescription")} <span style={{ fontSize: "14px", color: colors.secondary }}>
</span> {t("menu.joinUsDescription")}
</div> </span>
)} </div>
</ProText> )}
</Col> </ProText>
<Col> </Col>
<PresentIcon /> <Col>
</Col> <PresentIcon />
</Row> </Col>
{token && ( </Row>
)}
{token && !isHasLoyaltyGift && (
<Row justify="space-between" align="middle"> <Row justify="space-between" align="middle">
<Col> <Col>
<div className={styles.presentIcon}> <div className={styles.presentIcon}>

31
src/components/OrderSummary/OrderSummary.tsx
View File

@@ -11,6 +11,7 @@ import {
} from "features/order/orderSlice"; } from "features/order/orderSlice";
import { OrderType } from "pages/checkout/hooks/types"; import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useParams } from "react-router-dom";
import { useGetRestaurantDetailsQuery } from "redux/api/others"; import { useGetRestaurantDetailsQuery } from "redux/api/others";
import { useAppDispatch, useAppSelector } from "redux/hooks"; import { useAppDispatch, useAppSelector } from "redux/hooks";
import ProText from "../ProText"; import ProText from "../ProText";
@@ -20,7 +21,8 @@ import styles from "./OrderSummary.module.css";
export default function OrderSummary() { export default function OrderSummary() {
const { t } = useTranslation(); const { t } = useTranslation();
const { useLoyaltyPoints } = useAppSelector(selectCart); const { useLoyaltyPoints } = useAppSelector(selectCart);
const { data: restaurant } = useGetRestaurantDetailsQuery("595"); const { subdomain } = useParams();
const { data: restaurant } = useGetRestaurantDetailsQuery(subdomain);
const { orderType } = useAppSelector(selectCart); const { orderType } = useAppSelector(selectCart);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const subtotal = useAppSelector(selectCartTotal); const subtotal = useAppSelector(selectCartTotal);
@@ -53,7 +55,11 @@ export default function OrderSummary() {
<div className={styles.summaryRow}> <div className={styles.summaryRow}>
<ProText type="secondary">{t("cart.discount")}</ProText> <ProText type="secondary">{t("cart.discount")}</ProText>
<ArabicPrice <ArabicPrice
price={useLoyaltyPoints ? highestLoyaltyItem?.price || 0 : 0} price={
useLoyaltyPoints && restaurant?.is_loyalty_enabled === 1
? highestLoyaltyItem?.price || 0
: 0
}
/> />
</div> </div>
<div className={styles.summaryRow}> <div className={styles.summaryRow}>
@@ -69,7 +75,7 @@ export default function OrderSummary() {
</div> </div>
</Space> </Space>
{isHasLoyaltyGift && ( {isHasLoyaltyGift && restaurant?.is_loyalty_enabled === 1 && (
<> <>
<br /> <br />
<br /> <br />
@@ -90,14 +96,17 @@ export default function OrderSummary() {
</div> </div>
)} )}
{isHasLoyaltyGift && useLoyaltyPoints && highestLoyaltyItem && ( {isHasLoyaltyGift &&
<div style={{ marginTop: 8, color: "green", fontSize: "12px" }}> useLoyaltyPoints &&
{t("cart.loyaltyDiscountApplied", { highestLoyaltyItem &&
itemName: highestLoyaltyItem.name, restaurant?.is_loyalty_enabled === 1 && (
amount: Math.round(highestLoyaltyItem.price || 0).toFixed(2), <div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
})} {t("cart.loyaltyDiscountApplied", {
</div> itemName: highestLoyaltyItem.name,
)} amount: Math.round(highestLoyaltyItem.price || 0).toFixed(2),
})}
</div>
)}
</Card> </Card>
</> </>
); );

2
src/features/order/orderSlice.ts
View File

@@ -653,7 +653,7 @@ export const selectGrandTotal = (state: RootState) => {
return ( return (
subtotal + subtotal +
taxAmount - taxAmount -
(state.order.useLoyaltyPoints ? loyaltyDiscount : 0) + (state.order.useLoyaltyPoints && state.order.restaurant?.is_loyalty_enabled === 1 ? loyaltyDiscount : 0) +
deliveryFee deliveryFee
);}; );};