From 4cbbe3aaadbf20b58c954184344e65cf2d0e8e1d Mon Sep 17 00:00:00 2001 From: Roland Bewick Date: Fri, 22 Sep 2023 16:08:19 +0700 Subject: [PATCH] chore: reuse price components --- apps/web/pages/booking/[uid].tsx | 8 ++---- .../components/event-meta/Details.tsx | 14 ++++++---- .../bookings/components/event-meta/Price.tsx | 27 ++++++++++--------- .../components/event-meta/getPayIcon.ts | 5 ++++ .../components/event-meta/getPriceIcon.ts | 7 +++++ .../bookings/components/event-meta/index.ts | 2 ++ packages/features/bookings/types.ts | 2 ++ .../ee/payments/components/PaymentPage.tsx | 24 ++++------------- .../components/EventTypeDescription.tsx | 19 +++++++------ 9 files changed, 56 insertions(+), 52 deletions(-) create mode 100644 packages/features/bookings/components/event-meta/getPayIcon.ts create mode 100644 packages/features/bookings/components/event-meta/getPriceIcon.ts diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index 361bdc2cb1..1e2bdcfc9c 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/apps/web/pages/booking/[uid].tsx @@ -23,6 +23,7 @@ import { useIsEmbed, } from "@calcom/embed-core/embed-iframe"; import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; +import { Price } from "@calcom/features/bookings/components/event-meta/Price"; import { SMS_REMINDER_NUMBER_FIELD, SystemField } from "@calcom/features/bookings/lib/SystemField"; import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking"; import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields"; @@ -486,12 +487,7 @@ export default function Success(props: SuccessProps) { : t("payment")}
- {paymentAppData.currency !== "BTC" - ? new Intl.NumberFormat(i18n.language, { - style: "currency", - currency: paymentAppData.currency, - }).format(paymentAppData.price / 100.0) - : `${paymentAppData.price}`} +
)} diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx index f69f77b35b..ee7b9f3017 100644 --- a/packages/features/bookings/components/event-meta/Details.tsx +++ b/packages/features/bookings/components/event-meta/Details.tsx @@ -4,15 +4,15 @@ import React from "react"; import classNames from "@calcom/lib/classNames"; import getPaymentAppData from "@calcom/lib/getPaymentAppData"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { Clock, CheckSquare, RefreshCcw, CreditCard } from "@calcom/ui/components/icon"; -import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol"; +import { Clock, CheckSquare, RefreshCcw } from "@calcom/ui/components/icon"; import type { PublicEvent } from "../../types"; import { EventDetailBlocks } from "../../types"; import { AvailableEventLocations } from "./AvailableEventLocations"; import { EventDuration } from "./Duration"; import { EventOccurences } from "./Occurences"; -import { EventPrice } from "./Price"; +import { Price } from "./Price"; +import { getPriceIcon } from "./getPriceIcon"; type EventDetailsPropsBase = { event: PublicEvent; @@ -157,8 +157,12 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even if (event.price <= 0 || paymentAppData.price <= 0) return null; return ( - - + + ); } diff --git a/packages/features/bookings/components/event-meta/Price.tsx b/packages/features/bookings/components/event-meta/Price.tsx index 88c3c34e87..8adf0c3971 100644 --- a/packages/features/bookings/components/event-meta/Price.tsx +++ b/packages/features/bookings/components/event-meta/Price.tsx @@ -1,20 +1,23 @@ -import getPaymentAppData from "@calcom/lib/getPaymentAppData"; +import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol"; -import type { PublicEvent } from "../../types"; +import type { EventPrice } from "../../types"; -export const EventPrice = ({ event }: { event: PublicEvent }) => { - const paymentAppData = getPaymentAppData(event); - - if (paymentAppData.price === 0) return null; +export const Price = ({ price, currency, displayAlternateSymbol: displaySymbol = true }: EventPrice) => { + if (price === 0) return null; return ( <> - {paymentAppData.currency !== "BTC" - ? Intl.NumberFormat("en", { - style: "currency", - currency: paymentAppData.currency.toUpperCase(), - }).format(paymentAppData.price / 100.0) - : `${paymentAppData.price}`} + {currency !== "BTC" ? ( + Intl.NumberFormat("en", { + style: "currency", + currency: currency.toUpperCase(), + }).format(price / 100.0) + ) : ( + <> + {displaySymbol && } + {price} + + )} ); }; diff --git a/packages/features/bookings/components/event-meta/getPayIcon.ts b/packages/features/bookings/components/event-meta/getPayIcon.ts new file mode 100644 index 0000000000..0219b86944 --- /dev/null +++ b/packages/features/bookings/components/event-meta/getPayIcon.ts @@ -0,0 +1,5 @@ +import { CreditCard, Zap } from "lucide-react"; + +export function getPayIcon(currency: string): React.FC<{ className: string }> | string { + return currency !== "BTC" ? CreditCard : Zap; +} diff --git a/packages/features/bookings/components/event-meta/getPriceIcon.ts b/packages/features/bookings/components/event-meta/getPriceIcon.ts new file mode 100644 index 0000000000..4e122f59c5 --- /dev/null +++ b/packages/features/bookings/components/event-meta/getPriceIcon.ts @@ -0,0 +1,7 @@ +import { CreditCard } from "lucide-react"; + +import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol"; + +export function getPriceIcon(currency: string): React.FC<{ className: string }> | string { + return currency !== "BTC" ? CreditCard : (SatSymbol as React.FC<{ className: string }>); +} diff --git a/packages/features/bookings/components/event-meta/index.ts b/packages/features/bookings/components/event-meta/index.ts index ca610b80d5..debcc5a3ac 100644 --- a/packages/features/bookings/components/event-meta/index.ts +++ b/packages/features/bookings/components/event-meta/index.ts @@ -2,3 +2,5 @@ export { EventDetails, EventMetaBlock } from "./Details"; export { EventTitle } from "./Title"; export { EventMetaSkeleton } from "./Skeleton"; export { EventMembers } from "./Members"; +export { getPriceIcon } from "./getPriceIcon"; +export { getPayIcon } from "./getPayIcon"; diff --git a/packages/features/bookings/types.ts b/packages/features/bookings/types.ts index b21da6d94a..7c2b070133 100644 --- a/packages/features/bookings/types.ts +++ b/packages/features/bookings/types.ts @@ -7,6 +7,8 @@ import type { AppsStatus } from "@calcom/types/Calendar"; export type PublicEvent = NonNullable; export type ValidationErrors = { key: FieldPath; error: ErrorOption }[]; +export type EventPrice = { currency: string; price: number; displayAlternateSymbol?: boolean }; + export enum EventDetailBlocks { // Includes duration select when event has multiple durations. DURATION, diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx index ca0308c996..9e60d42741 100644 --- a/packages/features/ee/payments/components/PaymentPage.tsx +++ b/packages/features/ee/payments/components/PaymentPage.tsx @@ -1,3 +1,5 @@ +import { Price } from "bookings/components/event-meta/Price"; +import { getPayIcon } from "bookings/components/event-meta/getPayIcon"; import classNames from "classnames"; import dynamic from "next/dynamic"; import Head from "next/head"; @@ -13,8 +15,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat"; import { localStorage } from "@calcom/lib/webstorage"; -import { CreditCard, Zap } from "@calcom/ui/components/icon"; -import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol"; import type { PaymentPageProps } from "../pages/payment"; @@ -73,6 +73,7 @@ const PaymentPage: FC = (props) => { }, [isEmbed]); const eventName = props.booking.title; + const PayIcon = getPayIcon(paymentAppData.currency); return (
@@ -99,11 +100,7 @@ const PaymentPage: FC = (props) => { aria-labelledby="modal-headline">
- {paymentAppData.currency !== "BTC" ? ( - - ) : ( - - )} +
@@ -132,18 +129,7 @@ const PaymentPage: FC = (props) => { {props.payment.paymentOption === "HOLD" ? t("no_show_fee") : t("price")}
- {/* TODO: cleanup */} - {paymentAppData.currency !== "BTC" ? ( - new Intl.NumberFormat(i18n.language, { - style: "currency", - currency: paymentAppData.currency, - }).format(paymentAppData.price / 100.0) - ) : ( -
- - {paymentAppData.price} -
- )} +
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx index a26252caa7..fd8343a45e 100644 --- a/packages/features/eventtypes/components/EventTypeDescription.tsx +++ b/packages/features/eventtypes/components/EventTypeDescription.tsx @@ -2,6 +2,8 @@ import type { Prisma } from "@prisma/client"; import { useMemo } from "react"; import type { z } from "zod"; +import { Price } from "@calcom/features/bookings/components/event-meta/Price"; +import { getPriceIcon } from "@calcom/features/bookings/components/event-meta/getPriceIcon"; import { classNames, parseRecurringEvent } from "@calcom/lib"; import getPaymentAppData from "@calcom/lib/getPaymentAppData"; import { useLocale } from "@calcom/lib/hooks/useLocale"; @@ -9,8 +11,7 @@ import type { baseEventTypeSelect } from "@calcom/prisma"; import { SchedulingType } from "@calcom/prisma/enums"; import type { EventTypeModel } from "@calcom/prisma/zod"; import { Badge } from "@calcom/ui"; -import { Clock, Users, RefreshCw, CreditCard, Clipboard, Plus, User, Lock } from "@calcom/ui/components/icon"; -import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol"; +import { Clock, Users, RefreshCw, Clipboard, Plus, User, Lock } from "@calcom/ui/components/icon"; export type EventTypeDescriptionProps = { eventType: Pick< @@ -96,14 +97,12 @@ export const EventTypeDescription = ({ {paymentAppData.enabled && (
  • {/* TODO: cleanup */} - - {/* TODO: cleanup */} - {paymentAppData.currency !== "BTC" - ? new Intl.NumberFormat(i18n.language, { - style: "currency", - currency: paymentAppData.currency, - }).format(paymentAppData.price / 100.0) - : `${paymentAppData.price}`} + +
  • )}