Merge pull request #156 from HiEventsDev/develop

Show correct currency in ticket list
HiEventsDev · Aug 22, 2024 · 2e8d417 · 2e8d417
2 parents 8bad668 + 5e69be2
commit 2e8d417
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 16 deletions.
diff --git a/frontend/src/components/common/TicketsTable/SortableTicket/index.tsx b/frontend/src/components/common/TicketsTable/SortableTicket/index.tsx
@@ -18,7 +18,7 @@ import {EditTicketModal} from "../../../modals/EditTicketModal";
 import {SendMessageModal} from "../../../modals/SendMessageModal";
 import {UniqueIdentifier} from "@dnd-kit/core";
 
-export const SortableTicket = ({ticket, enableSorting}: {ticket: Ticket, enableSorting: boolean }) => {
+export const SortableTicket = ({ticket, enableSorting, currencyCode}: {ticket: Ticket, enableSorting: boolean, currencyCode: string }) => {
     const uniqueId = ticket.id as UniqueIdentifier;
     const {
         attributes,
@@ -87,11 +87,11 @@ export const SortableTicket = ({ticket, enableSorting}: {ticket: Ticket, enableS
             if (ticketPrices[0].price <= 0) {
                 return t`Free`;
             }
-            return formatCurrency(ticketPrices[0].price);
+            return formatCurrency(ticketPrices[0].price, currencyCode);
         }
 
         if (ticketPrices.length === 0) {
-            return formatCurrency(ticketPrices[0].price)
+            return formatCurrency(ticketPrices[0].price, currencyCode)
         }
 
         const prices = ticketPrices.map(ticketPrice => ticketPrice.price);
@@ -102,7 +102,7 @@ export const SortableTicket = ({ticket, enableSorting}: {ticket: Ticket, enableS
             return t`Free`;
         }
 
-        return formatCurrency(minPrice) + ' - ' + formatCurrency(maxPrice);
+        return formatCurrency(minPrice, currencyCode) + ' - ' + formatCurrency(maxPrice, currencyCode);
     }
 
     return (

diff --git a/frontend/src/components/common/TicketsTable/index.tsx b/frontend/src/components/common/TicketsTable/index.tsx
@@ -12,7 +12,7 @@ import {
     useSensors,
 } from '@dnd-kit/core';
 import {SortableContext, verticalListSortingStrategy,} from '@dnd-kit/sortable';
-import {Ticket} from "../../../types";
+import {Ticket, Event} from "../../../types";
 import {useSortTickets} from "../../../mutations/useSortTickets.ts";
 import {useParams} from "react-router-dom";
 import {showError, showSuccess} from "../../../utilites/notifications.tsx";
@@ -23,11 +23,12 @@ import {IconPlus} from "@tabler/icons-react";
 
 interface TicketCardProps {
     tickets: Ticket[];
+    event: Event;
     enableSorting: boolean;
     openCreateModal: () => void;
 }
 
-export const TicketsTable = ({tickets, openCreateModal, enableSorting = false}: TicketCardProps) => {
+export const TicketsTable = ({tickets, event, openCreateModal, enableSorting = false}: TicketCardProps) => {
     const {eventId} = useParams();
     const sortTicketsMutation = useSortTickets();
     const {items, setItems, handleDragEnd} = useDragItemsHandler({
@@ -105,6 +106,7 @@ export const TicketsTable = ({tickets, openCreateModal, enableSorting = false}:
                                 key={ticketId}
                                 ticket={ticket}
                                 enableSorting={enableSorting}
+                                currencyCode={event.currency}
                             />
                         );
                     })}

diff --git a/frontend/src/components/forms/TicketForm/index.tsx b/frontend/src/components/forms/TicketForm/index.tsx
@@ -1,6 +1,6 @@
 import {t, Trans} from "@lingui/macro";
 import {UseFormReturnType} from "@mantine/form";
-import {TaxAndFee, TaxAndFeeCalculationType, TaxAndFeeType, Ticket, TicketType} from "../../../types.ts";
+import {Event, TaxAndFee, TaxAndFeeCalculationType, TaxAndFeeType, Ticket, TicketType} from "../../../types.ts";
 import {
     ActionIcon,
     Alert,
@@ -18,7 +18,6 @@ import {
     IconCash,
     IconCoinOff,
     IconCoins,
-    IconCurrencyDollar,
     IconHeartDollar,
     IconInfoCircle,
     IconTrash,
@@ -43,9 +42,10 @@ import {InputLabelWithHelp} from "../../common/InputLabelWithHelp";
 interface TicketFormProps {
     form: UseFormReturnType<Ticket>,
     ticket?: Ticket,
+    event?: Event,
 }
 
-const TicketPriceTierForm = ({form, ticket}: TicketFormProps) => {
+const TicketPriceTierForm = ({form, ticket, event}: TicketFormProps) => {
     return form?.values?.prices?.map((price, index) => {
         const existingPrice = ticket?.prices?.find((p) => Number(p.id) === Number(price.id));
         const deleteDisabled = form?.values?.prices?.length === 1 || (existingPrice && Number(existingPrice?.quantity_sold) > 0);
@@ -66,8 +66,7 @@ const TicketPriceTierForm = ({form, ticket}: TicketFormProps) => {
                     <NumberInput decimalScale={2}
                                  min={0}
                                  fixedDecimalScale
-                                 leftSection={<IconCurrencyDollar/>}
-                                 {...form.getInputProps(`prices.${index}.price`)}
+                                 leftSection={event?.currency ? getCurrencySymbol(event.currency) : ''}                                 {...form.getInputProps(`prices.${index}.price`)}
                                  label={t`Price`}
                                  placeholder="19.99"/>
                     <TextInput
@@ -266,7 +265,7 @@ export const TicketForm = ({form, ticket}: TicketFormProps) => {
 
             {form.values.type === TicketType.Tiered && (
                 <Fieldset legend={t`Price tiers`} mt={20} mb={20}>
-                    <TicketPriceTierForm ticket={ticket} form={form}/>
+                    <TicketPriceTierForm ticket={ticket} form={form} event={event}/>
                     <Group>
                         <Button
                             size={'xs'}

diff --git a/frontend/src/components/modals/CreateEventModal/index.tsx b/frontend/src/components/modals/CreateEventModal/index.tsx
@@ -56,6 +56,15 @@ export const CreateEventModal = ({onClose}: GenericModalProps) => {
         }
     }, [isAccountFetched]);
 
+    useEffect(() => {
+        if (form.values.organizer_id && organizersQuery.data) {
+            form.setFieldValue(
+                'currency',
+                organizersQuery.data.data
+                    .find((organizer) => organizer.id === Number(form.values.organizer_id))?.currency);
+        }
+    }, [form.values.organizer_id]);
+
     const handleCreate = (values: Partial<Event>) => {
         eventMutation.mutateAsync({
             eventData: values,

diff --git a/frontend/src/components/routes/event/tickets.tsx b/frontend/src/components/routes/event/tickets.tsx
@@ -15,11 +15,13 @@ import {TableSkeleton} from "../../common/TableSkeleton";
 import {Pagination} from "../../common/Pagination";
 import {t} from "@lingui/macro";
 import {useUrlHash} from "../../../hooks/useUrlHash.ts";
+import { useGetEvent } from "../../../queries/useGetEvent.ts";
 
 export const Tickets = () => {
     const [searchParams, setSearchParams] = useFilterQueryParamSync();
     const [createModalOpen, {open: openCreateModal, close: closeCreateModal}] = useDisclosure(false);
     const {eventId} = useParams();
+    const {data: event} = useGetEvent(eventId);
     const ticketsQuery = useGetTickets(eventId, searchParams as QueryFilters);
     const pagination = ticketsQuery?.data?.meta;
     const tickets = ticketsQuery?.data?.data;
@@ -49,13 +51,15 @@ export const Tickets = () => {
                 </Button>
             </ToolBar>
 
-            <TableSkeleton isVisible={!tickets || ticketsQuery.isFetching}/>
+            <TableSkeleton isVisible={!tickets || ticketsQuery.isFetching || !event}/>
 
-            {tickets
+            {(tickets && event)
                 && (<TicketsTable
                         openCreateModal={openCreateModal}
                         enableSorting={enableSorting}
-                        tickets={tickets}/>
+                        tickets={tickets}
+                        event={event}
+                    />
                 )}
 
             {!!tickets?.length && (
@@ -70,4 +74,4 @@ export const Tickets = () => {
     );
 };
 
-export default Tickets;
+export default Tickets;