= (props: PaymentViewProps) => {
)}
+ {isTaskPayment && (
+
+
Task Details
+ {isPaymentDetailsLoading
+ ?
Loading task details...
+ : undefined}
+ {!isPaymentDetailsLoading && paymentDetailsError
+ ?
{paymentDetailsError}
+ : undefined}
+ {!isPaymentDetailsLoading && !paymentDetailsError && (
+
+
+
Task Creator
+
+ {formatOptionalText(paymentDetails?.paymentCreatorHandle)}
+
+
+
+
Task Description
+
+ {props.payment.description
+ ? props.payment.description.substring(0, 500)
+ : '-'}
+
+
+
+
Project Name
+ {buildWorkAppChallengeUrl(
+ paymentDetails?.taskDetails?.projectId,
+ props.payment.externalId,
+ ) && paymentDetails?.taskDetails?.projectName
+ ? (
+
+ {paymentDetails.taskDetails.projectName}
+
+ )
+ : (
+
+ {formatOptionalText(paymentDetails?.taskDetails?.projectName)}
+
+ )}
+
+
+
Payment Approver
+
+ {formatOptionalText(paymentDetails?.taskDetails?.paymentApproverHandle)}
+
+
+
+ )}
+
+ )}
+