cart & checkout: UI enhacnements

src/pages/checkout/components/CustomerInformationCard.module.css

@@ -0,0 +1,3 @@
+.customerInformationCard {
+  height: 215px !important;
+}

src/pages/checkout/components/CustomerInformationCard.tsx

@@ -0,0 +1,44 @@
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProPhoneInput from "components/ProPhoneInput";
+import { selectCart, updateCustomerName } from "features/order/orderSlice";
+import { OrderType } from "pages/checkout/hooks/types.ts";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { Form, Input } from "antd";
+import styles from "./CustomerInformationCard.module.css";
+
+export default function CustomerInformationCard() {
+  const { t } = useTranslation();
+  const { orderType } = useAppSelector(selectCart);
+  const dispatch = useAppDispatch();
+  const customerName = useAppSelector((state) => state.order.customerName);
+
+  return (
+    orderType !== OrderType.Gift && (
+      <>
+        <ProInputCard
+          title={t("checkout.customerInformation")}
+          className={styles.customerInformationCard}
+        >
+          <div style={{ position: "relative", top: -25 }}>
+            <Form.Item label={t("checkout.customerName")} name="customerName">
+              <Input
+                placeholder={t("checkout.customerName")}
+                size="large"
+                autoFocus={false}
+                style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+                value={customerName}
+                onChange={(e) => {
+                  dispatch(updateCustomerName(e.target.value));
+                }}
+              />
+            </Form.Item>
+          </div>
+          <div style={{ position: "relative", top: -30 }}>
+            <ProPhoneInput label={t("login.phone")} propName="phone" />
+          </div>
+        </ProInputCard>
+      </>
+    )
+  );
+}

src/pages/checkout/components/PhoneCard.module.css

@@ -1,3 +0,0 @@
-.phoneCard {
-  height: 150px !important;
-}

src/pages/checkout/components/PhoneCard.tsx

@@ -1,27 +0,0 @@
-import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import ProPhoneInput from "components/ProPhoneInput";
-import { selectCart } from "features/order/orderSlice";
-import { OrderType } from "pages/checkout/hooks/types.ts";
-import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
-import styles from "./PhoneCard.module.css";
-
-export default function PhoneCard() {
-  const { t } = useTranslation();
-  const { orderType } = useAppSelector(selectCart);
-
-  return (
-    orderType !== OrderType.Gift && (
-      <>
-        <ProInputCard
-          title={t("checkout.phoneNumber")}
-          className={styles.phoneCard}
-        >
-          <div style={{ position: "relative", top: -20 }}>
-            <ProPhoneInput label={t("login.phone")} propName="phone" />
-          </div>
-        </ProInputCard>
-      </>
-    )
-  );
-}

src/pages/checkout/page.tsx

@@ -15,8 +15,8 @@ import RewardWaiterCard from "pages/cart/components/RewardWaiterCard";
 import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
 import CouponCard from "pages/cart/components/CouponCard";
-import PhoneCard from "./components/PhoneCard";
 import BriefMenuCard from "./components/BriefMenuCard";
+import CustomerInformationCard from "./components/CustomerInformationCard";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
@@ -37,7 +37,7 @@ export default function CheckoutPage() {
           <ProHeader>{t("checkout.title")}</ProHeader>
           <Layout.Content className={styles.checkoutContainer}>
             <PaymentMethods />
-            {!token && <PhoneCard />}
+            {!token && <CustomerInformationCard />}
             <AddressSummary />
             {orderType === OrderType.ToRoom && (
               <InputCard