feat: Transaction history screen with filters and performant scrollView using Flashlist.

src/features/pay/api.ts

@@ -5,6 +5,7 @@ import type {
 	OmInitializationPayload as OmTransactionInitializationPayload,
 	OmInitializationResponse as OmTransactionInitializationResponse,
 	PaymentType,
+	Transaction,
 	WaveInitializationPayload,
 	WaveTransactionInitilizationResponse,
 } from "./types";
@@ -54,3 +55,7 @@ export const waveInitializeTransaction = (payload: WaveInitializationPayload) =>
 export const waveGetTransactionStatus = (id: string) => {
 	return axiosInstance.get<WaveTransactionInitilizationResponse>(`/wave-session/${id}/`);
 };
+
+export const getTransactions = () => {
+	return axiosInstance.get<DjangoPaginated<Transaction[]>>("/transactions/");
+};

src/features/pay/components/TransactionItem.tsx

+import moment from "moment";
+import "moment/locale/fr";
+import { asp as g } from "@asp/asp";
+import type { FC } from "react";
+import { Text, View } from "react-native";
+import type { Transaction } from "../types";
+import PaymentType from "./PaymentType";
+
+moment.locale("fr");
+
+export const TransactionItem: FC<{ transaction: Transaction }> = ({ transaction }) => {
+	const { type_paiement_label, reference, date, montant, status } = transaction;
+	const dateObject = Date.parse(date);
+	const color = status === "SUCCESS" ? "green" : status === "INITIATED" ? "orange" : "red";
+	return (
+		<View
+			style={[
+				g.w_full,
+				g.p_sm,
+				g.flex_row,
+				g.gap_sm,
+				g.rounded_sm,
+				g.shadow_elevated,
+				g.justify_between,
+				{ backgroundColor: "white" },
+			]}
+		>
+			<View style={[g.flex_row, g.flex_1, g.gap_sm]}>
+				<View style={[g.rounded_md, g.overflow_hidden, { height: 50, width: 50 }]}>
+					<PaymentType
+						style={{ height: "100%", aspectRatio: 1 }}
+						type={type_paiement_label}
+					/>
+				</View>
+				<View style={[g.flex_1, { height: 50 }]}>
+					<Text>{reference}</Text>
+					<Text>{moment(dateObject).fromNow()}</Text>
+				</View>
+			</View>
+
+			<View style={{ height: 50 }}>
+				<Text style={{ color: color }}>{montant}</Text>
+			</View>
+		</View>
+	);
+};

src/features/pay/types.ts

@@ -89,3 +89,19 @@ export interface WaveTransactionInitilizationResponse {
 	when_created: string;
 	when_expires: string;
 }
+
+export type Transaction = {
+	type_paiement: number;
+	type_paiement_label: PaymentTypeCode;
+	marchand: string;
+	marchand_name: string;
+	service: string;
+	montant: number;
+	date: string;
+	commentaire: string;
+	etat: boolean;
+	status: "SUCCESS" | "INITIATED" | "FAILED";
+	reference: string;
+	transaction_id: number;
+	marchand_code: string;
+};