a sample page for payment result

src/screens/PaymentResultScreen.tsx

-import { Text, View } from "react-native";
+import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
+import BeasyLogoIcon from "@components/BeasyLogoIcon";
+import Button from "@components/Button";
+import GoBackIconButton from "@components/GoBackIconButton";
+import BackgroundDefault from "@components/backgrounds/BackgroundDefault";
+import Box from "@components/bases/Box";
+import Text from "@components/bases/Text";
+import { LOG } from "@logger";
+// import { Text } from "react-native";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
 
-const PaymentResultScreen = () => {
+const log = LOG.extend("PaymentResultScreen");
+
+const PaymentResultScreen: PaymentStackScreenComponentProps<"paymentResultScreen"> = ({
+	route,
+	navigation,
+}) => {
+	const insets = useSafeAreaInsets();
+	log.debug("insets", insets);
 	return (
-		<View>
-			<Text>PaymentResultScreen</Text>
-		</View>
+		<BackgroundDefault>
+			<SafeAreaView edges={["top", "left", "right"]}>
+				<Box
+					style={{
+						height: "100%",
+						width: "100%",
+						// marginTop: insets.top,
+					}}
+				>
+					<Box
+						px={"l"}
+						flexDirection={"row"}
+						justifyContent={"space-between"}
+						alignItems={"center"}
+						mb={"m"}
+					>
+						<BeasyLogoIcon />
+						<GoBackIconButton onPress={() => navigation.goBack()} />
+					</Box>
+					<Box
+						flex={1}
+						backgroundColor={"white"}
+						borderRadius={20}
+						p={"l"}
+						flexDirection={"column"}
+						gap={"l"}
+					>
+						<Text variant={"secondary"} fontWeight={"bold"} textAlign={"center"}>
+							Transactions effectué avec succès !
+						</Text>
+						<Button
+							width={200}
+							alignSelf={"center"}
+							variant={"full"}
+							textVariants={"white"}
+							label={"Imprimer le réçu"}
+							onPress={() => {}}
+						/>
+						<Box backgroundColor={"lightGray"} flex={1} borderRadius={20} p={"l"}>
+							<Box
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								borderBottomColor={"gray"}
+								borderBottomWidth={1}
+								py={"m"}
+							>
+								<Text fontWeight={"bold"}>Caisse</Text>
+								<Text variant={"black"}>00147C</Text>
+							</Box>
+							<Box
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								borderBottomColor={"gray"}
+								borderBottomWidth={1}
+								py={"m"}
+							>
+								<Text fontWeight={"bold"}>Reference</Text>
+								<Text variant={"black"}>CP...</Text>
+							</Box>
+							<Box
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								borderBottomColor={"gray"}
+								borderBottomWidth={1}
+								py={"m"}
+							>
+								<Text fontWeight={"bold"}>Mode de paiement</Text>
+								<Text variant={"black"}>Orange</Text>
+							</Box>
+							<Box
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								borderBottomColor={"gray"}
+								borderBottomWidth={1}
+								py={"m"}
+							>
+								<Text fontWeight={"bold"}>Infos client</Text>
+								<Text variant={"black"}>Dogeless Miso</Text>
+							</Box>
+							<Box
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								borderBottomColor={"gray"}
+								borderBottomWidth={1}
+								py={"m"}
+							>
+								<Text fontWeight={"bold"}>Montant</Text>
+								<Text variant={"black"}>10</Text>
+							</Box>
+							<Box
+								flexDirection={"row"}
+								justifyContent={"space-between"}
+								borderBottomColor={"gray"}
+								borderBottomWidth={1}
+								py={"m"}
+							>
+								<Text fontWeight={"bold"}>N° Client</Text>
+								<Text variant={"black"}>Dogeless Misso</Text>
+							</Box>
+						</Box>
+					</Box>
+				</Box>
+			</SafeAreaView>
+		</BackgroundDefault>
 	);
 };