Skip to content

B
beasy-mobile
Commit b4bb8cfc by G
Options

all are type checked as part of the stack navigation. screens beside the home of…

all are type checked as part of the stack navigation. screens beside the home of the stack include a go back button
parent 3ef42129
Showing with 61 additions and 46 deletions
src/screens/HomePageWithPaymentOptions.tsx
import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import BalanceContainer from "@components/BalanceContainer";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import NotificationIconButton from "@components/NotificationIconButton";
......@@ -7,60 +8,66 @@ import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { SafeAreaView } from "react-native-safe-area-context";
const HomePageWithPaymentOptions = () => {
return (
<BackgroundGreenWhiteContentArea>
<SafeAreaView>
<Box style={{ height: "100%" }}>
<Box
px={"l"}
flexDirection={"row"}
justifyContent={"space-between"}
alignItems={"center"}
>
<BeasyLogoIcon />
<NotificationIconButton />
</Box>
<Box height={150} alignItems={"center"} justifyContent={"center"}>
<BalanceContainer balance={78000} label="Total des ventes" />
</Box>
<Box flex={1} p={"l"}>
<Box height={100}>
<Text fontSize={20} fontWeight={"bold"}>
Méthode de paiement
</Text>
</Box>
const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWithPaymentOptions"> =
({ navigation }) => {
return (
<BackgroundGreenWhiteContentArea>
<SafeAreaView>
<Box style={{ height: "100%" }}>
<Box
px={"l"}
flexDirection={"row"}
style={{ flexWrap: "wrap" }}
gap={"s"}
justifyContent={"space-between"}
alignItems={"center"}
>
{/* Payment Modes */}
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"OrangeMoney"} />
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
<BeasyLogoIcon />
<NotificationIconButton />
</Box>
<Box height={150} alignItems={"center"} justifyContent={"center"}>
<BalanceContainer balance={78000} label="Total des ventes" />
</Box>
<Box flex={1} p={"l"}>
<Box height={100}>
<Text fontSize={20} fontWeight={"bold"}>
Méthode de paiement
</Text>
</Box>
<Box
flexDirection={"row"}
style={{ flexWrap: "wrap" }}
gap={"s"}
justifyContent={"space-between"}
>
{/* Payment Modes */}
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption
onPress={() =>
navigation.navigate("paymentAmountInputScreen")
}
paymentMethod={"OrangeMoney"}
/>
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"MtnMoney"} />
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"MoovMoney"} />
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"WaveMoney"} />
</Box>
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
<Box style={{ width: "48%", height: "26%" }}>
<PaymentOption onPress={() => {}} paymentMethod={"VisaCard"} />
</Box>
</Box>
</Box>
</Box>
</Box>
</SafeAreaView>
</BackgroundGreenWhiteContentArea>
);
};
</SafeAreaView>
</BackgroundGreenWhiteContentArea>
);
};
export default HomePageWithPaymentOptions;
src/screens/NumberAndOtpForPaymentScreen.tsx
import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Button from "@components/Button";
import Input from "@components/Input";
......@@ -7,7 +8,9 @@ import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import { SafeAreaView } from "react-native-safe-area-context";
const NumberAndOtpForPaymentScreen = () => {
const NumberAndOtpForPaymentScreen: PaymentStackScreenComponentProps<
"numberAndOtpForPaymentScreen"
> = ({ navigation }) => {
return (
<BackgroundGreenWhiteContentArea>
<SafeAreaView>
......
src/screens/PaymentAmountInputScreen.tsx
import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import BalanceContainer from "@components/BalanceContainer";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Button from "@components/Button";
import GoBackIconButton from "@components/GoBackIconButton";
import Input from "@components/Input";
import BackgroundGreenWhiteContentArea from "@components/backgrounds/BackgroundGreenWhiteContentArea";
import Box from "@components/bases/Box";
import { SafeAreaView } from "react-native-safe-area-context";
const PaymentAmountInputScreen = () => {
const PaymentAmountInputScreen: PaymentStackScreenComponentProps<"paymentAmountInputScreen"> = ({
navigation,
}) => {
return (
<BackgroundGreenWhiteContentArea>
<SafeAreaView>
......@@ -19,6 +23,7 @@ const PaymentAmountInputScreen = () => {
mb={"l"}
>
<BeasyLogoIcon />
<GoBackIconButton onPress={() => navigation.goBack()} />
</Box>
<Box height={150} alignItems={"center"} justifyContent={"center"}>
<BalanceContainer balance={78000} label="Total des ventes" />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment