th.guenther/mareike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic signup for events

Browse Source
This commit is contained in:
Thomas Günther
2026-03-21 21:02:15 +01:00
parent 23af267896
commit b8341890d3
74 changed files with 4046 additions and 947 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
legacy/after-submit/alreadyexist.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
function AlreadyExistsContainer({ labels, participant_data }) {
return (
<p>
<h3>{participant_data.nicename}</h3>
{participant_data.text_1}<br />
{participant_data.text_2}<br />
<a href={participant_data.email_link}>{participant_data.email_text}</a> ( {participant_data.email_text} )
</p>
);
}
export default AlreadyExistsContainer;

87
legacy/after-submit/success.jsx Normal file
View File

@@ -0,0 +1,87 @@
import React from 'react';
import {__} from '../../../../assets/javascripts/library.js';
function EfzStatusMessage({ efzStatus }) {
if (efzStatus === 'NOT_CHECKED') {
return <p style={{fontWeight: 'bold'}}>
Dein erweitertes Führungszeugnis konnte nicht automatisch überprüft werden. Bitte kontaktiere die Aktionsleitung, da deine Teilnahme nur mit gültigem eFZ möglich ist.
</p>;
}
if (efzStatus === 'CHECKED_INVALID') {
return <p style={{fontWeight: 'bold'}}>
Du hast noch kein erweitertes Führungszeugnis bereitgestellt, sodass deine Teilnahme nicht möglich ist. Bitte reiche dein erweitertes Führungszeugnis umgehend ein,
da deine Teilnahme andernfalls storniert werden kann. Bitte setze dich mit der Aktionsleitung in Verbindung.
</p>;
}
return null; // default: nix anzeigen
}
function SuccessContainer({ participant_data }) {
return (
<p>
<h3>{__('Hello', 'solea')} {participant_data.nicename}</h3>
<p>
{participant_data.introduction}<br />
{__('We have received the following information:', 'solea')}
</p>
<table className="solea-payment-table">
<tr><td>{__('Arrival', 'solea')}:</td><td>{participant_data.arrival}</td></tr>
<tr><td>{__('Departure', 'solea')}:</td><td>{participant_data.departure}</td></tr>
<tr><td>{__('Participation group', 'solea')}:</td><td>{participant_data.participation_group}</td></tr>
</table>
{participant_data.needs_payment ? (
<p>
<table className="solea-payment-table">
<tr>
<td>{__('Account owner', 'solea')}:</td>
<td>{participant_data.account_owner}</td>
</tr>
<tr>
<td>{__('IBAN', 'solea')}:</td>
<td>{participant_data.account_iban}</td>
</tr>
<tr>
<td>{__('Purpose', 'solea')}:</td>
<td>{participant_data.payment_purpose}</td>
</tr>
<tr>
<td>{ __('Total amount', 'solea')}: </td>
<td>{participant_data.amount}</td>
</tr>
<tr>
<td colSpan="2">
{__('If your bank supports QR-Code based paying, use this code', 'solea')}<br />
<img className="girocode" src={participant_data.girocode_url} />
</td>
</tr>
</table>
<p>
{__( 'If payment is not possible or only partially possible within this period, please contact the event management.', 'solea' )}
</p>
</p>
) : (
<p>
{__('You do not have to pay the registration fee. This is the case if participation is supported, billing is done through your local group, or there are other decisions.', 'solea')}<br/>
{__('Your registration is confirmed now.', 'solea' ) }
</p>
)}
<EfzStatusMessage efzStatus={participant_data.efz_status} />
<p>
{__('You will receive an email with further information within 2 hours. If you do not receive this mail or have any questions about your registration, please contact the event management.', 'solea')}<br />
{__('You can contact us at', 'solea')}: {participant_data.event_email}
</p>
</p>
);
}
export default SuccessContainer;

45
legacy/components/amount-selector.jsx Normal file
View File

@@ -0,0 +1,45 @@
import React from 'react';
import { ArrivalDepratureValidator } from '../../../../assets/javascripts/registration-validator.js'
function AmountSelectorContainer({ labels, event_data }) {
return (
<table>
{event_data.amount_reduced !== '' && (
<tr>
<td>
<input type="radio"
name="beitrag" value="reduced" id="amount_reduced" />
<label htmlFor="amount_reduced">
{labels.addons.amount.reduced_amount} (
{event_data.amount_reduced})
</label>
</td>
</tr>
)}
<tr>
<td>
<input defaultChecked={"checked"} type="radio" name="beitrag" value="regular" id="amount_regular"/>
<label htmlFor="amount_regular">
{labels.addons.amount.regular_amount} (
{event_data.amount_participant})
</label>
</td>
</tr>
{event_data.amount_social !== '' && (
<tr>
<td>
<input name="beitrag" value="social" id="amount_social" type="radio"/>
<label htmlFor="amount_social">
{labels.addons.amount.social_amount} (
{event_data.amount_social})
</label>
</td>
</tr>
)}
</table>
);
}
export default AmountSelectorContainer;

48
legacy/partials/addons.jsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import AmountSelectorContainer from "../components/amount-selector.jsx";
function AddonsContainer({ onStepClick, labels, event_data }) {
const handle_next_step = () => {
onStepClick(7);
}
return (
<p>
{event_data.registration_mode === 'solidarity' && (
<AmountSelectorContainer event_data={event_data} labels={labels} />
)}
{event_data.addons.length > 0 && (
<p>
<h3>{labels.addons.addons.available_addons}</h3>
<table>
{event_data.addons.map((addon, index) => (
<tr>
<td class="addon_checkbox">
<input type="checkbox"
name={"addons["+addon.id+"]"}
id={"addons_"+addon.id} />
</td>
<td class="addon_description">
<label for={"addons_"+addon.id}>
<span class="bold">{addon.name}</span><br />
<span class="small">{labels.common.amount}: {addon.amount}</span><br /><br />
{addon.description}<br /><br />
</label>
</td>
</tr>
))
}
</table>
</p>
)}
<input type="button" value={labels.common.go_back} onClick={() => onStepClick(5)} /> &nbsp;
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</p>
);
}
export default AddonsContainer;

36
legacy/partials/age.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
function AgeContainer({ onStepClick, labels, configuration }) {
return (
<div>
<div onClick={() => onStepClick(2)} className="solea_age_selector">
<div>
<h3>{labels.age.headline_children}</h3>
{labels.age.text_children}
</div>
<p className="solea_emblems_selection">
<img src={configuration.icon_children} class="solea_participant_icon" />
</p>
</div>
<div onClick={() => onStepClick(3)} className="solea_age_selector">
<div>
<h3>{labels.age.headline_adults}</h3>
{labels.age.text_adults}
</div>
<p className="solea_emblems_selection">
<img src={configuration.icon_adults} className="solea_participant_icon"/>
</p>
</div>
</div>
);
}
export default AgeContainer;

60
legacy/partials/allergies.jsx Normal file
View File

@@ -0,0 +1,60 @@
import React from 'react';
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'
function AllergiesContainer({ onStepClick, labels, event_data, participant_data }) {
const handle_next_step = () => {
onStepClick(9);
}
return (
<table>
<tr>
<td colSpan="2">
<h3>{labels.headlines.allergies}</h3>
</td>
</tr>
<tr>
<td>{labels.allergies.allergies}:</td>
<td><input defaultValue={participant_data.allergies} type="text" name="allergien" /></td>
</tr>
<tr>
<td>{labels.allergies.intolerances}:</td>
<td><input defaultValue={participant_data.intolerances} type="text" name="intolerances" /></td>
</tr>
<tr>
<td>{labels.allergies.medications}:</td>
<td>
<input defaultValue={participant_data.medications} type="text" name="medikamente" />*<br />
{labels.allergies.medications_hint}
</td>
</tr>
<tr>
<td>{labels.allergies.eating_habits.headline}:</td>
<td>
<select name="essgewohnheit">
<option value="vegetarian">{labels.allergies.eating_habits.vegetarian}</option>
<option value="vegan">{labels.allergies.eating_habits.vegan}</option>
{event_data.enable_all_eating && (
<option value="all">{labels.allergies.eating_habits.meat}</option>
)}
</select>
</td>
</tr>
<tr>
<td>{labels.allergies.notices}:</td>
<td><textarea rows="15" name="anmerkungen"></textarea></td>
</tr>
<tr>
<td colSpan="2">
<input type="button" value={labels.common.go_back} onClick={() => onStepClick(7)} /> &nbsp;
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</td>
</tr>
</table>
);
}
export default AllergiesContainer;

65
legacy/partials/arrival.jsx Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react';
import { ArrivalDepratureValidator } from '../../../../assets/javascripts/registration-validator.js'
function ArrivalContainer({ onStepClick, labels, event_data }) {
const handle_next_step = () => {
if (ArrivalDepratureValidator(
new Date(event_data.date_begin),
new Date (event_data.date_end)
) ) {
if (event_data.addons.length > 0 || event_data.registration_mode === 'solidarity') {
onStepClick(6);
} else {
onStepClick(7);
}
}
}
return (
<table>
<tr>
<td colSpan="2">
<h3>{labels.headlines.arrival}</h3>
</td>
</tr>
<tr>
<td>{labels.arrival_data.arrival.headline}:</td>
<td>
<input type="date" name="anreise" id="anreise" defaultValue={event_data.date_begin} /><br />
<select name="anreise_essen">
<option Value="1" selected>{labels.arrival_data.arrival.before_dinner}</option>
<option value="2">{labels.arrival_data.arrival.before_lunch}</option>
<option value="3">{labels.arrival_data.arrival.before_breakfast}</option>
<option value="4">{labels.arrival_data.arrival.no_meal}</option>
</select>
</td>
</tr>
<tr>
<td>{labels.arrival_data.departure.headline}:</td>
<td>
<input type="date" name="abreise" id="abreise" defaultValue={event_data.date_end} /><br />
<select name="abreise_essen">
<option value="1">{labels.arrival_data.departure.after_breakfast}</option>
<option selected value="2">{labels.arrival_data.departure.after_lunch}</option>
<option value="3">{labels.arrival_data.departure.after_dinner}</option>
<option value="4">{labels.arrival_data.departure.no_meal}</option>
</select>
</td>
</tr>
<tr>
<td colSpan="2">
<input type="button" value={labels.common.go_back} onClick={() => onStepClick(4)} /> &nbsp;
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</td>
</tr>
</table>
);
}
export default ArrivalContainer;

68
legacy/partials/contactperson.jsx Normal file
View File

@@ -0,0 +1,68 @@
import React from 'react';
import { ContactPersonValidator } from '../../../../assets/javascripts/registration-validator.js'
function ContactPersonContainer({ onStepClick, labels, participant_data }) {
const handle_next_step = () => {
if (ContactPersonValidator() ) {
onStepClick(3);
}
}
return (
<table>
<tr>
<td colSpan="2">
<h3>{labels.headlines.contactperson}</h3>
</td>
</tr>
<tr>
<td>{labels.common.lastname}, {labels.common.firstname}:</td>
<td><input type="text" name="ansprechpartner" id="ansprechpartner" /></td>
</tr>
<tr>
<td>{labels.common.telephone}:</td>
<td><input type="text" name="telefon_2" id="telefon_2" /></td>
</tr>
<tr>
<td>{labels.common.email}:</td>
<td><input type="text" name="email_2" id="email_2"/></td>
</tr>
<tr>
<td>{labels.swimming_permission.label}:</td>
<td>
<select name="badeerlaubnis" id={"swimming_permission"}>
<option value="-1">{labels.common.please_select}</option>
<option value="none">{labels.swimming_permission.none}</option>
<option value="partial">{labels.swimming_permission.partial}</option>
<option value="complete">{labels.swimming_permission.complete}</option>
</select>
</td>
</tr>
<tr>
<td>{labels.swimming_permission.first_aid_headline}:
</td>
<td>
<select id="first_aid" name="first_aid" required>
<option value="-1">{labels.common.please_select}</option>
<option value="1">{labels.swimming_permission.first_aid_yes}</option>
<option value="0">{labels.swimming_permission.first_aid_no}</option>
</select><br />
<label className="description">{labels.swimming_permission.first_aid_description}</label>
</td>
</tr>
<tr>
<td colSpan="2">
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</td>
</tr>
</table>
);
}
export default ContactPersonContainer;

91
legacy/partials/personaldata.jsx Normal file
View File

@@ -0,0 +1,91 @@
import React from 'react';
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'
function PersonalDataContainer({ onStepClick, labels, participant_data, local_groups }) {
const handle_next_step = () => {
if (ContactDataValidator()) {
onStepClick(4);
}
}
return (
<table>
<tr>
<td colSpan="2">
<h3>{labels.headlines.personaldata}</h3>
</td>
</tr>
<tr>
<td>{labels.common.firstname};</td>
<td><input defaultValue={participant_data.firstname} type="text" name="vorname" id="vorname" /></td>
</tr>
<tr>
<td>{labels.common.lastname}:</td>
<td><input defaultValue={participant_data.lastname} type="text" name="nachname" id="nachname" /></td>
</tr>
<tr>
<td>{labels.common.nickname}</td>
<td><input defaultValue={participant_data.nickname} type="text" name="pfadiname" id="pfadiname" /></td>
</tr>
<tr>
<td>{labels.common.localgroup}</td>
<td>
<select id="localgroup" name="localgroup" required placeholder="<?php echo esc_html__( 'Please select', 'solea' ); ?>">
<option value="-1">{labels.common.please_select}</option>
{local_groups.map((local_group, index) => (
<option
value={local_group.id}
selected={participant_data.localgroup == local_group.id}
>{local_group.name}
</option>
))
}
</select>
</td>
</tr>
<tr>
<td>{labels.common.birthday}:</td>
<td><input defaultValue={participant_data.birthday} type="date" name="geburtsdatum" id="geburtsdatum" /></td>
</tr>
<tr>
<td>{labels.common.street}, {labels.common.housenumber}:</td>
<td>
<input type="text" defaultValue={participant_data.street} name="strasse" id="strasse" />
<input type="text" defaultValue={participant_data.number} name="hausnummer" id="hausnummer" />
</td>
</tr>
<tr>
<td>
{labels.common.postal_code}, {labels.common.city}:</td>
<td>
<input type="text" defaultValue={participant_data.zip} name="plz" id="plz" />
<input type="text" defaultValue={participant_data.city} name="ort" id="ort" />
</td>
</tr>
<tr>
<td>{labels.common.telephone}:</td>
<td><input defaultValue={participant_data.phone} type="text" name="telefon_1" id="telefon_1" /></td>
</tr>
<tr>
<td>{labels.common.email}:</td>
<td><input defaultValue={participant_data.email} type="text" name="email_1" id="email_1" /></td>
</tr>
<tr>
<td colSpan="2">
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</td>
</tr>
</table>
);
}
export default PersonalDataContainer;

77
legacy/partials/photopermissions.jsx Normal file
View File

@@ -0,0 +1,77 @@
import React from 'react';
function PhotopermissionsContainer({ onStepClick, labels, event_data }) {
const accept_all_permissions = () => {
document.getElementById( 'foto_socialmedia' ).checked = true;
document.getElementById( 'foto_print' ).checked = true;
document.getElementById( 'foto_webseite' ).checked = true;
document.getElementById( 'foto_partner' ).checked = true;
document.getElementById( 'foto_intern' ).checked = true;
handle_next_step();
}
const handle_next_step = () => {
onStepClick(8);
}
const handle_previous_step = () => {
if (event_data.addons.length > 0 || event_data.registration_mode === 'solidarity') {
onStepClick(6);
} else {
onStepClick(5);
}
}
return (
<div>
<p class="phptopermission_container">
<h3>{labels.photopermissions.headline}</h3>
</p>
<p>
<input type="checkbox" name="foto[socialmedia]" value="active" id="foto_socialmedia"/>
<label
htmlFor="foto_socialmedia">{labels.photopermissions.socialmedia}
</label><br/>
</p>
<p>
<input type="checkbox" name="foto[print]" value="active" id="foto_print"/>
<label
htmlFor="foto_print">{labels.photopermissions.printmedia}
</label><br/>
</p>
<p>
<input type="checkbox" name="foto[webseite]" value="active" id="foto_webseite"/>
<label
htmlFor="foto_webseite">{labels.photopermissions.websites}
</label><br/>
</p>
<p>
<input type="checkbox" name="foto[partner]" value="active" id="foto_partner"/>
<label
htmlFor="foto_partner">{labels.photopermissions.partners}
</label><br/>
</p>
<p>
<input type="checkbox" name="foto[intern]" value="active" id="foto_intern"/>
<label
htmlFor="foto_intern">{labels.photopermissions.internalpurpose}
</label><br/>
</p>
<input class="acceptallbutton" type="button"
value={labels.photopermissions.acceptall}
onClick={() => accept_all_permissions()}
/>
<input type="button" value={labels.common.go_back} onClick={() => handle_previous_step()} /> &nbsp;
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</div>
);
}
export default PhotopermissionsContainer;

51
legacy/partials/registration-groupbased.jsx Normal file
View File

@@ -0,0 +1,51 @@
import React from 'react';
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'
function GroupBasedRegistrationContainer({ onStepClick, labels, participant_data, local_groups, event_data }) {
const handle_next_step = () => {
onStepClick(5);
}
return (
<table>
<input defaultChecked={"checked"} type="radio" name="beitrag" value="regular" id="amount_regular" hidden />
<tr>
<td colSpan="2"><h3>{labels.registration_mode.group_based.headline}:</h3></td>
</tr>
{event_data.possible_participation_groups.map((participation_group, index) => (
<tr>
<td colSpan="2" >
<input type="radio"
defaultChecked={'participant' === participation_group.name}
name="participant_group"
value={participation_group.name}
id={participation_group.name} />
<label for={participation_group.name}>
{participation_group.name_readable}
{participation_group.description !== '' && (
<span><br /><span class="solea-group-info-text">{participation_group.description}</span><br /><br /></span>
)}
</label>
</td>
</tr>
))
}
<tr>
<td colSpan="2">
<input type="button" value={labels.common.go_back} onClick={() => onStepClick(3)} /> &nbsp;
<input type="button" value={labels.common.next} onClick= {() => handle_next_step()} />
</td>
</tr>
</table>
);
}
export default GroupBasedRegistrationContainer;

47
legacy/partials/registration-solidarity.jsx Normal file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'
function SolidarityRegistrationContainer({ onStepClick, labels, participant_data, local_groups, event_data }) {
const handle_next_step = () => {
onStepClick(5);
}
return (
<table>
<tr>
<td colSpan="2">
<h3>{labels.headlines.solidarity_headline}</h3>
</td>
</tr>
<tr>
<td>{labels.registration_mode.solidarity.headline}...</td>
<td>
{event_data.possible_participation_groups.map((participation_group, index) => (
<span>
<input
class="registratration_mode_solidatory_checkbox"
type="radio"
name="participant_group"
value="team"
defaultChecked={'participant' === participation_group.name}
id={participation_group.name}
/>
<label for={participation_group.name}>...{participation_group.description}</label><br/>
</span>
))
}
</td>
</tr>
<tr>
<td colSpan="2">
<input type="button" value={labels.common.go_back} onClick={() => onStepClick(3)} /> &nbsp;
<input type="button" value={labels.common.next} onClick={() => handle_next_step()}/>
</td>
</tr>
</table>
);
}
export default SolidarityRegistrationContainer;

75
legacy/partials/summary.jsx Normal file
View File

@@ -0,0 +1,75 @@
import React from 'react';
import { ContactDataValidator } from '../../../../assets/javascripts/registration-validator.js'
function SummaryContainer({ onStepClick, labels, participant_data, local_groups }) {
const handle_next_step = () => {
onStepClick(4);
if (ContactDataValidator()) {
onStepClick(4);
}
}
return (
<table>
<tr>
<td colSpan="2">
<h3>{labels.headlines.summary}</h3>
</td>
</tr>
<tr>
<td>{labels.summary.event_name}:</td>
<td><span id="summary_eventname" /></td>
</tr>
<tr>
<td>{labels.summary.arrival}</td>
<td><span id="summary_arrival" /></td>
</tr>
<tr>
<td>{labels.summary.departure}:</td>
<td><span id="summary_departure" /></td>
</tr>
<tr><td colSpan="2"><br /><br /></td></tr>
<tr>
<td colSpan="2">
<input type="checkbox" id="summary_information_correct"/>
<label htmlFor="summary_information_correct" id="summary_information_correct_label">
{labels.summary.information_correct}
</label>
</td>
</tr>
<tr>
<td colSpan="2">
<input type="checkbox" id="summary_accept_terms"/>
<label htmlFor="summary_accept_terms" id="summary_accept_terms_label">
{labels.summary.accept_terms}
</label>
</td>
</tr>
<tr>
<td colSpan="2">
<input type="checkbox" id="legal_accepted"/>
<label htmlFor="legal_accepted" id="legal_accepted_label">
{labels.summary.legal_acceptance}
</label>
</td>
</tr>
<tr>
<td colSpan="2">
<input type="checkbox" id="payment"/>
<label htmlFor="payment" id="payment_label">
{labels.summary.amount_text_1} <span class="bold" id="payment_information_label"></span> {labels.summary.amount_text_2}
</label>
</td>
</tr>
</table>
);
}
export default SummaryContainer;

267
legacy/signup-main.jsx Normal file
View File

@@ -0,0 +1,267 @@
import React from 'react';
import AgeContainer from './partials/age.jsx';
import ContactPersonContainer from './partials/contactperson.jsx';
import PersonalDataContainer from './partials/personaldata.jsx';
import SolidarityRegistrationContainer from './partials/registration-solidarity.jsx';
import GroupSelectionContainer from './partials/registration-groupbased.jsx';
import ArrivalContainer from './partials/arrival.jsx';
import AddonsContainer from "./partials/addons.jsx";
import PhotopermissionsContainer from "./partials/photopermissions.jsx";
import AllergiesContainer from "./partials/allergies.jsx";
import SummaryContainer from "./partials/summary.jsx";
import { FinalValidator } from '../../../assets/javascripts/registration-validator.js'
import { SelectedAddons } from '../../../assets/javascripts/registration-validator.js'
import SuccessContainer from "./after-submit/success.jsx";
import ReactDOM from "react-dom/client";
import AlreadyExistsContainer from "./after-submit/alreadyexist.jsx";
import { __ } from '../../../assets/javascripts/library.js';
const { configuration, labels, participant_data, event_data, local_groups } = window.solea_data;
function showStep(step) {
var steps = [
'step_1', // Age-Selector
'step_2', // Children only: Contact data
'step_3', // Personal data
'step_4', // Participation group
'step_5', // Arival & Departure
'step_6', // Addon information
'step_7', // Photo-Permissions
'step_8', // Allergies & Intolerances
'step_9' // Summary
];
for (var idx = 0; idx < steps.length; idx++) {
var currentElement = steps[idx];
document.getElementById(currentElement).classList.add('container_hidden');
document.getElementById(currentElement).classList.remove('container_visible');
}
document.getElementById('step_' + step).classList.remove('container_hidden');
document.getElementById('step_' + step).classList.add('container_visible');
document.getElementById('summary_loading').classList.remove('container_hidden');
document.getElementById('summary_loading').classList.add('container_visible');
document.getElementById('summary_content').classList.add('container_hidden');
document.getElementById('summary_content').classList.remove('container_visible');
if (step === 9) {
var [ayear, amonth, aday] = document.getElementById('anreise').value.split('-');
var [dyear, dmonth, dday] = document.getElementById('abreise').value.split('-');
document.getElementById('summary_eventname').innerHTML= event_data.event_name;
document.getElementById('summary_arrival').innerHTML=`${aday}.${amonth}.${ayear}`;
document.getElementById('summary_departure').innerHTML=`${dday}.${dmonth}.${dyear}`;
const response = fetch("/wp-json/solea/signup/preview_amount", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
anreise: document.getElementById('anreise').value,
abreise: document.getElementById('abreise').value,
event_id: event_data.id,
participation_group: document.querySelector('input[name="participant_group"]:checked').value,
selected_amount: document.querySelector('input[name="beitrag"]:checked').value,
addons: SelectedAddons(),
}),
})
.then((res) => res.json())
.then((data) => {
document.getElementById('payment_information_label').innerHTML = data.amount
document.getElementById('summary_loading').classList.add('container_hidden');
document.getElementById('summary_loading').classList.remove('container_visible');
document.getElementById('summary_content').classList.add('container_visible');
document.getElementById('summary_content').classList.remove('container_hidden');
});
}
}
function ParticipantSignup() {
let RegistrationMode;
switch (event_data.registration_mode) {
case 'solidarity':
RegistrationMode = SolidarityRegistrationContainer;
break;
case 'groupbased':
RegistrationMode = GroupSelectionContainer;
break;
}
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const data = new FormData(form);
if (!FinalValidator()) {
return;
}
const formData = Object.fromEntries(data.entries());
const response = fetch("/wp-json/solea/signup/do-register", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
addons: SelectedAddons(),
registration_data: formData
})
})
.then((res) => res.json())
.then((data) => {
const container = document.getElementById('solea_registration_form_frame');
const root = ReactDOM.createRoot(container);
if (data.already_exists === true) {
root.render(<AlreadyExistsContainer participant_data={data.result} labels={labels} />);
} else {
root.render(<SuccessContainer participant_data={data.result} />);
}
});
}
return (
<div className="solea-event-registration-container">
<table class="solea-event-meta-data-table">
<tr>
<td>{__('Event location', 'solea')}:</td>
<td>{event_data.postalcode} {event_data.location}</td>
</tr>
<tr>
<td>{__('Event duration', 'solea')}:</td>
<td>{event_data.date_begin_formatted} - {event_data.date_end_formatted}</td>
</tr>
<tr>
<td>{__('Regular registration until', 'solea')}:</td>
<td>{event_data.last_minute_begin_formatted}</td>
</tr>
<tr>
<td>
{__('Extended registration until', 'solea')}:
</td>
<td>
{event_data.registration_end_formatted}
</td>
</tr>
<tr>
<td>
{__('Cancellation', 'solea')}:
</td>
<td>
100% {__('until', 'solea')} {event_data.last_minute_begin_formatted} {__('available', 'solea')}<br />
{event_data.reduced_return}% {__('until', 'solea')} {event_data.registration_end_formatted} {__('available', 'solea')}<br />
</td>
</tr>
<tr>
<td colSpan="2">
{ __('Do you have questions for registration? Please contact us by email:', 'solea') }&nbsp;
<a href={"mailto:" + event_data.event_email}>{event_data.event_email}</a>
</td>
</tr>
</table>
<div id="solea_registration_form_frame">
<form id="registration_form" onSubmit={handleSubmit}>
<input type="hidden" name="solea-user-id" value={participant_data.id} />
<input type="hidden" name="event-id" value={event_data.id} />
<div id="step_1" className="container_visible">
<AgeContainer
onStepClick={showStep}
labels={labels}
configuration={configuration}
/>
</div>
<div id="step_2" className="container_hidden">
<ContactPersonContainer
onStepClick={showStep}
labels={labels}
participant_data={participant_data}
/>
</div>
<div id="step_3" className="container_hidden">
<PersonalDataContainer
onStepClick={showStep}
labels={labels}
participant_data={participant_data}
local_groups={local_groups}
/>
</div>
<div id="step_4" className="container_hidden">
<RegistrationMode
onStepClick={showStep}
labels={labels}
participant_data={participant_data}
local_groups={local_groups}
event_data={event_data}
/>
</div>
<div id="step_5" className="container_hidden">
<ArrivalContainer
onStepClick={showStep}
labels={labels}
event_data={event_data}
local_groups={local_groups}
/>
</div>
<div id="step_6" className="container_hidden">
<AddonsContainer
onStepClick={showStep}
labels={labels}
event_data={event_data}
local_groups={local_groups}
/>
</div>
<div id="step_7" className="container_hidden">
<PhotopermissionsContainer
event_data={event_data}
onStepClick={showStep}
labels={labels}
/>
</div>
<div id="step_8" className="container_hidden">
<AllergiesContainer
onStepClick={showStep}
labels={labels}
participant_data={participant_data}
event_data={event_data}
/>
</div>
<div id="step_9" className="container_hidden">
<p id="summary_loading">Wird geladen</p>
<p id="summary_content" className="container_hidden">
<SummaryContainer
onStepClick={showStep}
labels={labels}
participant_data={participant_data}
event_data={event_data}
/>
<input type="button" value={labels.common.go_back} onClick={() => showStep(8)} /> &nbsp;
<input className="acceptallbutton" type="submit" value={labels.common.confirm}/>
</p>
</div>
</form>
</div>
</div>
);
}
export default ParticipantSignup;