diff --git a/backend/src/handlers/payments.ts b/backend/src/handlers/payments.ts index 9ad19c73..9cc1648b 100644 --- a/backend/src/handlers/payments.ts +++ b/backend/src/handlers/payments.ts @@ -60,7 +60,7 @@ export default function mountPaymentsEndpoints(router: Router) { /* * - * USER TO APP PAYMENT FUNCTIONS + * USER TO APP PAYMENT * */ @@ -140,7 +140,7 @@ export default function mountPaymentsEndpoints(router: Router) { /* * - * APP TO USER PAYMENT FUNCTIONS + * APP TO USER PAYMENT * */ @@ -246,7 +246,7 @@ export default function mountPaymentsEndpoints(router: Router) { await pi.completePayment(paymentId, refundTxId); // return success to the front end - return res.status(200).json({message: `${refundedPaymentID} was refunded with transaction ${refundTxId}`, block_explorer_link: `https://blockexplorer.minepi.com/tx/${refundTxId}`}); + return res.status(200).json({message: `Payment: ${refundedPaymentID} was refunded with transaction ${refundTxId}`, block_explorer_link: `https://blockexplorer.minepi.com/tx/${refundTxId}`}); } catch (error) { console.log(error) } diff --git a/frontend/src/Shop/components/Auth.tsx b/frontend/src/Shop/components/Auth.tsx index 86b698ba..626b4c10 100644 --- a/frontend/src/Shop/components/Auth.tsx +++ b/frontend/src/Shop/components/Auth.tsx @@ -21,7 +21,7 @@ const axiosClient = axios.create({ baseURL: `${backendURL}`, timeout: 20000, wit const AuthProvider: React.FC = ({ children }) => { const [user, setUser] = React.useState( { uid: '', username: '' } ) - const [showModal, setShowModal] = React.useState(true); + const [showModal, setShowModal] = React.useState(false); const [refunds, setRefunds] = React.useState( [{ _id: '', @@ -43,6 +43,7 @@ const AuthProvider: React.FC = ({ children }) => { const authResult: AuthResult = await window.Pi.authenticate(scopes, onIncompletePaymentFound); await signInUser(authResult); setUser(authResult.user); + setShowModal(false); saveRefunds(); } @@ -74,7 +75,6 @@ const AuthProvider: React.FC = ({ children }) => { saveShowModal(false); } - const userContext: UserContextType = { user, saveUser, @@ -82,7 +82,7 @@ const AuthProvider: React.FC = ({ children }) => { saveShowModal, refunds, saveRefunds, - onModalClose + onModalClose, } return ( diff --git a/frontend/src/Shop/components/Footer.tsx b/frontend/src/Shop/components/Footer.tsx index 86a73201..5f2274fd 100644 --- a/frontend/src/Shop/components/Footer.tsx +++ b/frontend/src/Shop/components/Footer.tsx @@ -16,6 +16,11 @@ export default function ColorInversionFooter() { const [ color ] = React.useState('neutral'); return ( + @@ -121,5 +127,6 @@ export default function ColorInversionFooter() { + ); } \ No newline at end of file diff --git a/frontend/src/Shop/components/Refund.tsx b/frontend/src/Shop/components/Refund.tsx index 4a2ebc3e..a4ae46e5 100644 --- a/frontend/src/Shop/components/Refund.tsx +++ b/frontend/src/Shop/components/Refund.tsx @@ -1,36 +1,36 @@ -import React, { CSSProperties } from 'react'; +import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material'; +import { Link } from 'react-router-dom'; /* * this card displays the alert message that a refund has been processed */ interface Props { - refundedTransactionMessage: string, + refundedTransaction: { + message: string, + block_explorer_link: string + }, + showRefundAlert: boolean, onRefundClose: () => void, } -const modalStyle: CSSProperties = { - background: 'white', - position: 'absolute', - left: '15vw', - top: '40%', - width: '70vw', - height: '25vh', - border: '1px solid black', - textAlign: 'center', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center' -} - export default function Refund(props: Props) { return ( -
-

Refunded Payment

-
-

{props.refundedTransactionMessage}

- -
-
+ + + + {props.refundedTransaction.message} + + + View on the Pi Block Explorer + + + + + + ) } \ No newline at end of file diff --git a/frontend/src/Shop/components/RefundCard.tsx b/frontend/src/Shop/components/RefundCard.tsx index 605f818d..0b2ae909 100644 --- a/frontend/src/Shop/components/RefundCard.tsx +++ b/frontend/src/Shop/components/RefundCard.tsx @@ -12,10 +12,30 @@ interface Props { pictureCaption: string, pictureURL: string, amount: number, + variant: boolean, onClickRefund: () => void, } export default function RefundCard(props: Props) { + + function buttonStyle(){ + if(props.variant){ + return 'outlined'; + } + else{ + return 'contained'; + } + } + + function buttonText(){ + if(props.variant){ + return 'Refund in Progress'; + } + else{ + return 'Refund'; + } + } + return ( { (props.name === 'none')? @@ -37,12 +57,11 @@ export default function RefundCard(props: Props) { : - + - {props.name} + {props.name} - {props.name ==="lemon_pie_1" ?

Refund Order: Lemon Meringue Pie

:

Refund Order: Apple Pie

}

{props.description}

@@ -53,7 +72,7 @@ export default function RefundCard(props: Props) { Eligible Refund: {props.amount} Test-π
- + {props.pictureCaption} diff --git a/frontend/src/Shop/components/SignIn.tsx b/frontend/src/Shop/components/SignIn.tsx index acd50ae1..42fdead5 100644 --- a/frontend/src/Shop/components/SignIn.tsx +++ b/frontend/src/Shop/components/SignIn.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from 'react'; +import { Dialog, DialogContent, DialogContentText, DialogActions, Button } from '@mui/material'; /* * this card displays the Sign-In alert when a user is not signed in @@ -7,30 +7,24 @@ import React, { CSSProperties } from 'react'; interface Props { onSignIn: () => void, onModalClose: () => void, -} - -const modalStyle: CSSProperties = { - background: 'white', - position: 'absolute', - left: '15vw', - top: '40%', - width: '70vw', - height: '25vh', - border: '1px solid black', - textAlign: 'center', - display: 'flex', - flexDirection: 'column', - justifyContent: 'center' + showModal: boolean, } export default function SignIn(props: Props) { return ( -
-

You need to sign in first.

-
- - -
-
+ + + + You need to sign in first. + + + + + + + ) } \ No newline at end of file diff --git a/frontend/src/Shop/pages/AppToUser.tsx b/frontend/src/Shop/pages/AppToUser.tsx index 1d2a9699..e649c7ab 100644 --- a/frontend/src/Shop/pages/AppToUser.tsx +++ b/frontend/src/Shop/pages/AppToUser.tsx @@ -11,7 +11,7 @@ import Refund from "../components/Refund"; const _window: WindowWithEnv = window; const backendURL = _window.__ENV && _window.__ENV.backendURL; -const axiosClient = axios.create({ baseURL: `${backendURL}`, timeout: 20000, withCredentials: true}); +const axiosClient = axios.create({ baseURL: `${backendURL}`, timeout: 35000, withCredentials: true}); /* * this page retrieves and displays all the eligible refunds a user has. @@ -22,25 +22,35 @@ export default function AppToUserPayments() { const { user, saveUser, saveShowModal, showModal, refunds, saveRefunds, onModalClose } = React.useContext(UserContext) as UserContextType; const [showRefundAlert, setShowRefundAlert] = useState(false); const [refundInfoState, setRefundInformation] = useState<{message: string, block_explorer_link: string}>({message: "", block_explorer_link: ""}); + const [refundProcessing, setRefundProcessing] = useState(false); const orderRefund = async (memo: string, originalPayment: RefundType) => { - if(user === null) { + if(refundProcessing){ + return console.log("refund already in progress"); + } + + setRefundProcessing(true); + if(user.uid === "") { + setRefundProcessing(false); return saveShowModal(true); } const refundPaymentID = originalPayment.pi_payment_id; const refundPaymentAmount = originalPayment.amount; const paymentData = { memo, refundPaymentID, refundPaymentAmount}; - const refundInformation: typeof refundInfoState = await axiosClient.post('/payments/refundable_payment/refund_payment', paymentData); - + const returnInfo = await axiosClient.post('/payments/refundable_payment/refund_payment', paymentData); + const refundInformation = returnInfo.data + console.log('refund information: ', refundInformation) setRefundInformation(refundInformation); - setShowRefundAlert(true); + saveRefunds(); + setShowRefundAlert(true); + setRefundProcessing(false); } useEffect(() => { saveRefunds(); - }, []); + },[]); return ( <> @@ -48,8 +58,8 @@ return ( App to User Payments - { - refunds[0] === undefined || refunds[0]._id === '' ? + + {(user.uid === '' || refunds[0] === undefined) ? saveRefunds()} + variant={refundProcessing} /> : refunds.map((order: RefundType) =>{ @@ -68,12 +79,14 @@ return ( pictureURL="https://live.staticflickr.com/2143/2310078068_627e69cea2_k.jpg" amount={order.amount} onClickRefund={()=> orderRefund("User Requested Refund", order)} + variant={refundProcessing} /> }) } + + { showModal && } + { showRefundAlert && setShowRefundAlert(false)} showRefundAlert={showRefundAlert} /> } - { showModal && } - { showRefundAlert && setShowRefundAlert(false)} /> }