Skip to content

B
beasy-mobile
Commit a05da542 by G
Options

restyle a little bit around the use of cardvariant, dimensions and background

parent 209a1ea6
Showing with 43 additions and 39 deletions
src/screens/HomePageWithPaymentOptions.tsx
import type { PaymentStackScreenComponentProps } from "@/navigations/Types"; import type { PaymentStackScreenComponentProps } from "@/navigations/Types";
import getPaymentTypes from "@/utils/requests/getPaymentTypes"; import getPaymentTypes from "@/utils/requests/getPaymentTypes";
import BalanceContainer from "@components/BalanceContainer";
import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon"; import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
import PaymentOption from "@components/PaymentOption"; import PaymentOption from "@components/PaymentOption";
import Box from "@components/bases/Box"; import Box from "@components/bases/Box";
...@@ -35,59 +36,62 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith ...@@ -35,59 +36,62 @@ const HomePageWithPaymentOptions: PaymentStackScreenComponentProps<"homePageWith
); );
return ( return (
// <BeasyDefaultBackgroundWrapper>
<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight> <WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
<Box style={{ height: "100%" }} flexDirection={"column"}> <Box style={{ height: "100%" }} flexDirection={"column"}>
<BarWithBeasyAndNotificationsIcon /> <BarWithBeasyAndNotificationsIcon />
<Card <Card
variant={"curvedTopContainer"} variant={"curvedTopContainer"}
height={Dimensions.get("window").height / 2 + 150} height={Dimensions.get("window").height / 2 + 150}
// marginTop={"auto"}
style={{ marginTop: "auto" }} style={{ marginTop: "auto" }}
padding={"l"} padding={"l"}
> >
<Box height={100}> <Box position={"relative"} top={-120}>
<Text fontSize={20} fontWeight={"bold"}> <Box alignSelf={"center"}>
Types de paiement <BalanceContainer balance={78000} label="Total des ventes" />
</Text> </Box>
</Box>
<Box marginVertical={"l"}>
<Text fontSize={20} fontWeight={"bold"}>
Types de paiement
</Text>
</Box>
<Box <Box
flex={1} flex={1}
flexDirection={"row"} flexDirection={"row"}
justifyContent={"space-between"} justifyContent={"space-between"}
flexWrap={"wrap"} flexWrap={"wrap"}
rowGap={"m"} rowGap={"m"}
> >
{isLoading && ( {isLoading && (
<Box flex={1}> <Box flex={1}>
<Text textAlign={"center"}> <Text textAlign={"center"}>
Chargement des méthodes de paiement... Chargement des méthodes de paiement...
</Text> </Text>
</Box> </Box>
)} )}
{!isLoading && {!isLoading &&
!error && !error &&
paymentTypesWithActiveStatus.map((paymentType) => ( paymentTypesWithActiveStatus.map((paymentType) => (
<PaymentOptionContainer key={paymentType.id}> <PaymentOptionContainer key={paymentType.id}>
<PaymentOption <PaymentOption
onPress={() => onPress={() =>
navigation.navigate("paymentAmountInputScreen", { navigation.navigate(
paymentType: paymentType.code, "paymentAmountInputScreen",
}) {
} paymentType: paymentType.code,
paymentMethod={paymentType.code} },
/> )
</PaymentOptionContainer> }
))} paymentMethod={paymentType.code}
/>
</PaymentOptionContainer>
))}
</Box>
</Box> </Box>
</Card> </Card>
{/* <Box height={150} alignItems={"center"} justifyContent={"center"}>
<BalanceContainer balance={78000} label="Total des ventes" />
</Box> */}
</Box> </Box>
</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight> </WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
// </BeasyDefaultBackgroundWrapper>
); );
}; };
......
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