Skip to content

Commit

Permalink
Transfer terms tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@NgaseBupe
NgaseBupe committed Oct 31, 2024
1 parent b86da28 commit ef7727e
Show file tree
Hide file tree
Showing 6 changed files with 281 additions and 7 deletions.
264 changes: 264 additions & 0 deletions src/App/Transfers/TransferDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,13 +235,274 @@ const TransferDetails: FC<ConnectorProps> = ({
</TabPanel>
);

const TransferTermsTab = (
<TabPanel className="transferTermsTab">
<FormField.Container direction="row" align="top left">
<FormField.Container direction="column">
<FormField
disabled={true}
type="text"
label="Transfer ID"
value={transferDetails.transferId!}
style={{
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
}}
/>
</FormField.Container>

<FormField.Container direction="column">
<FormField
disabled={true}
type="text"
label="Transfer State"
value={transferDetails.transferState || ''}
/>
</FormField.Container>

<FormField.Container direction="column">
<FormField
disabled={true}
type="text"
label="Quote Amount"
// value={model.transferTerms?.quoteAmount?.amount?.toString() || ''}
/>
</FormField.Container>

<FormField.Container direction="column">
<FormField
disabled={true}
type="text"
label="Quote Currency"
// value={model.transferTerms?.quoteAmount?.currency || ''}
/>
</FormField.Container>

<FormField.Container direction="column">
<FormField
disabled={true}
type="text"
label="Quote Amount Type"
// value={model.transferTerms?.quoteAmountType || ''}
/>
</FormField.Container>
<FormField.Container direction="column">
<FormField
disabled={true}
type="text"
label="Conversion Type"
// value={model.transferTerms?.quoteAmountType || ''}
/>
</FormField.Container>
</FormField.Container>

<FormField.Container direction="row" style={{ width: '100%', height: '100%' }}>
<FormField.Container style={{ width: '100%', flexGrow: 1 }} direction="column">
<FormField.Container
style={{
width: '100%',
marginTop: '10px',
border: '1px solid #ccc',
padding: '10px',
borderRadius: '5px',
boxSizing: 'border-box',
flexGrow: 1,
display: 'flex',
height: '300px',
flexDirection: 'column',
}}
direction="column"
>
<div
style={{
fontWeight: 'bold',
marginBottom: '5px',
marginRight: '300px',
textAlign: 'center',
}}
>
Transfer Terms
</div>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Transfer Amount
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.amount?.toString() || ''}
/>
<FormField
disabled
type="text"
value={transferDetails.currency || ''}
style={{ width: '100%', marginRight: '5px' }}
/>
</FormField.Container>

<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Payee Receive Amount
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>

<FormField
disabled
type="text"
value={transferDetails.payerDFSP?.name?.toString() || ''}
style={{ flex: '0 0 20%', marginLeft: '10px' }}
/>
</FormField.Container>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Payee DFSP Commission
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>

<FormField
disabled
type="text"
value={transferDetails.payerDFSP?.name?.toString() || ''}
style={{ flex: '0 0 20%', marginLeft: '10px' }}
/>
</FormField.Container>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Expiry Date Time
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>
</FormField.Container>
</FormField.Container>
</FormField.Container>

<FormField.Container style={{ width: '100%', flexGrow: 1 }} direction="column">
<FormField.Container
style={{
width: '100%',
marginTop: '10px',
border: '1px solid #ccc',
padding: '10px',
borderRadius: '5px',
boxSizing: 'border-box',
flexGrow: 1,
display: 'flex',
height: '300px',
flexDirection: 'column',
}}
direction="column"
>
<div style={{ fontWeight: 'bold', marginBottom: '5px' }}>Conversion Terms</div>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Transfer Amount
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>

<FormField
disabled
type="text"
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>
</FormField.Container>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Payee Receive Amount
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>

<FormField
disabled
type="text"
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>
</FormField.Container>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Payee DFSP Fee
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>

<FormField
disabled
type="text"
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>
</FormField.Container>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Payee DFSP Commission
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>

<FormField
disabled
type="text"
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>
</FormField.Container>
<FormField.Container direction="row" style={{ overflow: 'hidden' }}>
<div style={{ flex: '0 0 150px', textAlign: 'left', marginRight: '10px' }}>
Expiry Date Time
</div>
<FormField
disabled
type="text"
style={{ flex: 1 }}
value={transferDetails.payerDFSP?.name?.toString() || ''}
/>
</FormField.Container>
</FormField.Container>
</FormField.Container>
</FormField.Container>
</TabPanel>
);

return (
<Modal title={`Transfer ${transferDetails.transferId} Details`} onClose={onModalCloseClick}>
<div>
<Tabs>
<Tab>Basic Information</Tab>
<Tab>Transfer Terms</Tab>
<Tab>Technical Details</Tab>
{BasicInformationTab}
{TransferTermsTab}
{TechnicalDetailsTab}
</Tabs>
</div>
Expand All @@ -250,3 +511,6 @@ const TransferDetails: FC<ConnectorProps> = ({
};

export default connect(stateProps, dispatchProps, null, { context: ReduxContext })(TransferDetails);
// function trimTt(transferId: any) {
// throw new Error('Function not implemented.');
// }
3 changes: 3 additions & 0 deletions src/App/Transfers/slice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ const initialState: types.TransfersState = {
payerIdValue: undefined,
payeeIdType: undefined,
payeeIdValue: undefined,
transactionType: undefined,
conversionState: undefined,
sourceCurrency: undefined,
from: moment().subtract(1, 'day').toString(),
to: moment().toString(),
currency: undefined,
Expand Down
3 changes: 3 additions & 0 deletions src/App/Transfers/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@ export interface TransfersFilter {
from: string | undefined;
to: string | undefined;
currency: string | undefined;
transactionType: string | undefined;
transferState: string | undefined;
conversionState: string | undefined;
sourceCurrency: string | undefined;
timeframeSelect: string;
}

Expand Down
14 changes: 7 additions & 7 deletions src/App/Transfers/views.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ const transfersColumns = [
},
{
label: 'Source Currency',
key: 'currency',
key: 'sourceCurrency',
},
{
label: 'Currency',
Expand Down Expand Up @@ -243,8 +243,8 @@ const Filters: FC<TransferFiltersProps> = ({ model, onFilterChange, onFindTransf
className="transfers__filters__textfield"
placeholder="Transaction Type"
size="small"
value={model?.payerIdValue}
onChange={(value) => onFilterChange('payerIdValue', value)}
value={model?.transactionType}
onChange={(value) => onFilterChange('transactionType', value)}
/>
</div>
<div className="transfers__filters__filter-row">
Expand Down Expand Up @@ -276,17 +276,17 @@ const Filters: FC<TransferFiltersProps> = ({ model, onFilterChange, onFindTransf
className="transfers__filters__textfield"
placeholder="Conversion State"
size="small"
value={model?.payeeIdValue}
onChange={(value) => onFilterChange('payeeIdValue', value)}
value={model?.conversionState}
onChange={(value) => onFilterChange('conversionState', value)}
/>
</div>
<div className="transfers__filters__filter-row">
<TextField
className="transfers__filters__textfield"
placeholder="Source Currency"
size="small"
value={model?.currency}
onChange={(value) => onFilterChange('currency', value)}
value={model?.sourceCurrency}
onChange={(value) => onFilterChange('sourceCurrency', value)}
/>
<TextField
className="transfers__filters__textfield"
Expand Down
3 changes: 3 additions & 0 deletions src/apollo/mocks.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@ export const TransferMock = Factory.Sync.makeFactory<Transfer>({
payeeDFSP: Factory.each(() => DfspMock.build()),
payerParty: Factory.each(() => PartyMock.build()),
payeeParty: Factory.each(() => PartyMock.build()),
sourceCurrency: Factory.each(() =>
faker.random.arrayElement(['USD', 'EUR', 'CNY', 'MMK', 'TZS']),
),
quoteEvents: Factory.each(() => {
return JSON.parse(JSON.stringify({ data: faker.datatype.string(1000) }));
}),
Expand Down
1 change: 1 addition & 0 deletions src/apollo/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ export type Transfer = {
quoteEvents?: Maybe<Scalars['JSONObject']>;
transferEvents?: Maybe<Scalars['JSONObject']>;
settlementEvents?: Maybe<Scalars['JSONObject']>;
sourceCurrency: Maybe<Scalars['String']>;
};

export enum TransactionType {
Expand Down

0 comments on commit ef7727e

Please sign in to comment.