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>
         )}