pay flow: initial commit

src/pages/checkout/components/BriefMenu.tsx

@@ -3,16 +3,19 @@ import ArabicPrice from "components/ArabicPrice";
 import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
 import { selectCart } from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types.ts";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { Link, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
+import { colors } from "ThemeConstants";
 import styles from "../../address/address.module.css";
-import { OrderType } from "pages/checkout/hooks/types.ts";
 
 export default function BriefMenu() {
   const { tables, items } = useAppSelector(selectCart);
   const { t } = useTranslation();
   const { orderType } = useAppSelector(selectCart);
+  const { subdomain } = useParams();
 
   const menuItems = useMemo(
     () =>
@@ -46,7 +49,18 @@ export default function BriefMenu() {
   );
 
   return (
-    <ProInputCard title={cardTitle}>
+    <ProInputCard
+      title={cardTitle}
+      titleRight={
+        orderType === OrderType.Pay ? (
+          <Link to={`/${subdomain}/menu?orderType=${OrderType.Pay}`} style={{ textDecoration: "none" }}>
+            <ProText style={{ color: colors.primary }}>
+              {t("menu.title")}
+            </ProText>
+          </Link>
+        ) : undefined
+      }
+    >
       <div className={styles.briefMenuContainer}>{menuItems}</div>
     </ProInputCard>
   );