From b0219aea2203e322343629ea095eb7807f723bab Mon Sep 17 00:00:00 2001 From: elraphty Date: Fri, 25 Oct 2024 16:43:02 +0100 Subject: [PATCH 1/3] added failed payment_status toggle and failed payment error mesage --- src/people/interfaces.ts | 2 +- .../wantedSummaries/CodingBounty.tsx | 24 ++++-- .../summaries/wantedSummaries/style.ts | 12 +++ .../widgetViews/workspace/HistoryModal.tsx | 73 ++++++++++++++++++- src/people/widgetViews/workspace/UserInfo.tsx | 8 +- src/store/interface.ts | 6 +- src/store/main.ts | 19 +++++ 7 files changed, 130 insertions(+), 14 deletions(-) diff --git a/src/people/interfaces.ts b/src/people/interfaces.ts index 1fbee6b8..9d810136 100644 --- a/src/people/interfaces.ts +++ b/src/people/interfaces.ts @@ -328,7 +328,7 @@ export interface CodingBountiesProps extends WantedSummaryProps { id?: number; completed?: boolean; payment_pending?: boolean; - payment_falied?: boolean; + payment_failed?: boolean; localPaid: LocalPaymeentState; setLocalPaid: (state: LocalPaymeentState) => void; localCompleted: LocalCompletedState; diff --git a/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx b/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx index 1eb98938..9ff10064 100644 --- a/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx +++ b/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx @@ -40,7 +40,9 @@ import { CodingLabels, AutoCompleteContainer, AwardBottomContainer, - PendingFlex + PendingFlex, + ErrorMsgText, + ErrorWrapper } from './style'; import { getTwitterLink } from './lib'; import CodingMobile from './CodingMobile'; @@ -104,7 +106,7 @@ function MobileView(props: CodingBountiesProps) { assigneeLabel, isEditButtonDisable, completed, - payment_falied, + payment_failed, payment_pending } = props; const color = colors['light']; @@ -121,6 +123,7 @@ function MobileView(props: CodingBountiesProps) { const [paidStatus, setPaidStatus] = useState(paid); const [paymentLoading, setPaymentLoading] = useState(false); const [localPending, setLocalPending] = useState(false); + const [paymentError, setPaymentError] = useState(''); const pendingIntervalRef = useRef | null>(null); @@ -236,6 +239,9 @@ function MobileView(props: CodingBountiesProps) { const payment_res = await main.getBountyPenndingPaymentStatus(id); if (payment_res['payment_status'] === 'COMPLETE') { return true; + } else if (payment_res['payment_status'] === 'FAILED') { + setPaymentError(payment_res['error']); + return false; } return false; @@ -340,7 +346,7 @@ function MobileView(props: CodingBountiesProps) { }, [main, startPolling]); useEffect(() => { - if (completed && !paid && assignee && !payment_falied && bountyPending) { + if (completed && !paid && assignee && !payment_failed && bountyPending) { setPendingPaymentloading(true); pollPendingPayment(id ?? 0); } @@ -355,7 +361,7 @@ function MobileView(props: CodingBountiesProps) { id, paid, assignee, - payment_falied, + payment_failed, pollPendingPayment, pendingIntervalRef, bountyPending @@ -608,7 +614,7 @@ function MobileView(props: CodingBountiesProps) { } let pillColor = color.statusAssigned; - if (payment_falied) { + if (payment_failed) { pillColor = color.statusFailed; } else if (bountyPending) { pillColor = color.statusPending; @@ -620,7 +626,7 @@ function MobileView(props: CodingBountiesProps) { let pillText = 'assigned'; - if (payment_falied) { + if (payment_failed) { pillText = 'failed'; } else if (bountyPending) { pillText = 'pending'; @@ -880,6 +886,12 @@ function MobileView(props: CodingBountiesProps) { )} + {payment_failed && ( + + + {paymentError} + + )} diff --git a/src/people/widgetViews/summaries/wantedSummaries/style.ts b/src/people/widgetViews/summaries/wantedSummaries/style.ts index a6b45eb4..6f7515d4 100644 --- a/src/people/widgetViews/summaries/wantedSummaries/style.ts +++ b/src/people/widgetViews/summaries/wantedSummaries/style.ts @@ -715,3 +715,15 @@ export const PendingFlex = styled.div` justify-content: center; margin-top: 10px; `; + +export const ErrorWrapper = styled.div` + padding: 0px 35px; + margin-top: 10px; + margin-bottom: 0px; +`; + +export const ErrorMsgText = styled.span` + color: red; + font-size: 0.85rem; + padding-top: 20px; +`; diff --git a/src/people/widgetViews/workspace/HistoryModal.tsx b/src/people/widgetViews/workspace/HistoryModal.tsx index 1a98405a..330274d3 100644 --- a/src/people/widgetViews/workspace/HistoryModal.tsx +++ b/src/people/widgetViews/workspace/HistoryModal.tsx @@ -11,7 +11,7 @@ import { colors } from '../../../config/colors'; import ArrowRight from '../../../public/static/arrow-right.svg'; import LinkIcon from '../../../public/static/link.svg'; import { PaymentHistoryModalProps } from './interface'; -import UserInfo from './UserInfo'; +import UserInfo, { ToolTipWrapper } from './UserInfo'; const HistoryWrapper = styled.div` width: 61.125rem; @@ -19,6 +19,17 @@ const HistoryWrapper = styled.div` overflow: hidden; `; +const ErrorToolTipWrapper = styled.div` + display: flex; + position: relative; + cursor: pointer; + + :hover .tooltipText { + visibility: visible; + opacity: 1; + } +`; + const ModalHeaderWrapper = styled.div` display: flex; align-items: center; @@ -222,7 +233,13 @@ const color = colors['light']; const HistoryModal = (props: PaymentHistoryModalProps) => { const isMobile = useIsMobile(); const { isOpen, close } = props; - const [filter, setFilter] = useState({ payment: true, deposit: true, withdraw: true }); + const [filter, setFilter] = useState({ + payment: true, + deposit: true, + withdraw: true, + pending: false, + failed: false + }); const [currentPaymentsHistory, setCurrentPaymentHistory] = useState(props.paymentsHistory); const { ui } = useStores(); @@ -241,9 +258,28 @@ const HistoryModal = (props: PaymentHistoryModalProps) => { useEffect(() => { const paymentsHistory = [...props.paymentsHistory]; + setCurrentPaymentHistory( paymentsHistory.filter((history: PaymentHistory) => filter[history.payment_type]) ); + + if (filter.pending && filter.failed) { + setCurrentPaymentHistory( + paymentsHistory.filter( + (history: PaymentHistory) => + history.payment_status === 'PENDING' || history.payment_status === 'FAILED' + ) + ); + } else if (filter.pending || filter.failed) { + const filterState = filter.pending ? 'PENDING' : 'FAILED'; + setCurrentPaymentHistory( + paymentsHistory.filter((history: PaymentHistory) => history.payment_status === filterState) + ); + } else { + setCurrentPaymentHistory( + paymentsHistory.filter((history: PaymentHistory) => filter[history.payment_type]) + ); + } }, [filter, props.paymentsHistory]); return ( @@ -305,6 +341,24 @@ const HistoryModal = (props: PaymentHistoryModalProps) => { /> + + handleFilter('pending')} + /> + + + + handleFilter('failed')} + /> + + @@ -314,6 +368,7 @@ const HistoryModal = (props: PaymentHistoryModalProps) => { Type Date Amount + State Sender Receiver @@ -334,6 +389,20 @@ const HistoryModal = (props: PaymentHistoryModalProps) => { {formatSat(pay.amount)} sats + + + + {pay.payment_status?.toLowerCase()} + + {pay.payment_status === 'FAILED' && ( + {pay.error} + )} + + { if (name.length <= 30) { return name; } - return `${name.substring(0, 18)}...`; + return `${name.substring(0, 12)}...`; }; return ( @@ -98,7 +98,7 @@ const UserInfo = (props: PaymentHistoryUserInfo) => { {props.name} ) : null} {formatName(props.name)} - {props && props.pubkey ? `${props.pubkey.substring(0, 17)}...` : ''} + {props && props.pubkey ? `${props.pubkey.substring(0, 12)}...` : ''} ); diff --git a/src/store/interface.ts b/src/store/interface.ts index 7aae3398..5082a59b 100644 --- a/src/store/interface.ts +++ b/src/store/interface.ts @@ -118,7 +118,9 @@ export interface PersonBounty { commitment_fee?: number; } -export type WorkspaceTransactionType = 'deposit' | 'payment' | 'withdraw'; +export type WorkspaceTransactionType = 'deposit' | 'payment' | 'withdraw' | 'failed' | 'pending'; + +export type PaymentStatus = 'COMPLETED' | 'PENDING' | 'FAILED'; export interface PaymentHistory { id: number; @@ -135,6 +137,8 @@ export interface PaymentHistory { updated: string; payment_type: WorkspaceTransactionType; status: boolean; + payment_status?: PaymentStatus; + error?: string; } export interface BudgetHistory { diff --git a/src/store/main.ts b/src/store/main.ts index c124a002..df993bfa 100644 --- a/src/store/main.ts +++ b/src/store/main.ts @@ -2555,6 +2555,25 @@ export class MainStore { } } + async getBountyPaymentById(bounty_id: number): Promise { + try { + if (!uiStore.meInfo) return null; + const info = uiStore.meInfo; + const r: any = await fetch(`${TribesURL}/gobounties/payment/${bounty_id}`, { + method: 'GET', + mode: 'cors', + headers: { + 'x-jwt': info.tribe_jwt, + 'Content-Type': 'application/json' + } + }); + return r.json(); + } catch (e) { + console.error('Error getBountyPaymentById', e); + return null; + } + } + async getFilterStatusCount(): Promise { try { const r: any = await fetch(`${TribesURL}/gobounties/filter/count`, { From fa4754e3935eca73bd624ca487d669cc75eadbb0 Mon Sep 17 00:00:00 2001 From: elraphty Date: Mon, 28 Oct 2024 17:41:01 +0100 Subject: [PATCH 2/3] updated ui for payments and added update payments checks --- src/people/widgetViews/BudgetWrap.tsx | 18 +++++++++++++++++- .../wantedSummaries/CodingBounty.tsx | 19 +++++++++++++------ src/store/main.ts | 19 +++++++++++++++++++ 3 files changed, 49 insertions(+), 7 deletions(-) diff --git a/src/people/widgetViews/BudgetWrap.tsx b/src/people/widgetViews/BudgetWrap.tsx index b8345725..3dca2f40 100644 --- a/src/people/widgetViews/BudgetWrap.tsx +++ b/src/people/widgetViews/BudgetWrap.tsx @@ -109,6 +109,22 @@ export const BudgetWrapComponent = (props: { org: Workspace | undefined; uuid: s } }, [main, uuid, viewReportDisabled]); + const updateWorkspaceBudget = useCallback(async () => { + main + .updateWorkspacePayments(uuid) + .then(() => { + getPaymentsHistory(); + }) + .catch((e: any) => { + console.log('Update Payment Histories error', e); + }); + }, [main, getPaymentsHistory]); + + const openPaymentHistory = () => { + updateWorkspaceBudget(); + setIsOpenHistory(true); + }; + let interval; const successAction = () => { @@ -171,7 +187,7 @@ export const BudgetWrapComponent = (props: { org: Workspace | undefined; uuid: s dataTestId="workspace-view-transaction-history-button" color="white" style={{ borderRadius: '5px' }} - onClick={() => setIsOpenHistory(true)} + onClick={() => openPaymentHistory()} />