commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: update booking view UI for awaiting payment state (#24577)

Browse Source 
* fix: update booking view UI for awaiting payment state

- Show calendar icon instead of green check for awaiting payment
- Update title to show 'Your meeting is awaiting payment' or 'Your meeting is awaiting a payment method'
- Update subtitle to show 'Complete your booking: {title} on {date}'
- Handle both HOLD payment option and regular payment pending states
- Fix unused variable warning

Co-Authored-By: anik@cal.com <adhabal2002@gmail.com>

* fix: correct formatToLocalizedDate parameters

Use proper dateStyle parameter instead of time format number

Co-Authored-By: anik@cal.com <adhabal2002@gmail.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Anik Dhabal Babu
2025-10-28 14:29:27 +00:00
committed by GitHub
co-authored by anik@cal.com Devin AI
parent 8b0539028e
commit d5894d9fbc
1 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/bookings/views/bookings-single-view.tsx
+22 -5
View File
@@ -139,6 +139,7 @@ export default function Success(props: PageProps) {
const status = bookingInfo?.status;
const reschedule = bookingInfo.status === BookingStatus.ACCEPTED;
const cancellationReason = bookingInfo.cancellationReason || bookingInfo.rejectionReason;
const isAwaitingPayment = props.paymentStatus && !props.paymentStatus.success;
const attendees = bookingInfo?.attendees;
@@ -296,6 +297,12 @@ export default function Success(props: PageProps) {
if (isCancelled) {
return "";
}
if (isAwaitingPayment && !isCancelled) {
return t("complete_your_booking_subject", {
title: eventName,
date: formatToLocalizedDate(date, undefined, "long", tz),
});
}
if (needsConfirmation) {
if (props.profile.name !== null) {
return t(`user_needs_to_confirm_or_reject_booking${titleSuffix}`, {
@@ -374,12 +381,18 @@ export default function Success(props: PageProps) {
const isRescheduled = bookingInfo?.rescheduled;
const canCancelOrReschedule = !eventType?.disableCancelling || !eventType?.disableRescheduling;
const canCancelAndReschedule = !eventType?.disableCancelling && !eventType?.disableRescheduling;
const _canCancelAndReschedule = !eventType?.disableCancelling && !eventType?.disableRescheduling;
const canCancel = !eventType?.disableCancelling;
const canReschedule = !eventType?.disableRescheduling;
const successPageHeadline = (() => {
if (isAwaitingPayment && !isCancelled) {
return props.paymentStatus?.paymentOption === "HOLD"
? t("meeting_awaiting_payment_method")
: t("meeting_awaiting_payment");
}
if (needsConfirmationAndReschedulable) {
return isRecurringBooking ? t("booking_submitted_recurring") : t("booking_submitted");
}
@@ -478,14 +491,18 @@ export default function Success(props: PageProps) {
"mx-auto flex h-12 w-12 items-center justify-center rounded-full",
isRoundRobin &&
"border-cal-bg dark:border-cal-bg-muted absolute bottom-0 right-0 z-10 h-12 w-12 border-8",
!giphyImage && isReschedulable && !needsConfirmation ? "bg-success" : "",
!giphyImage && isReschedulable && needsConfirmation ? "bg-subtle" : "",
!giphyImage && isReschedulable && !needsConfirmation && !isAwaitingPayment
? "bg-success"
: "",
!giphyImage && isReschedulable && (needsConfirmation || isAwaitingPayment)
? "bg-subtle"
: "",
isCancelled ? "bg-error" : ""
)}>
{!giphyImage && !needsConfirmation && isReschedulable && (
{!giphyImage && !needsConfirmation && !isAwaitingPayment && isReschedulable && (
<Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
)}
{needsConfirmation && isReschedulable && (
{(needsConfirmation || isAwaitingPayment) && isReschedulable && (
<Icon name="calendar" className="text-emphasis h-5 w-5" />
)}
{isCancelled && <Icon name="x" className="h-5 w-5 text-red-600 dark:text-red-200" />}