Merge pull request stakwork#592 from stakwork/feat/payment_error_ui

PR: Added failed payment_status toggle and failed payment error message
MahtabBukhari · Oct 28, 2024 · 0c39773 · 0c39773
2 parents a27e43d + 354e370
commit 0c39773
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 19 deletions.
diff --git 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/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()}
           />
           <Button
             disabled={addWithdrawDisabled}

diff --git 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<ReturnType<typeof setInterval> | 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;
@@ -324,6 +330,12 @@ function MobileView(props: CodingBountiesProps) {
     }
   };
 
+  useEffect(() => {
+    if (payment_failed) {
+      getPendingPaymentStatus(id ?? 0);
+    }
+  }, [payment_failed, getPendingPaymentStatus, id]);
+
   useEffect(() => {
     if (main.keysendInvoice !== '') {
       const expired = isInvoiceExpired(main.keysendInvoice);
@@ -340,7 +352,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 +367,7 @@ function MobileView(props: CodingBountiesProps) {
     id,
     paid,
     assignee,
-    payment_falied,
+    payment_failed,
     pollPendingPayment,
     pendingIntervalRef,
     bountyPending
@@ -608,26 +620,27 @@ function MobileView(props: CodingBountiesProps) {
   }
 
   let pillColor = color.statusAssigned;
-  if (payment_falied) {
+
+  if (bountyPaid) {
+    pillColor = color.statusPaid;
+  } else if (payment_failed) {
     pillColor = color.statusFailed;
   } else if (bountyPending) {
     pillColor = color.statusPending;
   } else if (bountyCompleted && !bountyPaid) {
     pillColor = color.statusCompleted;
-  } else if (bountyPaid) {
-    pillColor = color.statusPaid;
   }
 
   let pillText = 'assigned';
 
-  if (payment_falied) {
+  if (bountyPaid) {
+    pillText = 'paid';
+  } else if (payment_failed) {
     pillText = 'failed';
   } else if (bountyPending) {
     pillText = 'pending';
   } else if (bountyCompleted) {
     pillText = 'completed';
-  } else if (bountyPaid) {
-    pillText = 'paid';
   }
 
   return (
@@ -880,6 +893,12 @@ function MobileView(props: CodingBountiesProps) {
                       </div>
                     )}
                   </UnassignedPersonProfile>
+                  {payment_failed && (
+                    <ErrorWrapper>
+                      <Divider />
+                      <ErrorMsgText>{paymentError}</ErrorMsgText>
+                    </ErrorWrapper>
+                  )}
                   <DividerContainer>
                     <Divider />
                   </DividerContainer>

diff --git 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
@@ -11,14 +11,25 @@ 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;
   height: 100%;
   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) => {
               />
               <Label htmlFor="withdraw">Withdrawals</Label>
             </PaymentType>
+            <PaymentType data-testid="payment-history-filter-type-pending">
+              <input
+                id="pending"
+                type={'checkbox'}
+                checked={filter.pending}
+                onChange={() => handleFilter('pending')}
+              />
+              <Label htmlFor="withdraw">Pending</Label>
+            </PaymentType>
+            <PaymentType data-testid="payment-history-filter-type-failed">
+              <input
+                id="failed"
+                type={'checkbox'}
+                checked={filter.failed}
+                onChange={() => handleFilter('failed')}
+              />
+              <Label htmlFor="withdraw">failed</Label>
+            </PaymentType>
           </PaymentFilterWrapper>
         </ModalHeaderWrapper>
         <TableWrapper>
@@ -314,6 +368,7 @@ const HistoryModal = (props: PaymentHistoryModalProps) => {
                 <ThLeft>Type</ThLeft>
                 <TH>Date</TH>
                 <TH>Amount</TH>
+                <TH>State</TH>
                 <TH>Sender</TH>
                 <TH />
                 <TH>Receiver</TH>
@@ -334,6 +389,20 @@ const HistoryModal = (props: PaymentHistoryModalProps) => {
                   <TD data-testid={`payment-history-transaction-amount`}>
                     <AmountSpan>{formatSat(pay.amount)}</AmountSpan> sats
                   </TD>
+                  <TD>
+                    <ErrorToolTipWrapper>
+                      <span
+                        style={{
+                          color: pay.payment_status === 'FAILED' ? 'red' : ''
+                        }}
+                      >
+                        {pay.payment_status?.toLowerCase()}
+                      </span>
+                      {pay.payment_status === 'FAILED' && (
+                        <ToolTipWrapper className="tooltipText">{pay.error}</ToolTipWrapper>
+                      )}
+                    </ErrorToolTipWrapper>
+                  </TD>
                   <TD data-testid={`payment-history-transaction-sender`}>
                     <UserInfo
                       image={pay.sender_img}

diff --git a/src/people/widgetViews/workspace/UserInfo.tsx b/src/people/widgetViews/workspace/UserInfo.tsx
@@ -14,7 +14,7 @@ const UserInfoWrapper = styled.div`
   }
 `;
 
-const ToolTipWrapper = styled.div`
+export const ToolTipWrapper = styled.div`
   visibility: hidden;
   width: 19rem;
   background-color: #eee;
@@ -45,7 +45,7 @@ const Wrapper = styled.div`
   border-radius: 50%;
 `;
 
-const DetailWrapper = styled.div`
+export const DetailWrapper = styled.div`
   display: flex;
   flex-direction: column;
 `;
@@ -86,7 +86,7 @@ const UserInfo = (props: PaymentHistoryUserInfo) => {
     if (name.length <= 30) {
       return name;
     }
-    return `${name.substring(0, 18)}...`;
+    return `${name.substring(0, 12)}...`;
   };
   return (
     <UserInfoWrapper>
@@ -98,7 +98,7 @@ const UserInfo = (props: PaymentHistoryUserInfo) => {
           <ToolTipWrapper className="tooltipText">{props.name}</ToolTipWrapper>
         ) : null}
         <Name>{formatName(props.name)}</Name>
-        <Pubkey> {props && props.pubkey ? `${props.pubkey.substring(0, 17)}...` : ''}</Pubkey>
+        <Pubkey> {props && props.pubkey ? `${props.pubkey.substring(0, 12)}...` : ''}</Pubkey>
       </DetailWrapper>
     </UserInfoWrapper>
   );

diff --git 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 {