Receiver contact info: support phone number and email (#150)

src/components/ReceiversTable.tsx

@@ -1,5 +1,9 @@
 import { Card, Link, Notification } from "@stellar/design-system";
 import { formatDateTime } from "helpers/formatIntlDateTime";
+import {
+  getReceiverContactInfoTitle,
+  renderReceiverContactInfoItems,
+} from "helpers/receiverContactInfo";
 import { useSort } from "hooks/useSort";
 import { MultipleAmounts } from "components/MultipleAmounts";
 import { Table } from "components/Table";
@@ -83,7 +87,7 @@ export const ReceiversTable: React.FC<ReceiversTableProps> = ({
             {/* <Table.HeaderCell width="1rem">
             <Checkbox id="receivers-select-all" fieldSize="xs" />
           </Table.HeaderCell> */}
-            <Table.HeaderCell width="7.5rem">Phone number</Table.HeaderCell>
+            <Table.HeaderCell width="7.5rem">Contact info</Table.HeaderCell>
             <Table.HeaderCell width="12rem">
               Wallet provider(s)
             </Table.HeaderCell>
@@ -113,9 +117,12 @@ export const ReceiversTable: React.FC<ReceiversTableProps> = ({
                 {/* <Table.BodyCell width="1rem">
                 <Checkbox id={`receiver-${d.id}`} fieldSize="xs" />
               </Table.BodyCell> */}
-                <Table.BodyCell title={d.phoneNumber} width="7.5rem">
+                <Table.BodyCell
+                  title={getReceiverContactInfoTitle(d.phoneNumber, d.email)}
+                  width="7.5rem"
+                >
                   <Link onClick={(event) => onReceiverClicked(event, d.id)}>
-                    {d.phoneNumber}
+                    {renderReceiverContactInfoItems(d.phoneNumber, d.email)}
                   </Link>
                 </Table.BodyCell>
                 <Table.BodyCell

src/helpers/formatPaymentReceiver.ts

@@ -11,6 +11,7 @@ export const formatPaymentReceiver = (
   return {
     id: receiver.id,
     phoneNumber: receiver.phone_number,
+    email: receiver.email,
     walletAddress: paymentWallet?.stellar_address || "",
     provider: paymentWallet?.wallet.name || "",
     totalPaymentsCount: Number(receiver.total_payments),

src/helpers/formatReceivers.ts

@@ -4,6 +4,7 @@ export const formatReceivers = (receivers: ApiReceiver[]): Receiver[] => {
   return receivers.map((r) => ({
     id: r.id,
     phoneNumber: r.phone_number,
+    email: r.email,
     walletProvider: r.wallets.map((w) => w.wallet.name),
     walletsRegisteredCount: Number(r.registered_wallets),
     totalPaymentsCount: Number(r.total_payments),

src/helpers/receiverContactInfo.tsx

@@ -0,0 +1,23 @@
+export const getReceiverContactInfoTitle = (
+  phoneNumber?: string,
+  email?: string,
+) => {
+  const array = [phoneNumber, email].filter((i) => Boolean(i));
+  return array.join(" | ");
+};
+
+export const renderReceiverContactInfoItems = (
+  phoneNumber?: string,
+  email?: string,
+) => {
+  return (
+    <>
+      {phoneNumber ? (
+        <span className="ReceiverContactInfo__item">{phoneNumber}</span>
+      ) : null}
+      {email ? (
+        <span className="ReceiverContactInfo__item">{email}</span>
+      ) : null}
+    </>
+  );
+};

src/pages/DisbursementDetails.tsx

@@ -37,6 +37,10 @@ import { PaymentStatus } from "components/PaymentStatus";
 import { renderNumberOrDash } from "helpers/renderNumberOrDash";
 import { number } from "helpers/formatIntlNumber";
 import { saveFile } from "helpers/saveFile";
+import {
+  getReceiverContactInfoTitle,
+  renderReceiverContactInfoItems,
+} from "helpers/receiverContactInfo";
 
 export const DisbursementDetails = () => {
   const { id: disbursementId } = useParams();
@@ -337,7 +341,7 @@ export const DisbursementDetails = () => {
               {/* <Table.HeaderCell>
               <Checkbox id="disbursement-receivers-select-all" fieldSize="xs" />
             </Table.HeaderCell> */}
-              <Table.HeaderCell>Phone number</Table.HeaderCell>
+              <Table.HeaderCell>Contact info</Table.HeaderCell>
               <Table.HeaderCell>Wallet provider</Table.HeaderCell>
               <Table.HeaderCell textAlign="right">Amount</Table.HeaderCell>
               <Table.HeaderCell>Completed at</Table.HeaderCell>
@@ -355,9 +359,15 @@ export const DisbursementDetails = () => {
                   {/* <Table.BodyCell width="1rem">
                   <Checkbox id={`receiver-${r.id}`} fieldSize="xs" />
                 </Table.BodyCell> */}
-                  <Table.BodyCell title={r.phoneNumber} width="7.25rem">
+                  <Table.BodyCell
+                    title={getReceiverContactInfoTitle(
+                      r?.phoneNumber,
+                      r?.email,
+                    )}
+                    width="7.25rem"
+                  >
                     <Link onClick={(event) => goToReceiver(event, r.id)}>
-                      {r.phoneNumber}
+                      {renderReceiverContactInfoItems(r?.phoneNumber, r?.email)}
                     </Link>
                   </Table.BodyCell>
                   <Table.BodyCell width="8rem">{r.provider}</Table.BodyCell>

src/pages/PaymentDetails.tsx

@@ -26,6 +26,10 @@ import {
 } from "helpers/formatIntlDateTime";
 import { shortenString } from "helpers/shortenString";
 import { formatPaymentDetails } from "helpers/formatPaymentDetails";
+import {
+  getReceiverContactInfoTitle,
+  renderReceiverContactInfoItems,
+} from "helpers/receiverContactInfo";
 
 import { Breadcrumbs } from "components/Breadcrumbs";
 import { SectionHeader } from "components/SectionHeader";
@@ -335,7 +339,7 @@ export const PaymentDetails = () => {
                   fieldSize="xs"
                 />
               </Table.HeaderCell> */}
-                  <Table.HeaderCell>Phone number</Table.HeaderCell>
+                  <Table.HeaderCell>Contact info</Table.HeaderCell>
                   <Table.HeaderCell>Wallet address</Table.HeaderCell>
                   <Table.HeaderCell>Wallet provider</Table.HeaderCell>
                   <Table.HeaderCell width="5.5rem" textAlign="right">
@@ -362,15 +366,21 @@ export const PaymentDetails = () => {
                 </Table.BodyCell> */}
                     <Table.BodyCell
                       width="7.5rem"
-                      title={receiver?.phoneNumber}
+                      title={getReceiverContactInfoTitle(
+                        receiver?.phoneNumber,
+                        receiver?.email,
+                      )}
                     >
-                      {receiver?.phoneNumber ? (
+                      {receiver?.phoneNumber || receiver?.email ? (
                         <Link
                           onClick={(event) =>
                             goToReceiverDetails(event, receiver.id)
                           }
                         >
-                          {receiver.phoneNumber}
+                          {renderReceiverContactInfoItems(
+                            receiver?.phoneNumber,
+                            receiver?.email,
+                          )}
                         </Link>
                       ) : (
                         "-"

src/pages/ReceiverDetails.tsx

@@ -489,12 +489,23 @@ export const ReceiverDetails = () => {
             <SectionHeader.Row>
               <SectionHeader.Content>
                 <Heading as="h2" size="sm">
-                  <CopyWithIcon
-                    textToCopy={receiverDetails.phoneNumber}
-                    iconSizeRem="1.5"
-                  >
-                    {receiverDetails.phoneNumber}
-                  </CopyWithIcon>
+                  {receiverDetails?.phoneNumber ? (
+                    <CopyWithIcon
+                      textToCopy={receiverDetails.phoneNumber}
+                      iconSizeRem="1.5"
+                    >
+                      {receiverDetails.phoneNumber}
+                    </CopyWithIcon>
+                  ) : null}
+
+                  {receiverDetails?.email ? (
+                    <CopyWithIcon
+                      textToCopy={receiverDetails.email}
+                      iconSizeRem="1.5"
+                    >
+                      {receiverDetails.email}
+                    </CopyWithIcon>
+                  ) : null}
                 </Heading>
               </SectionHeader.Content>
               <Button

src/pages/ReceiverDetailsEdit.tsx

@@ -215,10 +215,10 @@ export const ReceiverDetailsEdit = () => {
             <SectionHeader.Content>
               <Heading as="h2" size="sm">
                 <CopyWithIcon
-                  textToCopy={receiverDetails.phoneNumber}
+                  textToCopy={receiverDetails?.phoneNumber || ""}
                   iconSizeRem="1.5"
                 >
-                  {receiverDetails.phoneNumber}
+                  {receiverDetails.phoneNumber || ""}
                 </CopyWithIcon>
               </Heading>
             </SectionHeader.Content>

src/pages/Receivers.tsx

@@ -132,7 +132,7 @@ export const Receivers = () => {
             <div className="FiltersWithSearch__search">
               <SearchInput
                 id="receivers-search"
-                placeholder="Search by phone number"
+                placeholder="Search by contact info"
                 onSubmit={handleSearchChange}
                 onClear={handleSearchChange}
                 isLoading={isSearchInProgress}

src/store/ducks/disbursementDetails.ts

@@ -258,6 +258,7 @@ const formatDisbursementReceivers = (
   items.map((r) => ({
     id: r.id,
     phoneNumber: r.phone_number,
+    email: r.email,
     provider: r.receiver_wallet.wallet.name,
     amount: r.payment.amount,
     assetCode: r.payment.asset.code,

src/styles.scss

@@ -424,6 +424,15 @@ body {
   }
 }
 
+.ReceiverContactInfo {
+  &__item {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 // Wallets
 .WalletBalances {
   display: flex;

src/types/index.ts

@@ -277,7 +277,8 @@ export type DisbursementDetailsStats = {
 
 export type DisbursementReceiver = {
   id: string;
-  phoneNumber: string;
+  phoneNumber?: string;
+  email?: string;
   provider: string;
   assetCode: string;
   amount: string;
@@ -311,7 +312,8 @@ export type PaymentDetailsStatusHistoryItem = {
 
 export type PaymentDetailsReceiver = {
   id: string;
-  phoneNumber: string;
+  phoneNumber?: string;
+  email?: string;
   walletAddress: string;
   provider: string;
   totalPaymentsCount: number;
@@ -355,7 +357,8 @@ export type AmountReceived = {
 
 export type Receiver = {
   id: string;
-  phoneNumber: string;
+  phoneNumber?: string;
+  email?: string;
   walletProvider: string[];
   walletsRegisteredCount: number;
   totalPaymentsCount: number;
@@ -405,7 +408,7 @@ export type ReceiverWalletPayment = {
 
 export type ReceiverDetails = {
   id: string;
-  phoneNumber: string;
+  phoneNumber?: string;
   email?: string;
   assetCode?: string;
   totalReceived?: string;
@@ -680,7 +683,8 @@ export type ApiStatistics = {
 
 export type ApiDisbursementReceiver = {
   id: string;
-  phone_number: string;
+  phone_number?: string;
+  email?: string;
   external_id: string;
   receiver_wallet: {
     id: string;
@@ -747,7 +751,7 @@ export type ApiReceiverVerification = {
 export type ApiReceiver = {
   created_at: string;
   id: string;
-  phone_number: string;
+  phone_number?: string;
   email?: string;
   external_id: string;
   total_payments: string | number;