enhace UI
This commit is contained in:
@@ -311,7 +311,7 @@
|
||||
"selectOffice": "اختر المكتب",
|
||||
"officeNo": "رقم المكتب",
|
||||
"company": "الشركة",
|
||||
"contactPerson": "الاتصال بالشخص",
|
||||
"contactPerson": "اسم الموظف",
|
||||
"phone": "الهاتف",
|
||||
"giftDetails": "تفاصيل الهدية",
|
||||
"changeGift": "تغيير الهدية",
|
||||
|
||||
@@ -258,11 +258,17 @@
|
||||
}
|
||||
|
||||
.iconButtonStyle {
|
||||
position: relative;
|
||||
top: 5px;
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
background-color: rgba(255, 183, 0, 0.08);
|
||||
}
|
||||
|
||||
.detailLabelStyle {
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.smallTextStyle {
|
||||
|
||||
@@ -87,35 +87,33 @@ export const GiftDetails = () => {
|
||||
<div className={styles.detailsRowContainer}>
|
||||
<div className={styles.detailItemContainer}>
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
className={styles.iconButtonStyle}
|
||||
>
|
||||
<GoldenHouseIcon />
|
||||
</Button>
|
||||
icon={<GoldenHouseIcon />}
|
||||
/>
|
||||
<div>
|
||||
<ProText className={styles.detailLabelStyle}>
|
||||
{t("address.receiverName")}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText type="secondary">{giftDetails?.receiverName}</ProText>
|
||||
<ProText type="secondary" className={styles.smallTextStyle}>
|
||||
{giftDetails?.receiverName}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.detailItemContainer}>
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
className={styles.iconButtonStyle}
|
||||
>
|
||||
<BuildsIcon />
|
||||
</Button>
|
||||
icon={<BuildsIcon />}
|
||||
/>
|
||||
<div>
|
||||
<ProText className={styles.detailLabelStyle}>
|
||||
{t("address.receiverPhone")}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText type="secondary">{giftDetails?.receiverPhone}</ProText>
|
||||
<ProText type="secondary" className={styles.smallTextStyle}>
|
||||
{giftDetails?.receiverPhone}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -73,35 +73,29 @@ export const OfficeDetails = () => {
|
||||
<div className={styles.detailsRowContainer}>
|
||||
<div className={styles.detailItemContainer}>
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
className={styles.iconButtonStyle}
|
||||
>
|
||||
<GoldenHouseIcon />
|
||||
</Button>
|
||||
icon={<GoldenHouseIcon />}
|
||||
/>
|
||||
<div>
|
||||
<ProText className={styles.detailLabelStyle}>
|
||||
{t("address.floorNo")}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText type="secondary">{officeDetails?.floorNo}</ProText>
|
||||
<ProText type="secondary" className={styles.smallTextStyle}>{officeDetails?.floorNo}</ProText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.detailItemContainer}>
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
className={styles.iconButtonStyle}
|
||||
>
|
||||
<BuildsIcon />
|
||||
</Button>
|
||||
icon={<BuildsIcon />}
|
||||
/>
|
||||
<div>
|
||||
<ProText className={styles.detailLabelStyle}>
|
||||
{t("address.officeNo")}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText type="secondary">{officeDetails?.officeNo}</ProText>
|
||||
<ProText type="secondary" className={styles.smallTextStyle}>{officeDetails?.officeNo}</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -72,35 +72,29 @@ export const RoomDetails = () => {
|
||||
<div className={styles.detailsRowContainer}>
|
||||
<div className={styles.detailItemContainer}>
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
className={styles.iconButtonStyle}
|
||||
>
|
||||
<GoldenHouseIcon />
|
||||
</Button>
|
||||
icon={<GoldenHouseIcon />}
|
||||
/>
|
||||
<div>
|
||||
<ProText className={styles.detailLabelStyle}>
|
||||
{t("address.floorNo")}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText type="secondary">{roomDetails?.floorNo}</ProText>
|
||||
<ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.floorNo}</ProText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.detailItemContainer}>
|
||||
<Button
|
||||
type="text"
|
||||
shape="circle"
|
||||
className={styles.iconButtonStyle}
|
||||
>
|
||||
<BuildsIcon />
|
||||
</Button>
|
||||
icon={<BuildsIcon />}
|
||||
/>
|
||||
<div>
|
||||
<ProText className={styles.detailLabelStyle}>
|
||||
{t("address.roomNo")}
|
||||
</ProText>
|
||||
<br />
|
||||
<ProText type="secondary">{roomDetails?.roomNo}</ProText>
|
||||
<ProText type="secondary" className={styles.smallTextStyle}>{roomDetails?.roomNo}</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,30 +1,15 @@
|
||||
import { StarOutlined } from "@ant-design/icons";
|
||||
import { Badge, Button, Card } from "antd";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
|
||||
import ProText from "components/ProText";
|
||||
import useBreakPoint from "hooks/useBreakPoint";
|
||||
import { AddToCartButton } from "pages/menu/components/AddToCartButton/AddToCartButton.tsx";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { colors } from "ThemeConstants";
|
||||
import { Product } from "utils/types/appTypes";
|
||||
import styles from "../MenuList/MenuList.module.css";
|
||||
import ProductCard from "../MenuList/ProductCard";
|
||||
|
||||
interface MenuListProps {
|
||||
products: Product[];
|
||||
}
|
||||
|
||||
export function SearchMenu({ products }: MenuListProps) {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { isMobile, isTablet } = useBreakPoint();
|
||||
const { items } = useAppSelector((state) => state.order);
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const { subdomain } = useParams();
|
||||
|
||||
// Show error state if data exists but has no products
|
||||
if (products && (!products || products.length === 0)) {
|
||||
@@ -43,171 +28,7 @@ export function SearchMenu({ products }: MenuListProps) {
|
||||
<div className={styles.menuSections}>
|
||||
<div className={styles.menuItemsGrid}>
|
||||
{products.map((item: Product) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={styles.productLink + " product-link-search"}
|
||||
onClick={() => {
|
||||
localStorage.setItem("product", JSON.stringify(item));
|
||||
navigate(`/${subdomain}/product/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
key={item.id}
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
overflow: "hide",
|
||||
width: "100%",
|
||||
}}
|
||||
styles={{
|
||||
body: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: 8,
|
||||
padding: item.description
|
||||
? "16px 16px 8px 16px"
|
||||
: "16px 16px 24px 16px",
|
||||
overflow: "hide",
|
||||
boxShadow:
|
||||
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
gap: isMobile ? 10 : 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
gap: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
display: "inline-block",
|
||||
fontSize: "1rem",
|
||||
fontWeight: 600,
|
||||
letterSpacing: "-0.01em",
|
||||
lineHeight: 1.2,
|
||||
color: themeName === "dark" ? "#fff" : "#000044",
|
||||
}}
|
||||
>
|
||||
{isRTL ? item.name : item.nameOther}
|
||||
</ProText>
|
||||
{item.description && (
|
||||
<ProText
|
||||
type="secondary"
|
||||
className={styles.itemDescription}
|
||||
style={{
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 2,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.5rem",
|
||||
maxHeight: "3em",
|
||||
fontSize: "1rem",
|
||||
letterSpacing: "0.01em",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</ProText>
|
||||
)}
|
||||
|
||||
<div>
|
||||
{item.original_price !== item.price && (
|
||||
<ArabicPrice
|
||||
price={item.original_price}
|
||||
strong
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
fontWeight: 700,
|
||||
color: colors.primary,
|
||||
textDecoration: "line-through",
|
||||
marginRight: isRTL ? 0 : 10,
|
||||
marginLeft: isRTL ? 10 : 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ArabicPrice
|
||||
price={item.price}
|
||||
strong
|
||||
style={{
|
||||
fontSize: "1rem",
|
||||
fontWeight: 700,
|
||||
color: colors.primary,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
...(isRTL ? { right: -5 } : {}),
|
||||
}}
|
||||
>
|
||||
<ItemDescriptionIcons
|
||||
className={styles.itemDescriptionIcons}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ position: "relative" }}>
|
||||
<ImageWithFallback
|
||||
src={item.image_small || "/default.png"}
|
||||
fallbackSrc="/default.png"
|
||||
alt={item.name}
|
||||
className={`${styles.popularMenuItemImage} ${
|
||||
isMobile
|
||||
? styles.popularMenuItemImageMobile
|
||||
: isTablet
|
||||
? styles.popularMenuItemImageTablet
|
||||
: styles.popularMenuItemImageDesktop
|
||||
}`}
|
||||
width={90}
|
||||
height={90}
|
||||
/>
|
||||
|
||||
{item.isHasLoyalty && (
|
||||
<Button
|
||||
className={styles.loyaltyButton}
|
||||
icon={<StarOutlined />}
|
||||
style={{ width: 24, height: 24 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AddToCartButton />
|
||||
|
||||
{items.find((i) => i.id === item.id) && (
|
||||
<Badge
|
||||
count={items.find((i) => i.id === item.id)?.quantity}
|
||||
className={
|
||||
styles.cartBadge +
|
||||
" " +
|
||||
(isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
|
||||
}
|
||||
style={{
|
||||
backgroundColor: colors.primary,
|
||||
}}
|
||||
title={`${
|
||||
items.find((i) => i.id === item.id)?.quantity
|
||||
} in cart`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<ProductCard item={item} key={item.id} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { RightOutlined, ShoppingCartOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
LeftOutlined,
|
||||
RightOutlined,
|
||||
ShoppingCartOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Button, Form, Input, message, Row } from "antd";
|
||||
import { addItem } from "features/order/orderSlice";
|
||||
import useBreakPoint from "hooks/useBreakPoint";
|
||||
@@ -176,7 +180,8 @@ export default function ProductFooter({
|
||||
className={styles.editButton}
|
||||
onClick={() => setIsSpecialRequestOpen(true)}
|
||||
>
|
||||
<u>{t("cart.editNote")}</u> <RightOutlined />
|
||||
<u>{t("cart.editNote")}</u>{" "}
|
||||
{isRTL ? <LeftOutlined /> : <RightOutlined />}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user