diff --git a/apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx b/apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx index ee4587d638..b6f1ab9f9d 100644 --- a/apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx +++ b/apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx @@ -244,15 +244,15 @@ export const AttendanceCard = ({ chargeScheduleDate={chargeScheduleDate ?? null} /> -
- +
+ - Oppdater matallergier + Oppdater matpreferanser {attendance.attendancePrice && } diff --git a/apps/web/src/app/arrangementer/components/AttendanceCard/EventRules.tsx b/apps/web/src/app/arrangementer/components/AttendanceCard/EventRules.tsx index cce88f7146..ee7cfe36b0 100644 --- a/apps/web/src/app/arrangementer/components/AttendanceCard/EventRules.tsx +++ b/apps/web/src/app/arrangementer/components/AttendanceCard/EventRules.tsx @@ -1,19 +1,15 @@ import { PenaltyRules } from "@/utils/penalty-rules" import { - Accordion, - AccordionContent, - AccordionItem, - AccordionTrigger, AlertDialog, AlertDialogCancel, AlertDialogContent, - AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Text, + Title, cn, } from "@dotkomonline/ui" -import { IconBook2 } from "@tabler/icons-react" +import { IconBook2, IconX } from "@tabler/icons-react" import { useState } from "react" interface EventRulesProps { @@ -25,32 +21,29 @@ export const EventRules = ({ className }: EventRulesProps) => { return ( -
+
- Arrangementregler + Arrangementregler
- setOpen(false)} - > - Arrangementregler - - Ved påmelding av dette arrangementet godtar du å følge Onlines arrangementregler beskrevet under. - -
- - - Prikkeregler - - - - - -
- - Jeg er inneforstått med reglene - + setOpen(false)}> +
+ + + Arrangementregler + + + + + + +
+ +
+ Ved påmelding av dette arrangementet godtar du å følge Onlines arrangementregler beskrevet under. + + +
) diff --git a/apps/web/src/app/arrangementer/components/AttendanceCard/PaymentExplanationDialog.tsx b/apps/web/src/app/arrangementer/components/AttendanceCard/PaymentExplanationDialog.tsx index 0323b5a6ba..f8a17b1a82 100644 --- a/apps/web/src/app/arrangementer/components/AttendanceCard/PaymentExplanationDialog.tsx +++ b/apps/web/src/app/arrangementer/components/AttendanceCard/PaymentExplanationDialog.tsx @@ -2,55 +2,55 @@ import { AlertDialog, AlertDialogCancel, AlertDialogContent, - AlertDialogDescription, - AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Text, + Title, } from "@dotkomonline/ui" -import { IconInfoCircle, IconX } from "@tabler/icons-react" +import { IconQuestionMark, IconX } from "@tabler/icons-react" +import { useState } from "react" export const PaymentExplanationDialog = () => { + const [open, setOpen] = useState(false) + return ( - + -
- - Hvordan fungerer betaling? +
+ + Hvordan virker betaling?
- - - - - - - Betalingsinformasjon - - - - + setOpen(false)}> +
+ + + Betalingsinformasjon + - - - Når du melder deg på et arrangement med betaling, aktiveres betalingsknappen. Den viser så en nedtelling - som indikerer hvor lenge du har på deg til å reservere en betaling. - - - Reservert betaling: - Beløpet holdes av på kontoen din og trekkes senest på den femte dagen, eller før dersom avmeldingsfristen - inntrer tidligere. - - - Dersom ingen betaling er reservert innen nedtellingen er ferdig, vil du automatisk bli avmeldt - arrangementet. - - - Du kan selv melde deg av når som helst før avmeldingsfristen. Da blir betalingsreservasjonen automatisk - kansellert i banken din. - - - + + + +
+ +
+ + Når du melder deg på et arrangement med betaling, aktiveres betalingsknappen. Den viser så en nedtelling som + indikerer hvor lenge du har på deg til å reservere en betaling. + + + Dersom ingen betaling er reservert innen nedtellingen er ferdig, vil du automatisk bli avmeldt + arrangementet. Etter avmeldingsfristen blir du i stedet suspendert inntil du har betalt. + + + Beløpet holdes av på kontoen din og trekkes senest på den femte dagen, eller før dersom avmeldingsfristen + inntrer tidligere. Etter avmeldingsfristen blir du i stedet trukket med en gang. + + + Du kan selv melde deg av når som helst før avmeldingsfristen. Da blir betalingsreservasjonen automatisk + kansellert i banken din. + +
) diff --git a/apps/web/src/app/arrangementer/components/AttendanceCard/ViewAttendeesButton.tsx b/apps/web/src/app/arrangementer/components/AttendanceCard/ViewAttendeesButton.tsx index d4d26e7bc3..7824d45850 100644 --- a/apps/web/src/app/arrangementer/components/AttendanceCard/ViewAttendeesButton.tsx +++ b/apps/web/src/app/arrangementer/components/AttendanceCard/ViewAttendeesButton.tsx @@ -84,17 +84,14 @@ export const ViewAttendeesButton = ({ return ( {button} - setAttendeeListOpen(false)} - > + setAttendeeListOpen(false)}>
Påmeldingsliste - +
@@ -130,7 +127,7 @@ interface AttendeeListProps { const AttendeeList = ({ attendees, user, maxNumberOfAttendees }: AttendeeListProps) => { if (!attendees.length) { - return Ingen påmeldte + return Ingen påmeldte } return attendees.map((attendee, index) => { diff --git a/apps/web/src/utils/penalty-rules.tsx b/apps/web/src/utils/penalty-rules.tsx index 7cc3b0bbd8..d3461a347c 100644 --- a/apps/web/src/utils/penalty-rules.tsx +++ b/apps/web/src/utils/penalty-rules.tsx @@ -1,42 +1,47 @@ -import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Text, Title } from "@dotkomonline/ui" +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Text, TextLink, Title, cn } from "@dotkomonline/ui" import Image from "next/image" import Link from "next/link" -export const PenaltyRules = () => { +interface Props { + small: boolean +} + +export const PenaltyRules = ({ small = false }: Partial) => { return ( -
- - - - - - - - +
+ + + + + + + +
) } -const WhatIsAMark = () => ( -
- Hva er en prikk? - +const WhatIsAMark = ({ small }: Props) => ( +
+ Hva er en prikk? + Prikker er et straffetiltak for å sikre at medlemmene av Online følger reglene. Det at du har aktive prikker innebærer at du vil måtte vente en viss periode etter ordinær påmeldingsstart for å melde deg på et arrangement. Hver prikk varer i 14 dager fra tidspunktet du får den. - - + + + Prikker er overlappende. Dette betyr at dersom du får nye prikker når du allerede har aktive prikker fra en annen anledning, så vil disse prikkene plusses sammen. Hver anledning som har gitt deg prikker vil ha sin egen levetid før de ikke er aktive lenger. - + <Title element="h3" size={small ? "sm" : "md"}> Eksempel - + Du får 2 prikker for å melde deg av et arrangement sent. Nå har du fire timers utsettelse på alle påmeldinger. Fire dager senere får du to nye prikker for å ikke ha sendt inn tilbakemeldingsskjema innen tidsfristen. Nå vil du i ti dager fremover ha totalt 4 aktive prikker og dermed ha 24 timers utsettelse på alle påmeldinger. Etter disse @@ -44,139 +49,153 @@ const WhatIsAMark = () => ( fire timers utsettelse på påmeldinger. - Eksempelet visualisert: Eksempel på prikker - + <Title element="h3" size={small ? "sm" : "md"}> Ferier - + Varigheten til prikker er fryst i ferier. Disse er definert fra 5. desember til 10. januar og 1. juni til 15. august. Dersom en prikk gis 24. mai vil altså denne prikken utløpe 20. august.
) -const WhatGivesAMark = () => ( -
- Hva gir prikker? - Dette er en kort punktliste. Unntak og videre forklaringer finner du lenger ned. -
    -
  • +const WhatGivesAMark = ({ small }: Props) => ( +
    + Hva gir prikker? + + Dette er en kort punktliste. Unntak og videre forklaringer finner du lenger ned. + + +
      + Å melde seg av etter avmeldingsfristen inntil 2 timer før arrangementstart gir 2 prikker, etter dette gis det 3 prikker. - -
    • Å ikke møte opp på et arrangement man har plass på gir 3 prikker.
      • -
    • + + + Å ikke møte opp på et arrangement man har plass på gir 3 prikker. + + Å møte opp etter arrangementets start eller innslipp er ferdig gir i utgangspunktet 3 prikker. Her vil en skjønnsmessig vurdering bli foretatt ut fra hvor sent deltakeren ankom arrangementet. -
      • -
    • Å ikke svare på tilbakemeldingsskjema innen tidsfristen gir 2 prikker.
      • -
    • + + + Å ikke svare på tilbakemeldingsskjema innen tidsfristen gir 2 prikker. + + Å ikke overholde betalingsfristen gir 1 prikk. Dette medfører i tillegg suspensjon fra alle Onlines arrangementer inntil betaling er gjennomført. -
      • +
    - Den ansvarlige komiteen kan også foreta en skjønnsmessig vurdering som gagner deltakeren. + + + Den ansvarlige komiteen kan også foreta en skjønnsmessig vurdering som gagner deltakeren. +
    ) -const CancellationPolicy = () => ( -
    - Avmelding +const CancellationPolicy = ({ small }: Props) => ( +
    + Avmelding
      -
    • + Ved sykdom eller andre ekstraordinære hendelser vil man ikke få prikk ved avmelding 5 timer før arrangementsstart. Etter dette gis prikker som normalt iht. punktene over. -
      • -
    • + + Alle komiteer ønsker at du melder deg av arrangementer selv om du vet dette vil medføre prikker. Dette er slik at noen andre kan bli obs på plassen sin så tidlig som mulig. -
      • +
    ) -const WaitlistPolicy = () => ( -
    - Venteliste +const WaitlistPolicy = ({ small }: Props) => ( +
    + Venteliste
      -
    • Hvis du står på venteliste kan du melde deg av helt til avmeldingsfristen.
      • -
    • + + Hvis du står på venteliste kan du melde deg av helt til avmeldingsfristen. + + Når du står på venteliste er du inneforstått med at du når som helst kan få plass på arrangementet og dermed er bundet til reglene for arrangementet på lik linje med andre påmeldte. -
      • +
    ) -const PaymentPolicy = () => ( -
    - Betaling +const PaymentPolicy = ({ small }: Props) => ( +
    + Betaling
      -
    • Ved manglende betaling suspenderes man fra alle Onlines arrangementer inntil betalingen er gjennomført.
      • -
    • + + Ved manglende betaling suspenderes man fra alle Onlines arrangementer inntil betalingen er gjennomført. + + Ved betalt arrangement, men manglende oppmøte, vil man ikke få tilbakebetalt dersom avmelding skjer etter frist. Dersom neste på venteliste er tilgjengelig kan dette gjøres unntak for. -
      • +
    ) -const BehaviorPolicy = () => ( -
    - Oppførsel +const BehaviorPolicy = ({ small }: Props) => ( +
    + Oppførsel
      -
    • + Ved upassende oppførsel under et av Onlines arrangement vil du stå økonomisk ansvarlig for eventuelle skader, og i verste fall risikere utestengelse fra alle Onlines arrangement. -
      • +
    ) -const CompanyEventPolicy = () => ( -
    - Bedriftsarrangementer +const CompanyEventPolicy = ({ small }: Props) => ( +
    + Bedriftsarrangementer
      -
    • + Ved bedriftsarrangementer åpner dørene i henhold til starttid på arrangementet. Ti minutter etter at dørene åpner slippes oppmøte på ventelisten inn dersom det er plass. 15 minutter etter at dørene åpner stenger innslippet. -
      • -
    • + + Det kreves at en deltaker svarer på den elektroniske tilbakemeldingen etter bedriftsarrangementer. Det vil komme e-post etter arrangementet med lenke til tilbakemeldingsskjema som må besvares innen den oppgitte fristen. Dersom en deltaker ikke svarer innen fristen, vil dette gi to prikker. -
      • -
    • + + Deltakere på bedriftsarrangementer skal delta på alle obligatoriske deler av arrangementet. For bedriftspresentasjon og kurs vil dette henholdsvis innebære selve presentasjonen og kursopplegget. De første 45 minuttene med påfølgende mingling regnes også som obligatorisk. Dersom en deltaker forlater den obligatoriske delen uten gyldig grunn vil dette medføre 2 prikker. -
      • +
    ) -const WhyHaveIGotMarks = () => { +const WhyHaveIGotMarks = ({ small }: Props) => { return ( -
    - Hvorfor har jeg fått prikk? - - Under{" "} - - Profil - {" "} +
    + Hvorfor har jeg fått prikk? + + I{" "} + + profilen din + {" "} vil du kunne se prikkene dine, og eventuelle begrunnelser. - + Dersom du mener noe feil har skjedd, vennligst ta kontakt med arrangøren som står oppført på arrangementet. Kontaktinfo for arrangerende komité vises på arrangementssiden. @@ -184,49 +203,51 @@ const WhyHaveIGotMarks = () => { ) } -const MarkTable = () => ( +const MarkTable = ({ small }: Props) => ( - Antall prikker + Antall prikker - Utsettelse på påmeldinger + Utsettelse på påmeldinger - 1 prikk + 1 prikk - 1t + 1 time - 2 prikker + 2 prikker - 4t + 4 timer - 3 prikker + 3 prikker - 24t + 24 timer - 6+ prikker + 6+ prikker - Suspensjon i 14 dager fra siste prikk + + Suspensjon i 14 dager fra siste prikk + diff --git a/packages/ui/src/atoms/Typography/TextLink.tsx b/packages/ui/src/atoms/Typography/TextLink.tsx new file mode 100644 index 0000000000..3c1aaf5af0 --- /dev/null +++ b/packages/ui/src/atoms/Typography/TextLink.tsx @@ -0,0 +1,51 @@ +import NextLink from "next/link" +import type { ComponentPropsWithRef, ElementType, PropsWithChildren } from "react" +import { cn } from "../../utils" +import { cva, type VariantProps } from "cva" + +export type TextLinkProps = VariantProps & PropsWithChildren & { + /** + * The HTML element or React component to render this element as. + * + * Defaults to Next.js Link component. + */ + element?: E + className?: string + href: ComponentPropsWithRef["href"] +} & ComponentPropsWithRef + +export function TextLink({ + children, + element, + className, + href, + ref, + size, + truncate, + ...props +}: TextLinkProps) { + const Component = element ?? NextLink + const classes = cn(textLink({ size, truncate }), className) + return ( + + {children} + + ) +} + +export const textLink = cva("text-inherit font-body underline decoration-gray-950/50 hover:decoration-gray-950 dark:decoration-white/50 dark:hover:decoration-white", { + variants: { + size: { + sm: "text-sm", + md: "text-md", + lg: "text-lg", + }, + truncate: { + true: "truncate", + }, + }, + defaultVariants: { + size: "md", + truncate: false, + }, +}) diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 084cac0bea..f78df0f100 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -9,6 +9,7 @@ export * from "./atoms/Avatar/Avatar" export * from "./atoms/Circle/Circle" export * from "./atoms/Typography/Title" export * from "./atoms/Typography/Text" +export * from "./atoms/Typography/TextLink" export * from "./atoms/Select/Select" export * from "./atoms/Tooltip/Tooltip" export * from "./atoms/Collapsible/Collapsible" diff --git a/packages/ui/src/molecules/Dialog/Dialog.tsx b/packages/ui/src/molecules/Dialog/Dialog.tsx index 2e8c45413b..7ba7aa3b10 100644 --- a/packages/ui/src/molecules/Dialog/Dialog.tsx +++ b/packages/ui/src/molecules/Dialog/Dialog.tsx @@ -27,7 +27,7 @@ export const AlertDialogOverlay: FC = ({ className, ref ( ) @@ -45,7 +48,10 @@ export const TableRowDivider = React.forwardRef (
    {children}