public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: reuse price components

feat/alby
Roland Bewick 2023-09-22 16:08:19 +07:00
parent b7cafe7a39
commit 4cbbe3aaad
9 changed files with 56 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/web/pages/booking/[uid].tsx
View File

@ -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")}
</div>
<div className="col-span-2 mb-2 mt-3">
{paymentAppData.currency !== "BTC"
? new Intl.NumberFormat(i18n.language, {
style: "currency",
currency: paymentAppData.currency,
}).format(paymentAppData.price / 100.0)
: `${paymentAppData.price}`}
<Price currency={props.paymentStatus.currency} price={props.paymentStatus.amount} />
</div>
</>
)}

14
packages/features/bookings/components/event-meta/Details.tsx
View File

@ -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 (
<EventMetaBlock key={block} icon={paymentAppData.currency !== "BTC" ? CreditCard : SatSymbol}>
<EventPrice event={event} />
<EventMetaBlock key={block} icon={getPriceIcon(event.currency)}>
<Price
price={paymentAppData.price}
currency={event.currency}
displayAlternateSymbol={false}
/>
</EventMetaBlock>
);
}

27
packages/features/bookings/components/event-meta/Price.tsx
View File

@ -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 && <SatSymbol className="h-4 w-4" />}
{price}
</>
)}
</>
);
};

5
packages/features/bookings/components/event-meta/getPayIcon.ts Normal file
View File

@ -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;
}

7
packages/features/bookings/components/event-meta/getPriceIcon.ts Normal file
View File

@ -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 }>);
}

2
packages/features/bookings/components/event-meta/index.ts
View File

@ -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";

2
packages/features/bookings/types.ts
View File

@ -7,6 +7,8 @@ import type { AppsStatus } from "@calcom/types/Calendar";
export type PublicEvent = NonNullable<RouterOutputs["viewer"]["public"]["event"]>;
export type ValidationErrors<T extends object> = { key: FieldPath<T>; error: ErrorOption }[];
export type EventPrice = { currency: string; price: number; displayAlternateSymbol?: boolean };
export enum EventDetailBlocks {
// Includes duration select when event has multiple durations.
DURATION,

24
packages/features/ee/payments/components/PaymentPage.tsx
View File

@ -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<PaymentPageProps> = (props) => {
}, [isEmbed]);
const eventName = props.booking.title;
const PayIcon = getPayIcon(paymentAppData.currency);
return (
<div className="h-screen">
@ -99,11 +100,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
aria-labelledby="modal-headline">
<div>
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
{paymentAppData.currency !== "BTC" ? (
<CreditCard className="h-8 w-8 text-green-600" />
) : (
<Zap className="h-6 w-6 text-green-600" />
)}
<PayIcon className="h-8 w-8 text-green-600" />
</div>
<div className="mt-3 text-center sm:mt-5">
@ -132,18 +129,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
{props.payment.paymentOption === "HOLD" ? t("no_show_fee") : t("price")}
</div>
<div className="col-span-2 mb-6 font-semibold">
{/* TODO: cleanup */}
{paymentAppData.currency !== "BTC" ? (
new Intl.NumberFormat(i18n.language, {
style: "currency",
currency: paymentAppData.currency,
}).format(paymentAppData.price / 100.0)
) : (
<div className="flex items-center">
<SatSymbol className="h-4 w-4" />
{paymentAppData.price}
</div>
)}
<Price currency={paymentAppData.currency} price={paymentAppData.price} />
</div>
</div>
</div>

19
packages/features/eventtypes/components/EventTypeDescription.tsx
View File

@ -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 && (
<li>
{/* TODO: cleanup */}
<Badge variant="gray" startIcon={paymentAppData.currency !== "BTC" ? CreditCard : SatSymbol}>
{/* TODO: cleanup */}
{paymentAppData.currency !== "BTC"
? new Intl.NumberFormat(i18n.language, {
style: "currency",
currency: paymentAppData.currency,
}).format(paymentAppData.price / 100.0)
: `${paymentAppData.price}`}
<Badge variant="gray" startIcon={getPriceIcon(paymentAppData.currency)}>
<Price
currency={paymentAppData.currency}
price={paymentAppData.price}
displayAlternateSymbol={false}
/>
</Badge>
</li>
)}