checkout: UI + styles enhacnements

src/pages/checkout/components/CheckoutButton.tsx

@@ -58,6 +58,17 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
     [orderType],
   );
 
+  const getSplitButtonTitle = useMemo(() => {
+    if (selectedSplitWay === "customAmount") {
+      return t("splitBill.customAmount");
+    } else if (selectedSplitWay === "equality") {
+      return t("splitBill.divideEqually");
+    } else if (selectedSplitWay === "payForItems") {
+      return t("splitBill.payForItems");
+    }
+    return t("checkout.splitBill");
+  }, [selectedSplitWay, t]);
+
   return (
     <>
       <Layout.Footer className={styles.checkoutButtonContainer}>
@@ -66,9 +77,7 @@ export default function CheckoutButton({ form }: { form: FormInstance }) {
             className={styles.splitBillButton}
             onClick={handleSplitBillClick}
           >
-            {selectedSplitWay
-              ? t("checkout.removeSplitBill")
-              : t("checkout.splitBill")}
+            {getSplitButtonTitle}
           </Button>
         )}
 

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

@@ -1,3 +1,5 @@
 .customerInformationCard {
-  height: 215px !important;
-}
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}

src/pages/checkout/components/CustomerInformationCard.tsx

@@ -16,12 +16,9 @@ export default function CustomerInformationCard() {
   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">
+        <ProInputCard title={t("checkout.customerInformation")}>
+          <div className={styles.customerInformationCard}>
+            <Form.Item name="customerName">
               <Input
                 placeholder={t("checkout.customerName")}
                 size="large"
@@ -33,9 +30,7 @@ export default function CustomerInformationCard() {
                 }}
               />
             </Form.Item>
-          </div>
-          <div style={{ position: "relative", top: -35 }}>
-            <ProPhoneInput label={t("login.phone")} propName="phone" />
+            <ProPhoneInput propName="phone" />
           </div>
         </ProInputCard>
       </>