checkout: reafactor UI

src/pages/checkout/components/BriefMenuCard.tsx

@@ -0,0 +1,55 @@
+import NextIcon from "components/Icons/NextIcon";
+import InvoiceIcon from "components/Icons/order/InvoiceIcon";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProText from "components/ProText";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import { selectCart } from "features/order/orderSlice";
+import { useNavigate, useParams } from "react-router-dom";
+
+export default function BriefMenuCard() {
+  const { t } = useTranslation();
+  const { items } = useAppSelector(selectCart);
+  const totalItems = items.length;
+  const { subdomain } = useParams();
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <ProInputCard
+        title={t("checkout.itemsSummary")}
+        dividerStyle={{ margin: "5px 0 0 0" }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            padding: "16px 0",
+          }}
+          onClick={() => {
+            navigate(`/${subdomain}/cart`);
+          }}
+        >
+          <ProText
+            style={{
+              fontWeight: 400,
+              fontStyle: "Regular",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              color: "#777580",
+              cursor: "pointer",
+            }}
+          >
+            <span style={{ marginRight: 5, position: "relative", top: 3.5 }}>
+              <InvoiceIcon />
+            </span>
+            {t("checkout.viewOrder")} ( {totalItems} {t("cart.items")} )
+          </ProText>
+          <NextIcon />
+        </div>
+      </ProInputCard>
+    </>
+  );
+}