split bill: reorder flow

This commit is contained in:
2025-12-26 00:25:26 +03:00
parent 86c12e2c53
commit b261f3508f
12 changed files with 656 additions and 551 deletions

View File

@@ -55,126 +55,123 @@ export function SplitBillChoiceBottomSheet({
return (
<>
<ProBottomSheet
isOpen={isOpen}
onClose={handleCancel}
title={t("splitBill.title")}
showCloseButton={false}
initialSnap={1}
height={290}
snapPoints={[290]}
>
<div
style={{
marginTop: 20,
display: "flex",
flexDirection: "column",
gap: 10,
}}
<ProBottomSheet
isOpen={isOpen}
onClose={handleCancel}
title={t("splitBill.title")}
showCloseButton={false}
initialSnap={1}
height={290}
snapPoints={[290]}
>
<Card
className={styles.backToHomePage}
onClick={handleCustomAmountClick}
<div
style={{
marginTop: 20,
display: "flex",
flexDirection: "column",
gap: 10,
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: 1,
}}
<Card
className={styles.backToHomePage}
onClick={handleCustomAmountClick}
>
<ProTitle
level={5}
<div
style={{
fontSize: 14,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: 1,
}}
>
{t("splitBill.payAsCustomAmount")}
</ProTitle>
<ProTitle
level={5}
style={{
fontSize: 14,
}}
>
{t("splitBill.payAsCustomAmount")}
</ProTitle>
{isRTL ? (
<BackIcon className={styles.serviceIcon} />
) : (
<NextIcon className={styles.serviceIcon} />
)}
</div>
</Card>
{isRTL ? (
<BackIcon className={styles.serviceIcon} />
) : (
<NextIcon className={styles.serviceIcon} />
)}
</div>
</Card>
<Card
className={styles.backToHomePage}
onClick={handleEqualityClick}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: 1,
}}
>
<ProTitle
level={5}
<Card className={styles.backToHomePage} onClick={handleEqualityClick}>
<div
style={{
fontSize: 14,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: 1,
}}
>
{t("splitBill.divideTheBillEqually")}
</ProTitle>
<ProTitle
level={5}
style={{
fontSize: 14,
}}
>
{t("splitBill.divideTheBillEqually")}
</ProTitle>
{isRTL ? (
<BackIcon className={styles.serviceIcon} />
) : (
<NextIcon className={styles.serviceIcon} />
)}
</div>
</Card>
{isRTL ? (
<BackIcon className={styles.serviceIcon} />
) : (
<NextIcon className={styles.serviceIcon} />
)}
</div>
</Card>
<Card
className={styles.backToHomePage}
onClick={handlePayForItemsClick}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: 1,
}}
<Card
className={styles.backToHomePage}
onClick={handlePayForItemsClick}
>
<ProTitle
level={5}
<div
style={{
fontSize: 14,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
marginTop: 1,
}}
>
{t("splitBill.payForYourItems")}
</ProTitle>
<ProTitle
level={5}
style={{
fontSize: 14,
}}
>
{t("splitBill.payForYourItems")}
</ProTitle>
{isRTL ? (
<BackIcon className={styles.serviceIcon} />
) : (
<NextIcon className={styles.serviceIcon} />
)}
</div>
</Card>
</div>
</ProBottomSheet>
{isRTL ? (
<BackIcon className={styles.serviceIcon} />
) : (
<NextIcon className={styles.serviceIcon} />
)}
</div>
</Card>
</div>
</ProBottomSheet>
<CustomAmountChoiceBottomSheet
isOpen={isCustomAmountOpen}
onClose={() => setIsCustomAmountOpen(false)}
/>
<CustomAmountChoiceBottomSheet
isOpen={isCustomAmountOpen}
onClose={() => setIsCustomAmountOpen(false)}
/>
<EqualltyChoiceBottomSheet
isOpen={isEqualityOpen}
onClose={() => setIsEqualityOpen(false)}
/>
<EqualltyChoiceBottomSheet
isOpen={isEqualityOpen}
onClose={() => setIsEqualityOpen(false)}
/>
<PayForYourItemsChoiceBottomSheet
isOpen={isPayForItemsOpen}
onClose={() => setIsPayForItemsOpen(false)}
/>
<PayForYourItemsChoiceBottomSheet
isOpen={isPayForItemsOpen}
onClose={() => setIsPayForItemsOpen(false)}
/>
</>
);
}