Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 520x 1111x 1111x 1111x 1111x 1x | import { ReactElement } from "react";
import styled from "styled-components";
import {
ProgramItem,
ProgramItemSignupStrategy,
} from "shared/types/models/programItem";
import { isDirectSignupAlwaysOpen } from "shared/utils/isDirectSignupAlwaysOpen";
import { programItemCardEndMargin } from "client/views/my-program-items/components/shared";
import {
DirectSignupWithProgramItem,
LotterySignupWithProgramItem,
} from "client/views/my-program-items/myProgramItemsSlice";
import { ProgramItemButtonGroup } from "client/views/program-item/components/ProgramItemButtonGroup";
import { isAlreadyDirectySigned } from "client/views/program-item/programItemUtils";
import { AdmissionTicketLink } from "client/views/program-item/signup/components/AdmissionTicketLink";
import { SignupHelpText } from "client/views/program-item/signup/components/SignupHelpText";
import { ProgramItemDirectSignup } from "client/views/program-item/signup/components/direct-signup/ProgramItemDirectSignup";
import { ProgramItemLotterySignup } from "client/views/program-item/signup/components/lottery-signup/ProgramItemLotterySignup";
interface Props {
signupStrategy: ProgramItemSignupStrategy;
lotterySignups: readonly LotterySignupWithProgramItem[];
directSignups: readonly DirectSignupWithProgramItem[];
programItem: ProgramItem;
attendees: number;
usesKonstiSignup: boolean;
signupRequired: boolean;
isDirectSignupOver: boolean;
}
export const ProgramItemSignup = ({
signupStrategy,
lotterySignups,
directSignups,
programItem,
attendees,
usesKonstiSignup,
signupRequired,
isDirectSignupOver,
}: Props): ReactElement | null => {
const signupAlwaysOpen = isDirectSignupAlwaysOpen(programItem);
const isDirectSignupMode =
signupStrategy === ProgramItemSignupStrategy.DIRECT || signupAlwaysOpen;
const hasSignedUp = isAlreadyDirectySigned(programItem, directSignups);
// After direct sign-up has ended, only signed-up users have content to show
// (the admission ticket link). Render nothing rather than an empty element
Iif (isDirectSignupOver && !hasSignedUp) {
return null;
}
return (
<Container>
<SignupHelpText
programItem={programItem}
usesKonstiSignup={usesKonstiSignup}
/>
{signupRequired &&
!isDirectSignupOver &&
(isDirectSignupMode ? (
<ProgramItemDirectSignup
programItem={programItem}
programItemIsFull={attendees >= programItem.maxAttendance}
/>
) : (
<ProgramItemLotterySignup
programItem={programItem}
lotterySignups={lotterySignups}
directSignups={directSignups}
/>
))}
{isDirectSignupOver && hasSignedUp && (
<ProgramItemButtonGroup>
<AdmissionTicketLink programItemId={programItem.programItemId} />
</ProgramItemButtonGroup>
)}
</Container>
);
};
// Paragraphs keep their default 16px top margin (the gap between card
// content), but their bottom margin is the card-end standard; between content
// the following element's larger top margin wins the margin collapse, so this
// only shows at the end of the card
const Container = styled.div`
p {
margin-bottom: ${programItemCardEndMargin};
}
`;
|