Show end of ACH account numbers

hackclub · Mar 21, 2024 · 070256a · 070256a
1 parent 7db63d1
commit 070256a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/src/components/transaction/TransactionDetails.tsx b/src/components/transaction/TransactionDetails.tsx
@@ -13,6 +13,7 @@ interface Detail {
   value: ReactElement | string;
   onPress?: () => void;
   pressIconName?: React.ComponentProps<typeof Ionicons>["name"];
+  fontFamily?: string;
 }
 
 export function descriptionDetail(
@@ -35,14 +36,40 @@ export function descriptionDetail(
   };
 }
 
-export default function TransactionDetails({ details }: { details: Detail[] }) {
+export default function TransactionDetails({
+  details,
+  title,
+}: {
+  details: Detail[];
+  title?: string;
+}) {
   const { colors: themeColors } = useTheme();
 
   return (
     <View style={{ marginBottom: 30 }}>
+      {title && (
+        <Text
+          style={{
+            color: palette.muted,
+            fontSize: 12,
+            textTransform: "uppercase",
+            marginBottom: 5,
+            marginLeft: 10,
+          }}
+        >
+          {title}
+        </Text>
+      )}
+
       {details.map(
         (
-          { label, value, onPress, pressIconName = "chevron-forward-outline" },
+          {
+            label,
+            value,
+            onPress,
+            pressIconName = "chevron-forward-outline",
+            fontFamily,
+          },
           index,
         ) => (
           <TouchableHighlight
@@ -77,6 +104,7 @@ export default function TransactionDetails({ details }: { details: Detail[] }) {
                     overflow: "hidden",
                     flex: 1,
                     textAlign: "right",
+                    fontFamily,
                   }}
                   selectable
                 >

diff --git a/src/components/transaction/types/AchTransferTransaction.tsx b/src/components/transaction/types/AchTransferTransaction.tsx
@@ -50,6 +50,7 @@ export default function AchTransferTransaction({
       />
 
       <TransactionDetails
+        title="ACH Transfer"
         details={[
           { label: "Name", value: ach_transfer.recipient_name },
           ...(ach_transfer.recipient_email
@@ -60,6 +61,11 @@ export default function AchTransferTransaction({
                 },
               ]
             : []),
+          {
+            label: "Account",
+            value: `••••${ach_transfer.account_number_last4}`,
+            fontFamily: "JetBrains Mono",
+          },
           { label: "Bank name", value: ach_transfer.bank_name },
         ]}
       />

diff --git a/src/components/transaction/types/CardChargeTransaction.tsx b/src/components/transaction/types/CardChargeTransaction.tsx
@@ -39,7 +39,9 @@ export default function CardChargeTransaction({
       <View style={{ flexDirection: "column", alignItems: "center" }}>
         <TransactionTitle badge={badge}>
           {renderMoney(Math.abs(transaction.amount_cents))}{" "}
-          <Muted>charge at</Muted>{"\n"}{merchant.smart_name}
+          <Muted>charge at</Muted>
+          {"\n"}
+          {merchant.smart_name}
         </TransactionTitle>
       </View>
       <TransactionDetails

diff --git a/src/lib/types/Transaction.ts b/src/lib/types/Transaction.ts
@@ -109,6 +109,7 @@ export interface AchTransfer {
   recipient_name: string;
   recipient_email?: string;
   bank_name: string;
+  account_number_last4: string;
   description: string;
   sender: User;
 }