disabled switch to change from free to paid event if an event has reg…

CHANGELOG.md

@@ -11,6 +11,8 @@
 ### 🎨 - Designendringer
 
 ## Neste versjon
+
+- 🦟 **Vipps betaling**. Diverse bugs i betalingsløsningen er nå fikset.
 - ✨ **Bannere**. Tidsbegrensede bannere kan nå opprettes.
 
 ## versjon 2023.24.09

src/api/api.tsx

@@ -100,6 +100,7 @@ export const STRIKES_ENDPOINT = 'strikes';
 export const SUBMISSIONS_ENDPOINT = 'submissions';
 export const USERS_ENDPOINT = 'users';
 export const WARNINGS_ENDPOINT = 'warnings';
+export const PAYMENT_ENDPOINT = 'payments';
 
 export default {
   // Auth
@@ -161,6 +162,9 @@ export default {
   deleteRegistration: (eventId: Event['id'], userId: User['user_id']) =>
     IFetch<RequestResponse>({ method: 'DELETE', url: `${EVENTS_ENDPOINT}/${String(eventId)}/${EVENT_REGISTRATIONS_ENDPOINT}/${userId}/` }),
 
+  // Payments
+  createPaymentOrder: (item: Partial<Order>) => IFetch<Order>({ method: 'POST', url: `${PAYMENT_ENDPOINT}/`, data: item }),
+
   // Forms
   getForm: (formId: string) => IFetch<Form>({ method: 'GET', url: `${FORMS_ENDPOINT}/${formId}/` }),
   getFormTemplates: () => IFetch<Array<Form>>({ method: 'GET', url: `${FORMS_ENDPOINT}/` }),

src/hooks/Payment.tsx

@@ -0,0 +1,16 @@
+import { useMutation, UseMutationResult, useQueryClient } from 'react-query';
+
+import { Order, RequestResponse } from 'types';
+
+import API from 'api/api';
+
+export const ORDER_QUERY_KEYS = 'payment';
+
+export const useCreatePaymentOrder = (): UseMutationResult<Partial<Order>, RequestResponse, Partial<Order>, unknown> => {
+  const queryClient = useQueryClient();
+  return useMutation((item) => API.createPaymentOrder(item), {
+    onSuccess: () => {
+      queryClient.invalidateQueries(ORDER_QUERY_KEYS);
+    },
+  });
+};

src/pages/EventAdministration/components/EventEditor.tsx

@@ -467,6 +467,7 @@ const EventEditor = ({ eventId, goToEvent }: EventEditorProps) => {
           </Row>
           <Bool
             control={control}
+            disabled={Boolean(data?.list_count && data?.list_count > 0)}
             formState={formState}
             label={
               <>

src/pages/EventDetails/components/CountdownTimer.tsx

@@ -1,9 +1,13 @@
 import styled from '@emotion/styled';
-import { Box, Typography } from '@mui/material';
+import { Box, Button, CircularProgress, Typography } from '@mui/material';
 import { differenceInMilliseconds, formatDistanceStrict } from 'date-fns';
 import { nb } from 'date-fns/locale';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+
+import { Event, Order } from 'types';
+
+import { useCreatePaymentOrder } from 'hooks/Payment';
+import { useSnackbar } from 'hooks/Snackbar';
 
 import Paper from 'components/layout/Paper';
 
@@ -37,17 +41,19 @@ const convertTime = (milliseconds?: number) => {
   });
 };
 
-type Order = {
-  expire_date: Date;
-  payment_link?: string;
+type Registration = {
+  payment_expiredate: Date;
+  event_id: Event['id'];
 };
 
-const CountdownTimer = ({ payment_link, expire_date }: Order) => {
-  const [timeLeft, setTimeLeft] = useState(convertTime(getTimeDifference(expire_date)));
+const CountdownTimer = ({ payment_expiredate, event_id }: Registration) => {
+  const [timeLeft, setTimeLeft] = useState(convertTime(getTimeDifference(payment_expiredate)));
+  const createPaymentOrder = useCreatePaymentOrder();
+  const showSnackbar = useSnackbar();
 
   useEffect(() => {
     const interval = setInterval(() => {
-      const distance = getTimeDifference(expire_date);
+      const distance = getTimeDifference(payment_expiredate);
 
       if (distance && distance > 0) {
         setTimeLeft(convertTime(distance));
@@ -61,12 +67,28 @@ const CountdownTimer = ({ payment_link, expire_date }: Order) => {
     };
   }, []);
 
+  const create = (data: Partial<Order>) => {
+    createPaymentOrder.mutate(data, {
+      onSuccess: (data) => {
+        const payment_link = data.payment_link;
+        window.location.replace(payment_link || '');
+      },
+      onError: () => {
+        showSnackbar('Det skjedde en feil med oppretting betalingsordre.', 'error');
+      },
+    });
+  };
+
+  if (new Date(payment_expiredate) <= new Date()) {
+    return null;
+  }
+
   return (
     <ContentPaper>
       <Box sx={{ textAlign: 'center', p: 2 }}>
-        <Link to={payment_link || '/'}>
-          <img alt='Betal med vipps' src={VIPPS} />
-        </Link>
+        <Button disabled={createPaymentOrder.isLoading} onClick={() => create({ event: event_id })}>
+          {createPaymentOrder.isLoading ? <CircularProgress /> : <img alt='Betal med vipps' src={VIPPS} />}
+        </Button>
       </Box>
       <Typography align='center' sx={{ color: (theme) => theme.palette.text.primary }}>
         Betal innen {timeLeft} for å beholde plassen på arrangementet.

src/pages/EventDetails/components/EventRenderer.tsx

@@ -146,8 +146,12 @@ const EventRenderer = ({ data, preview = false }: EventRendererProps) => {
     if (user) {
       deleteRegistration.mutate(user.user_id, {
         onSuccess: (response) => {
-          showSnackbar(response.detail, 'success');
-          event('unregistered', 'event-registration', `Unregistered for event: ${data.title}`);
+          if (registration?.has_paid_order) {
+            showSnackbar('Du har blitt meldt av arrangementet, og vil få refundert pengene innen kort tid', 'success');
+          } else {
+            showSnackbar(response.detail, 'success');
+            event('unregistered', 'event-registration', `Unregistered for event: ${data.title}`);
+          }
         },
         onError: (e) => {
           showSnackbar(e.detail, 'error');
@@ -438,8 +442,8 @@ const EventRenderer = ({ data, preview = false }: EventRendererProps) => {
       <Stack gap={1} sx={{ width: '100%' }}>
         <AspectRatioImg alt={data.image_alt || data.title} borderRadius src={data.image} />
         {lgDown && <Info />}
-        {registration && data.paid_information && !registration.has_paid_order && (
-          <CountdownTimer expire_date={registration.order.expire_date} payment_link={registration.order.payment_link} />
+        {registration && data.paid_information && !registration.has_paid_order && !registration.is_on_wait && (
+          <CountdownTimer event_id={data.id} payment_expiredate={registration.payment_expiredate} />
         )}
         <ContentPaper>
           <Typography gutterBottom sx={{ color: (theme) => theme.palette.text.primary, fontSize: '2.4rem', wordWrap: 'break-word' }} variant='h1'>

src/types/Event.tsx

@@ -3,8 +3,6 @@ import { BaseGroup, Group } from 'types/Group';
 import { Permissions } from 'types/Misc';
 import { User, UserList } from 'types/User';
 
-import { Order } from './Order';
-
 export type Category = {
   created_at: string;
   id: number;
@@ -84,7 +82,7 @@ export type Registration = {
   survey_submission: UserSubmission;
   has_unanswered_evaluation: boolean;
   user_info: UserList;
-  order: Order;
+  payment_expiredate: Date;
   has_paid_order?: boolean;
 };
 

src/types/Order.tsx

@@ -2,11 +2,9 @@ import { Event } from 'types/Event';
 import { User } from 'types/User';
 
 export type Order = {
-  access: string[];
   order_id: string;
   user_id: User['user_id'];
-  event_id: Event['id'];
+  event: Event['id'];
   status: string;
-  expire_date: Date;
   payment_link: string;
 };