Fix/bounty paid state

frontend/app/src/pages/people/tabs/Wanted.tsx

@@ -52,7 +52,7 @@ export const Wanted = observer(() => {
 
   useEffect(() => {
     getUserTickets();
-  }, []);
+  }, [main]);
 
   if (!main.createdBounties?.length) {
     return (

frontend/app/src/pages/tickets/TicketModalPage.tsx

@@ -54,7 +54,8 @@ export const TicketModalPage = observer(({ setConnectPerson }: Props) => {
     setConnectPersonBody(connectPerson?.person);
   }, [main.peopleBounties, bountyId, search]);
 
-  const goBack = () => {
+  const goBack = async () => {
+    await main.getPeopleBounties({ page: 1, resetPage: true });
     history.push('/bounties');
   };
 

frontend/app/src/people/interfaces.ts

@@ -243,6 +243,8 @@ export interface WantedSummaryProps {
   owner_id?: string;
 }
 
+export type LocalPaymeentState = 'UNKNOWN' | 'PAID' | 'UNPAID';
+
 export interface CodingBountiesProps {
   deliverables?: string;
   description: any;
@@ -303,6 +305,8 @@ export interface CodingBountiesProps {
   bounty_expires?: string;
   org_uuid?: string;
   id?: number;
+  localPaid: LocalPaymeentState;
+  setLocalPaid: (state: LocalPaymeentState) => void;
 }
 
 export interface CodingViewProps extends WantedSummaryProps {

frontend/app/src/people/main/FocusView.tsx

@@ -247,7 +247,7 @@ function FocusedView(props: FocusViewProps) {
     let newBody = cloneDeep(body);
 
     if (config && config.name === 'about') {
-      await main.saveProfile(newBody);
+      const res = await main.saveProfile(newBody);
       if (shouldCloseModal) {
         closeModal();
       }

frontend/app/src/people/main/bountyModal/BountyModal.tsx

@@ -1,5 +1,5 @@
 import { Modal } from 'components/common';
-import { usePerson } from 'hooks';
+import { useIsMobile, usePerson } from 'hooks';
 import { widgetConfigs } from 'people/utils/Constants';
 import React, { useEffect, useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
@@ -11,13 +11,19 @@ import FocusedView from '../FocusView';
 const config = widgetConfigs.wanted;
 export const BountyModal = ({ basePath }: BountyModalProps) => {
   const history = useHistory();
-  const { wantedId, wantedIndex } = useParams<{ wantedId: string; wantedIndex: string }>();
+  const { wantedId, wantedIndex, personPubkey } = useParams<{
+    wantedId: string;
+    wantedIndex: string;
+    personPubkey: string;
+  }>();
 
   const { ui, main } = useStores();
   const { canEdit, person } = usePerson(ui.selectedPerson);
   const [bounty, setBounty] = useState<PersonBounty[]>([]);
 
-  const onGoBack = () => {
+  const onGoBack = async () => {
+    await main.getPersonCreatedBounties({}, personPubkey);
+    await main.getPersonAssignedBounties({}, personPubkey);
     ui.setBountyPerson(0);
     history.push({
       pathname: basePath
@@ -34,36 +40,57 @@ export const BountyModal = ({ basePath }: BountyModalProps) => {
 
     getBounty();
   }, [bounty, main, wantedId]);
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return (
+      <Modal visible={true} fill={true}>
+        <FocusedView
+          person={person}
+          personBody={person}
+          canEdit={false}
+          selectedIndex={Number(wantedIndex)}
+          config={config}
+          goBack={onGoBack}
+        />
+      </Modal>
+    );
+  }
 
   return (
     <Modal
       visible={true}
       style={{
-        minHeight: '100%',
-        height: 'auto'
+        background: 'rgba( 0 0 0 /75% )'
       }}
       envStyle={{
+        maxHeight: '100vh',
         marginTop: 0,
         borderRadius: 0,
         background: '#fff',
-        height: '100%',
         width: 'auto',
         minWidth: 500,
         maxWidth: '80%',
         zIndex: 20
       }}
       overlayClick={onGoBack}
       bigCloseImage={onGoBack}
+      bigCloseImageStyle={{
+        top: '18px',
+        right: '-50px',
+        borderRadius: '50%'
+      }}
     >
       <FocusedView
         person={person}
-        canEdit={ui.bountyPerson ? person?.id === ui.bountyPerson : canEdit}
+        personBody={person}
+        canEdit={false}
         selectedIndex={Number(wantedIndex)}
         config={config}
         bounty={bounty}
         goBack={() => {
           onGoBack();
         }}
+        fromBountyPage={true}
       />
     </Modal>
   );

frontend/app/src/people/widgetViews/summaries/WantedSummary.tsx

@@ -12,7 +12,7 @@ import { useStores } from '../../../store';
 import { LanguageObject, awards } from '../../utils/languageLabelStyle';
 import NameTag from '../../utils/NameTag';
 import { sendToRedirect } from '../../../helpers';
-import { CodingLanguageLabel, WantedSummaryProps } from '../../interfaces';
+import { CodingLanguageLabel, WantedSummaryProps, LocalPaymeentState } from '../../interfaces';
 import CodingMobile from './wantedSummaries/CodingMobile';
 import CodingBounty from './wantedSummaries/CodingBounty';
 import CodingDesktop from './wantedSummaries/CodingDesktop';
@@ -112,6 +112,7 @@ function WantedSummary(props: WantedSummaryProps) {
 
   const [labels, setLabels] = useState<Array<CodingLanguageLabel>>([]);
   const [assigneeValue, setAssigneeValue] = useState(false);
+  const [localPaid, setLocalPaid] = useState<LocalPaymeentState>('UNKNOWN');
 
   const assigneeHandlerOpen = () => setAssigneeValue((assigneeValue: any) => !assigneeValue);
 
@@ -329,6 +330,7 @@ function WantedSummary(props: WantedSummaryProps) {
       }
 
       setIsMarkPaidSaved(false);
+      setLocalPaid('PAID');
     }
   }
 
@@ -613,6 +615,8 @@ function WantedSummary(props: WantedSummaryProps) {
           nametag={nametag}
           org_uuid={org_uuid}
           id={id}
+          localPaid={localPaid}
+          setLocalPaid={setLocalPaid}
         />
       );
     }

frontend/app/src/people/widgetViews/summaries/wantedSummaries/CodingBounty.tsx

@@ -91,7 +91,9 @@ function MobileView(props: CodingBountiesProps) {
     bounty_expires,
     commitment_fee,
     org_uuid,
-    id
+    id,
+    localPaid,
+    setLocalPaid
   } = props;
   const color = colors['light'];
 
@@ -100,8 +102,18 @@ function MobileView(props: CodingBountiesProps) {
   const [keysendStatus, setKeysendStatus] = useState(false);
   const [lnInvoice, setLnInvoice] = useState('');
   const [toasts, setToasts]: any = useState([]);
+  const [updatingPayment, setUpdatingPayment] = useState<boolean>(false);
+
+  let bountyPaid = paid || invoiceStatus || keysendStatus;
+
+  if (localPaid === 'PAID') {
+    bountyPaid = true;
+  }
+
+  if (localPaid === 'UNPAID') {
+    bountyPaid = false;
+  }
 
-  const bountyPaid = paid || invoiceStatus || keysendStatus;
   const pollMinutes = 1;
 
   const bountyExpired = !bounty_expires
@@ -214,10 +226,12 @@ function MobileView(props: CodingBountiesProps) {
     } else if (res.msg === SOCKET_MSG.invoice_success && res.invoice === main.lnInvoice) {
       addToast(SOCKET_MSG.invoice_success);
       setLnInvoice('');
+      setLocalPaid('UNKNOWN');
       setInvoiceStatus(true);
     } else if (res.msg === SOCKET_MSG.keysend_success && res.invoice === main.lnInvoice) {
       addToast(SOCKET_MSG.keysend_success);
       if (org_uuid) {
+        setLocalPaid('UNKNOWN');
         setKeysendStatus(true);
       }
     } else if (res.msg === SOCKET_MSG.keysend_error && res.invoice === main.lnInvoice) {
@@ -595,7 +609,7 @@ function MobileView(props: CodingBountiesProps) {
                           color: color.borderGreen1
                         }}
                         text={'Mark Unpaid'}
-                        loading={saving === 'paid'}
+                        loading={saving === 'paid' || updatingPayment}
                         endingImg={'/static/mark_unpaid.svg'}
                         textStyle={{
                           width: '130px',
@@ -604,9 +618,12 @@ function MobileView(props: CodingBountiesProps) {
                           fontFamily: 'Barlow',
                           marginLeft: '30px'
                         }}
-                        onClick={(e: any) => {
+                        onClick={async (e: any) => {
                           e.stopPropagation();
-                          updatePaymentStatus(created || 0);
+                          setUpdatingPayment(true);
+                          await updatePaymentStatus(created || 0);
+                          setLocalPaid('UNPAID');
+                          setUpdatingPayment(false);
                         }}
                       />
                     ) : (
@@ -802,7 +819,7 @@ function MobileView(props: CodingBountiesProps) {
                     marginLeft: '36px'
                   }}
                   text={selectedAward === '' ? 'Skip and Mark Paid' : 'Mark Paid'}
-                  loading={isMarkPaidSaved}
+                  loading={isMarkPaidSaved || updatingPayment}
                   endingImg={'/static/mark_paid.svg'}
                   textStyle={{
                     width: '130px',
@@ -815,24 +832,22 @@ function MobileView(props: CodingBountiesProps) {
                   hovercolor={color.button_primary.hover}
                   activecolor={color.button_primary.active}
                   shadowcolor={color.button_primary.shadow}
-                  onClick={(e: any) => {
+                  onClick={async (e: any) => {
                     e.stopPropagation();
-                    updatePaymentStatus(created || 0);
-                    setExtrasPropertyAndSaveMultiple('paid', {
+                    setUpdatingPayment(true);
+                    await updatePaymentStatus(created || 0);
+                    await setExtrasPropertyAndSaveMultiple('paid', {
                       award: awardDetails.name
                     });
 
                     setTimeout(() => {
                       setCreatorStep(0);
-                    }, 3000);
-                    setTimeout(() => {
                       if (setIsPaidStatusPopOver) setIsPaidStatusPopOver(true);
-                    }, 4000);
-                    setTimeout(() => {
                       if (awardDetails?.name !== '') {
                         setIsPaidStatusBadgeInfo(true);
                       }
-                    }, 5500);
+                      setUpdatingPayment(false);
+                    }, 3000);
                   }}
                 />
               </AwardBottomContainer>