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

enhance loyalty section UI

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2026-01-13 23:09:37 +03:00
parent a06147dfa4
commit 1d9ae7190e
9 changed files with 162 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/OrderSummary/OrderSummary.module.css
View File

@@ -11,6 +11,7 @@
justify-content: space-between;
align-items: center;
font-size: 16px;
min-height: 24px;
}
.summaryDivider {

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

@@ -1,4 +1,4 @@
import { Card, Checkbox, Divider, Space } from "antd";
import { Card, Checkbox, Divider, Space, Tag } from "antd";
import ArabicPrice from "components/ArabicPrice";
import {
selectCart,
@@ -69,7 +69,7 @@ export default function OrderSummary() {
<ProText type="secondary" style={titlesStyle}>
{t("cart.basketTotal")}
</ProText>
<ArabicPrice price={subtotal} style={titlesStyle} />
<ArabicPrice price={subtotal} textStyle={titlesStyle} />
</div>
{orderType === OrderType.Delivery && (
<div className={styles.summaryRow}>
@@ -78,7 +78,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={Number(restaurant?.delivery_fees || 0)}
style={{ ...titlesStyle, color: "#434E5C" }}
textStyle={{ ...titlesStyle, color: "#434E5C" }}
/>
</div>
)}
@@ -87,10 +87,42 @@ export default function OrderSummary() {
<ProText type="secondary" style={titlesStyle}>
{t("cart.discount")}
</ProText>
<ArabicPrice
price={discountAmount}
style={{ ...titlesStyle, color: "#434E5C" }}
/>
<div
style={{
display: "flex",
alignItems: "center",
minHeight: "24px",
}}
>
{isHasLoyaltyGift &&
useLoyaltyPoints &&
highestLoyaltyItem &&
restaurant?.is_loyalty_enabled === 1 ? (
<Tag
color="green"
style={{
backgroundColor: "#EDFEF5",
borderRadius: "4px",
padding: "3px 10px",
fontWeight: 500,
fontStyle: "Medium",
fontSize: 12,
lineHeight: "140%",
letterSpacing: "0%",
placeItems: "center",
margin: "0 10px",
position: "relative",
top: -1,
}}
>
{t("cart.loyalty")}
</Tag>
) : null}
<ArabicPrice
price={discountAmount}
textStyle={{ ...titlesStyle, color: "#434E5C" }}
/>
</div>
</div>
)}
{orderType !== OrderType.Redeem && (
@@ -100,7 +132,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={tip || 0}
style={{ ...titlesStyle, color: "#434E5C" }}
textStyle={{ ...titlesStyle, color: "#434E5C" }}
/>
</div>
)}
@@ -111,7 +143,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={0}
style={{ ...titlesStyle, color: "#434E5C" }}
textStyle={{ ...titlesStyle, color: "#434E5C" }}
/>
</div>
)}
@@ -122,7 +154,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={0}
style={{ ...titlesStyle, color: "#32AD6D" }}
textStyle={{ ...titlesStyle, color: "#32AD6D" }}
/>
</div>
)}
@@ -133,7 +165,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={taxAmount || 0}
style={{ ...titlesStyle, color: "#434E5C" }}
textStyle={{ ...titlesStyle, color: "#434E5C" }}
/>
</div>
)}
@@ -144,7 +176,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={splitBillAmount}
style={{ ...titlesStyle, color: "#434E5C" }}
textStyle={{ ...titlesStyle, color: "#434E5C" }}
/>
</div>
)}
@@ -167,7 +199,7 @@ export default function OrderSummary() {
</ProText>
<ArabicPrice
price={grandTotal}
style={{
textStyle={{
fontWeight: 600,
fontStyle: "SemiBold",
fontSize: 18,
@@ -178,43 +210,6 @@ export default function OrderSummary() {
/>
</div>
</Space>
{isHasLoyaltyGift &&
restaurant?.is_loyalty_enabled === 1 &&
orderType !== OrderType.Redeem && (
<>
<Checkbox
checked={useLoyaltyPoints}
onChange={(value) => {
dispatch(updateUseLoyaltyPoints(value.target.checked));
}}
style={{ marginTop: 8 }}
>
{t("cart.useLoyaltyPoints")}
</Checkbox>
</>
)}
{isHasLoyaltyGift &&
loyaltyValidation.errorMessage &&
orderType !== OrderType.Redeem && (
<div style={{ marginTop: 8, color: "red", fontSize: "12px" }}>
{t(loyaltyValidation.errorMessage)}
</div>
)}
{isHasLoyaltyGift &&
orderType !== OrderType.Redeem &&
useLoyaltyPoints &&
highestLoyaltyItem &&
restaurant?.is_loyalty_enabled === 1 && (
<div style={{ marginTop: 8, color: "green", fontSize: "12px" }}>
{t("cart.loyaltyDiscountApplied", {
itemName: highestLoyaltyItem.name,
amount: Math.round(highestLoyaltyItem.price || 0).toFixed(2),
})}
</div>
)}
</Card>
</>
);