split bill: reorder flow

src/pages/order/order.module.css

@@ -244,4 +244,19 @@
   height: 24px;
 }
 
+.inviteToBillCard {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 12px 18px !important;
+  row-gap: 10px;
+  transition: all 0.3s ease;
+  border-radius: 50px;
+}
 
+.inviteToBillCard :global(.ant-card-body) {
+  padding: 0px !important;
+  text-align: start;
+  width: 100%;
+}

src/pages/order/page.tsx

@@ -7,7 +7,6 @@ import TimeIcon from "components/Icons/order/TimeIcon";
 import OrderDishIcon from "components/Icons/OrderDishIcon";
 import PaymentDetails from "components/PaymentDetails/PaymentDetails";
 import ProHeader from "components/ProHeader/ProHeader";
-import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import dayjs from "dayjs";
@@ -24,6 +23,8 @@ import styles from "./order.module.css";
 import BackIcon from "components/Icons/BackIcon";
 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";
 
 export default function OrderPage() {
   const { t } = useTranslation();
@@ -32,6 +33,7 @@ export default function OrderPage() {
   const { restaurant } = useAppSelector((state) => state.order);
   const navigate = useNavigate();
   const hasRefetchedRef = useRef(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const { data: orderDetails } = useGetOrderDetailsQuery(
     {
@@ -346,7 +348,7 @@ export default function OrderPage() {
 
         <Ads2 />
 
-        <ProInputCard
+        {/* <ProInputCard
           title={
             <div style={{ marginBottom: 7 }}>
               <ProText style={{ fontSize: "1rem" }}>
@@ -393,7 +395,9 @@ export default function OrderPage() {
               </div>
             ))}
           </div>
-        </ProInputCard>
+        </ProInputCard> */}
+
+        <BriefMenuCard />
 
         <PaymentDetails order={orderDetails?.order} />
 
@@ -439,6 +443,34 @@ export default function OrderPage() {
           </div>
         </Card>
 
+        <Card
+          className={styles.inviteToBillCard}
+          onClick={() => setIsOpen(true)}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "center",
+              marginTop: 1,
+            }}
+          >
+            <div style={{ display: "flex", flexDirection: "row", gap: 10 }}>
+              <ProTitle
+                level={5}
+                style={{
+                  marginTop: 1,
+                  fontSize: 14,
+                }}
+              >
+                {t("order.inviteToBill")}
+              </ProTitle>
+            </div>
+          </div>
+        </Card>
+
+        <QRBottomSheet isOpen={isOpen} onClose={() => setIsOpen(false)} />
+
         <RateBottomSheet />
 
         <CancelOrderBottomSheet />