Skip to content

cancel booking new design added #3660

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PeerRich merged 8 commits into from
Aug 22, 2022
Merged

cancel booking new design added #3660

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
11ef0c2
feat: cancel booking new design added
Aug 2, 2022
8aeabb3
style: add space-y in button
Aug 2, 2022
694cd2b
style: ui fixed for recurring booking
Aug 2, 2022
27574b3
fix: scroll in recurring event and use translation
Aug 3, 2022
6500893
style: text 2xl instead of text-[24px]
Aug 3, 2022
c253931
fix: typo, spacing
Aug 12, 2022
8430754
fix: replaced multiple h2 tags with div
Aug 12, 2022
d53f4df
fix: padding and Icon name
Aug 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
style: ui fixed for recurring booking
  • Loading branch information
Udit Takkar committed Aug 19, 2022
commit 694cd2bf48a524f46c155d3623595f0e29bf9dcf
122 changes: 63 additions & 59 deletions apps/web/pages/cancel/[uid].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,68 +102,72 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
<h2 className="font-medium">Event Name</h2>
<h2 className="col-span-2 mb-12">{props.booking?.title}</h2>

{props.booking?.eventType.recurringEvent &&
props.booking?.eventType.recurringEvent.freq &&
props.recurringInstances && (
<div className="text-center text-gray-500">
<Icon.FiRefreshCcw className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
<p className="mb-1 -ml-2 inline px-2 py-1">
{getEveryFreqFor({
t,
recurringEvent: props.booking.eventType.recurringEvent,
recurringCount: props.recurringInstances.length,
})}
</p>
</div>
)}
<h2 className="font-medium">{t("when")}</h2>
<div className="col-span-2 flex flex-row items-start text-gray-500">
{props.booking?.eventType.recurringEvent && props.recurringInstances ? (
<>
<Icon.FiCalendar className="mt-2 ml-1 h-4 w-4" />
<div className="mb-1 inline py-1 text-left">
<div className="">
{dayjs(props.recurringInstances[0].startTime).format(
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
)}
<Collapsible
open={moreEventsVisible}
onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
<CollapsibleTrigger
type="button"
className={classNames(
"-ml-4 block w-full text-center",
moreEventsVisible ? "hidden" : ""
)}>
{t("plus_more", { count: props.recurringInstances.length - 1 })}
</CollapsibleTrigger>
<CollapsibleContent>
{props.booking?.eventType.recurringEvent?.count &&
props.recurringInstances.slice(1).map((dateObj, idx) => (
<div key={idx} className="">
{dayjs(dateObj.startTime).format(
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
)}
</div>
))}
</CollapsibleContent>
</Collapsible>
<div className="text-bookingdark col-span-2">
{props.booking?.eventType.recurringEvent &&
props.booking?.eventType.recurringEvent.freq &&
props.recurringInstances && (
<div className="text-left text-gray-500">
<Icon.RefreshCcw className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4" />
<p className="mb-1 -ml-2 inline px-2 py-1 text-gray-900">
{getEveryFreqFor({
t,
recurringEvent: props.booking.eventType.recurringEvent,
recurringCount: props.recurringInstances.length,
})}
</p>
</div>
)}
<div className="col-span-2 flex flex-row items-start ">
{props.booking?.eventType.recurringEvent && props.recurringInstances ? (
<>
{/* <Icon.Calendar className="mt-2 ml-1 h-4 w-4" /> */}
<div className="mb-1 inline py-1 text-left">
<div className="">
{dayjs(props.recurringInstances[0].startTime).format(
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
)}
<Collapsible
open={moreEventsVisible}
onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
<CollapsibleTrigger
type="button"
className={classNames(
"-ml-4 block w-full text-center",
moreEventsVisible ? "hidden" : ""
)}>
{t("plus_more", { count: props.recurringInstances.length - 1 })}
</CollapsibleTrigger>
<CollapsibleContent>
{props.booking?.eventType.recurringEvent?.count &&
props.recurringInstances.slice(1).map((dateObj, idx) => (
<div key={idx} className="">
{dayjs(dateObj.startTime).format(
detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
)}
</div>
))}
</CollapsibleContent>
</Collapsible>
</div>
</div>
</>
) : (
<div className="text-bookingdark col-span-2 mb-6 ">
{dayjs(props.booking?.startTime).format("MMMM DD, YYYY")}
<br />
{dayjs(props.booking?.startTime).format("LT")} -{" "}
{dayjs(props.booking?.startTime)
.add(props.booking?.eventType?.length ?? 0, "m")
.format("LT")}
<span className="text-bookinglight">
(
{localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()}
)
</span>
</div>
</>
) : (
<div className="text-bookingdark col-span-2 mb-6 ">
{dayjs(props.booking?.startTime).format("MMMM DD, YYYY")}
<br />
{dayjs(props.booking?.startTime).format("LT")} -{" "}
{dayjs(props.booking?.startTime)
.add(props.booking?.eventType?.length ?? 0, "m")
.format("LT")}
<span className="text-bookinglight">
({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
</span>
</div>
)}
)}
</div>
</div>
</div>
</div>
Expand Down