diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index f64b36b..ca47576 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -266,6 +266,7 @@ }, "checkout": { "customerName": "اسم العميل", + "paymentSummary": "ملخص الدفع", "customerInformation": "تفاصيل العميل", "title": "الدفع", "cash": "كاش", @@ -370,6 +371,12 @@ }, "order": { "title": "الطلب", + "newOrder": "طلب جديد", + "paymentSummary": "ملخص الدفع", + "aStaffMemberWillCollectTheCashFromYouAtYourTable": "سيجمع موظف المطعم المال منك عند طاولتك", + "orderSummary": "ملخص الطلب", + "cashPaymentConfirmed": "تم الدفع بالكاش بنجاح", + "callWaiter": "اتصل بالخادم", "yourOrder": "طلبك", "done": "تم", "yourOrderFromFascanoRestaurant": "طلبك من مطعم فاسكانو", diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index 625a074..70b77ed 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -276,6 +276,8 @@ }, "checkout": { "customerName": "Customer Name", + "paymentSummary": "Payment Summary", + "orderSummary": "Order Summary", "customerInformation": "Customer Information", "title": "Checkout", "cash": "Cash", @@ -381,6 +383,10 @@ }, "order": { "title": "Order", + "newOrder": "New Order", + "aStaffMemberWillCollectTheCashFromYouAtYourTable": "A staff member will collect the cash from you at your table", + "cashPaymentConfirmed": "Cash payment confirmed", + "callWaiter": "Call Waiter", "yourOrder": "Your Order", "done": "Done", "yourOrderFromFascanoRestaurant": "Your order from Fascano restaurant", diff --git a/src/components/Ads/Ads1.tsx b/src/components/Ads/Ads1.tsx index 52a38da..90734ef 100644 --- a/src/components/Ads/Ads1.tsx +++ b/src/components/Ads/Ads1.tsx @@ -27,8 +27,12 @@ export default function Ads1({ className }: { className?: string }) { > {t("home.promotion.description")} @@ -38,6 +42,7 @@ export default function Ads1({ className }: { className?: string }) { style={{ marginTop: 5, fontSize: 14, + color:"#00AC17" }} > {t("home.promotion.title")} diff --git a/src/components/Ads/Ads2.module.css b/src/components/Ads/Ads2.module.css index b2ef0a9..104c3ef 100644 --- a/src/components/Ads/Ads2.module.css +++ b/src/components/Ads/Ads2.module.css @@ -63,7 +63,7 @@ } .adsCard :global(.ant-card-body) { - padding: 8px !important; + padding: 10px !important; } :global(.darkApp) .adsCard { diff --git a/src/components/Ads/Ads2.tsx b/src/components/Ads/Ads2.tsx index 562a2aa..e2c57c4 100644 --- a/src/components/Ads/Ads2.tsx +++ b/src/components/Ads/Ads2.tsx @@ -8,11 +8,7 @@ import { useTranslation } from "react-i18next"; import { useAppSelector } from "redux/hooks"; import styles from "./Ads2.module.css"; -export default function Ads2({ - className, -}: { - className?: string; -}) { +export default function Ads2({ className }: { className?: string }) { const { t } = useTranslation(); const { isRTL } = useAppSelector((state) => state.locale); @@ -26,8 +22,12 @@ export default function Ads2({ {t("home.promotion.description")} @@ -37,9 +37,10 @@ export default function Ads2({ style={{ marginTop: 5, fontSize: 14, + color: "#00AC17", }} > - {t("home.promotion.title")} + {t("home.showDetails")}
void; +} + +const NoteIcon = ({ className, onClick }: NoteIconType) => { + return ( + + + + ); +}; + +export default NoteIcon; diff --git a/src/components/Icons/SuccessIcon.tsx b/src/components/Icons/SuccessIcon.tsx new file mode 100644 index 0000000..db0aff6 --- /dev/null +++ b/src/components/Icons/SuccessIcon.tsx @@ -0,0 +1,33 @@ +interface SuccessIconType { + className?: string; + onClick?: () => void; +} + +const SuccessIcon = ({ className, onClick }: SuccessIconType) => { + return ( + + + + + ); +}; + +export default SuccessIcon; diff --git a/src/components/Icons/order/NewRateIcon.tsx b/src/components/Icons/order/NewRateIcon.tsx new file mode 100644 index 0000000..86d531e --- /dev/null +++ b/src/components/Icons/order/NewRateIcon.tsx @@ -0,0 +1,26 @@ +interface NewRateIconType { + className?: string; + onClick?: () => void; +} + +const NewRateIcon = ({ className, onClick }: NewRateIconType) => { + return ( + + + + + ); +}; + +export default NewRateIcon; diff --git a/src/components/OrderSummary/OrderSummary.module.css b/src/components/OrderSummary/OrderSummary.module.css index 5f1d411..374e5c0 100644 --- a/src/components/OrderSummary/OrderSummary.module.css +++ b/src/components/OrderSummary/OrderSummary.module.css @@ -14,7 +14,7 @@ } .summaryDivider { - margin: 8px 0 !important; + margin: 0 !important; } .totalRow { diff --git a/src/components/OrderSummary/OrderSummary.tsx b/src/components/OrderSummary/OrderSummary.tsx index 901aaed..e8c1021 100644 --- a/src/components/OrderSummary/OrderSummary.tsx +++ b/src/components/OrderSummary/OrderSummary.tsx @@ -111,7 +111,7 @@ export default function OrderSummary() { />
)} - +
-
-
{ dispatch(updateUseLoyaltyPoints(value.target.checked)); }} + style={{ marginTop: 8 }} > {t("cart.useLoyaltyPoints")} diff --git a/src/components/PaymentDetails/PaymentDetails.tsx b/src/components/PaymentDetails/PaymentDetails.tsx index 58c74ce..756bb1a 100644 --- a/src/components/PaymentDetails/PaymentDetails.tsx +++ b/src/components/PaymentDetails/PaymentDetails.tsx @@ -12,7 +12,7 @@ export default function PaymentDetails({ order }: { order?: Order }) { return ( <> - {t("cart.orderSummary")} + {t("cart.paymentSummary")}
diff --git a/src/pages/checkout/components/BriefMenuCard.tsx b/src/pages/checkout/components/BriefMenuCard.tsx index 3e3fd10..bcfd8c8 100644 --- a/src/pages/checkout/components/BriefMenuCard.tsx +++ b/src/pages/checkout/components/BriefMenuCard.tsx @@ -31,7 +31,7 @@ export default function BriefMenuCard() { return ( <>
)} - {orderType === OrderType.Gift && } + {/* {orderType === OrderType.Gift && } */} {/* */} {/* */} diff --git a/src/pages/order/order.module.css b/src/pages/order/order.module.css index fc8ef94..b30794c 100644 --- a/src/pages/order/order.module.css +++ b/src/pages/order/order.module.css @@ -15,7 +15,7 @@ } } - .fascanoIcon { +.fascanoIcon { position: relative; top: 3px; } @@ -39,7 +39,7 @@ } .orderCard :global(.ant-card-body) > *:not(:last-child) { - margin-bottom: 3.5rem; + margin-bottom: 0.5rem; } .orderSummary { @@ -260,3 +260,91 @@ text-align: start; width: 100%; } + +.rateServiceCard { + width: 100%; + height: 48px; + display: flex; + justify-content: center; + padding: 12px 18px !important; + row-gap: 10px; + transition: all 0.3s ease; + border-radius: 50px; +} + +.rateServiceCard :global(.ant-card-body) { + padding: 0px !important; + text-align: start; + width: 100%; +} + +.newRateIcon { + position: relative; + top: -3px; +} + +.serviceIcon { + position: relative; + top: 2px; +} + +.orderNotes { + height: 87px; + gap: 16px; + opacity: 1; + border-radius: 6px; + padding: 16px; + background-color: #f5f5f6; + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +.orderNotesClosed { + opacity: 1; + height: 40px; + gap: 16px; + border-radius: 6px; + padding: 8px 16px; + background-color: #edfef5; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.orderContent { + display: flex; + flex-direction: column; + padding: 16px; + gap: 16px; + overflow: auto; + scrollbar-width: none; +} + +/* CheckoutButton Styles */ + +.checkoutButton{ + width: 100%; +} + +.checkoutButtonContainer { + width: 100%; + padding: 16px 16px 0; + position: sticky; + bottom: 0; + left: 0; + height: 80px; + display: flex; + flex-direction: row; + justify-content: space-around; + gap: 1rem; + background-color: var(--secondary-background); + box-shadow: none; + z-index: 999; +} + +/* Dark theme styles for checkout */ +:global(.darkApp) .checkoutButtonContainer { + background-color: #000000 !important; +} diff --git a/src/pages/order/page.tsx b/src/pages/order/page.tsx index 30af95f..b028e3b 100644 --- a/src/pages/order/page.tsx +++ b/src/pages/order/page.tsx @@ -1,4 +1,13 @@ -import { Button, Card, Divider, Flex, Image, Progress, Tooltip } from "antd"; +import { + Button, + Card, + Divider, + Flex, + Image, + Layout, + Progress, + Tooltip, +} from "antd"; import Ads2 from "components/Ads/Ads2"; import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet"; import LocationIcon from "components/Icons/LocationIcon"; @@ -25,13 +34,16 @@ import NextIcon from "components/Icons/NextIcon"; import { RateBottomSheet } from "components/CustomBottomSheet/RateBottomSheet"; import BriefMenuCard from "pages/checkout/components/BriefMenuCard"; import { QRBottomSheet } from "pages/pay/components/splitBill/QRBottomSheet"; +import NewRateIcon from "components/Icons/order/NewRateIcon"; +import NoteIcon from "components/Icons/NoteIcon"; +import SuccessIcon from "components/Icons/SuccessIcon"; export default function OrderPage() { const { t } = useTranslation(); const { orderId } = useParams(); + const navigate = useNavigate(); const { isRTL } = useAppSelector((state) => state.locale); const { restaurant } = useAppSelector((state) => state.order); - const navigate = useNavigate(); const hasRefetchedRef = useRef(false); const [isOpen, setIsOpen] = useState(false); const [isRateOrderOpen, setIsRateOrderOpen] = useState(false); @@ -57,6 +69,9 @@ export default function OrderPage() { skip: !restaurantSubdomain, }, ); + const hasClosedStatus = orderDetails?.status?.some( + (status) => status?.alias === "closed", + ); // Reset refetch flag when orderId changes useEffect(() => { @@ -66,10 +81,6 @@ export default function OrderPage() { // Refetch restaurant details when order status has alias "closed" useEffect(() => { if (orderDetails?.status && !hasRefetchedRef.current) { - const hasClosedStatus = orderDetails.status.some( - (status) => status?.alias === "closed", - ); - if (hasClosedStatus && restaurantSubdomain) { refetchRestaurantDetails(); hasRefetchedRef.current = true; @@ -220,136 +231,182 @@ export default function OrderPage() { return ( <> - {t("order.title")} -
- -
- -
- - {t("order.yourOrderFromFascanoRestaurant")} - -
- - {" "} - {isRTL ? orderDetails?.restaurantAR : orderDetails?.restaurant} - + +
+ + {t("order.yourOrderFromFascanoRestaurant")} + +
+ + {" "} + {isRTL + ? orderDetails?.restaurantAR + : orderDetails?.restaurant} + +
-
- {isInProgress ? ( - - -
- ( -
- + +
+ ( +
- {t("order.remainingTime")} - - {formatTimer(remainingSeconds)} -
- )} - strokeColor="#FFB700" - size={200} - type="dashboard" - /> -
- - - ) : ( - - )} + + {t("order.remainingTime")} + + {formatTimer(remainingSeconds)} +
+ )} + strokeColor="#FFB700" + size={200} + type="dashboard" + /> +
+ + + ) : ( + + )} -
- - {t("order.inProgressOrder")} (1) - -
- - - #{orderDetails?.order.id} - - - - ordered :- Today -{" "} - {dayjs(orderDetails?.status[0]?.pivot?.created_at).format( - "h:mm A", - )} - +
+ + {t("order.inProgressOrder")} (1) + +
+ + + #{orderDetails?.order.id} + + + + ordered :- Today -{" "} + {dayjs(orderDetails?.status[0]?.pivot?.created_at).format( + "h:mm A", + )} + +
+ + + +
- + {!hasClosedStatus && ( +
+ +
+ + {t( + "order.aStaffMemberWillCollectTheCashFromYouAtYourTable", + )} + + + {t("order.callWaiter")} + +
+
+ )} + {hasClosedStatus && ( +
+ + + {t("order.cashPaymentConfirmed")} + +
+ )} + - -
- + - - - {/* @@ -398,113 +455,98 @@ export default function OrderPage() {
*/} - + - + - navigate(`/${restaurant?.subdomain}`)} - > -
setIsOpen(true)} > - - - - {isRTL ? restaurant?.nameAR : restaurant?.restautantName} - +
+ + {t("order.inviteToBill")} + +
+
+ - {isRTL ? ( - - ) : ( - - )} -
- + setIsOpen(false)} /> - setIsOpen(true)} - > -
-
- setIsRateOrderOpen(true)} + > +
- {t("order.inviteToBill")} - -
-
- +
+ + + {t("order.rateOrder")} + +
- setIsOpen(false)} /> + {isRTL ? ( + + ) : ( + + )} +
+ + )} - setIsRateOrderOpen(true)} - > -
setIsRateOrderOpen(false)} + /> + + + + +
- - - setIsRateOrderOpen(false)} - /> - - -
+ {t("order.newOrder")} + + + ); }