prettier 2

ruby-no-kai · Dec 24, 2023 · a1f8596 · a1f8596
1 parent 8736a78
commit a1f8596
Showing 14 changed files with 284 additions and 189 deletions.
diff --git a/app/javascript/CheckinClient.ts b/app/javascript/CheckinClient.ts
@@ -1,30 +1,34 @@
-import Rails from '@rails/ujs';
+import Rails from "@rails/ujs";
 
 export interface Ticket {
-  id: number,
-  code: string,
-  kind: string,
-  name: string,
-  sponsor: string,
-  conference: string,
+  id: number;
+  code: string;
+  kind: string;
+  name: string;
+  sponsor: string;
+  conference: string;
 }
 
 export interface TicketCheckinResult {
-  ok: boolean,
-  ticket: Ticket | null,
-  errors?: string[],
+  ok: boolean;
+  ticket: Ticket | null;
+  errors?: string[];
 }
 
 export async function checkin(url: string) {
   const payload = new FormData();
-  payload.append(Rails.csrfParam() || '', Rails.csrfToken() || '');
+  payload.append(Rails.csrfParam() || "", Rails.csrfToken() || "");
 
-  const resp = await fetch(url, {method: 'PUT', credentials: 'include', body: payload});
+  const resp = await fetch(url, {
+    method: "PUT",
+    credentials: "include",
+    body: payload,
+  });
   if (!resp.ok) {
     if (resp.status == 404) {
       return {
         ok: false,
-        errors: ['ticket not found'],
+        errors: ["ticket not found"],
         ticket: null,
       };
     }

diff --git a/app/javascript/ReceptionCheckinButton.tsx b/app/javascript/ReceptionCheckinButton.tsx
@@ -1,59 +1,87 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {TicketCheckinResult, checkin} from './CheckinClient';
+import { TicketCheckinResult, checkin } from "./CheckinClient";
 
 interface Props {
-  endpoint: string,
+  endpoint: string;
 }
 
 interface State {
-  response: TicketCheckinResult | null,
-  requested: boolean,
-  requestError: string | null,
+  response: TicketCheckinResult | null;
+  requested: boolean;
+  requestError: string | null;
 }
 
-export default class ReceptionCheckinButton extends React.Component<Props, State> {
-
+export default class ReceptionCheckinButton extends React.Component<
+  Props,
+  State
+> {
   constructor(props: Props) {
     super(props);
     this.state = {
       response: null,
       requested: false,
       requestError: null,
-    }
+    };
   }
 
   public render() {
     let alertElem = null;
     if (this.state.response) {
       if (this.state.response.ok) {
-        alertElem = <div className="alert alert-success"><b>Checked in</b></div>;
+        alertElem = (
+          <div className="alert alert-success">
+            <b>Checked in</b>
+          </div>
+        );
       } else {
         const errors = this.state.response.errors || [];
-        alertElem = <div className="alert alert-danger">
-            <p><b>Errors:</b></p>
+        alertElem = (
+          <div className="alert alert-danger">
+            <p>
+              <b>Errors:</b>
+            </p>
             <ul>
-              {errors.map((err, index) => <li key={index}>{err}</li>)}
+              {errors.map((err, index) => (
+                <li key={index}>{err}</li>
+              ))}
             </ul>
-          </div>;
+          </div>
+        );
       }
     }
-    const errorAlert = this.state.requestError ? <div className='alert alert-danger'>Something went wrong: {this.state.requestError}</div> : null;
-    const button = <button className='btn btn-primary btn-lg mb-2' onClick={this.onClick.bind(this)} disabled={this.state.requested}>Check In</button>
-    return <div>
-      {(this.state.response && this.state.response.ok) ? null: button}
-      {errorAlert}
-      {alertElem}
-    </div>;
+    const errorAlert = this.state.requestError ? (
+      <div className="alert alert-danger">
+        Something went wrong: {this.state.requestError}
+      </div>
+    ) : null;
+    const button = (
+      <button
+        className="btn btn-primary btn-lg mb-2"
+        onClick={this.onClick.bind(this)}
+        disabled={this.state.requested}
+      >
+        Check In
+      </button>
+    );
+    return (
+      <div>
+        {this.state.response && this.state.response.ok ? null : button}
+        {errorAlert}
+        {alertElem}
+      </div>
+    );
   }
 
   private onClick(e: React.MouseEvent<HTMLButtonElement>) {
-    this.setState({requested: true, requestError: null});
-    checkin(this.props.endpoint).then((resp) => {
-      this.setState({response: resp, requested: false});
-    }).catch((e) => {
-      this.setState({requestError: e.toString(), requested: false});
-      throw e;
-    });
+    this.setState({ requested: true, requestError: null });
+    checkin(this.props.endpoint)
+      .then((resp) => {
+        this.setState({ response: resp, requested: false });
+      })
+      .catch((e) => {
+        this.setState({ requestError: e.toString(), requested: false });
+        throw e;
+      });
   }
 }
diff --git a/app/javascript/ReceptionCheckinForm.tsx b/app/javascript/ReceptionCheckinForm.tsx
@@ -1,102 +1,137 @@
-import * as React from 'react';
+import * as React from "react";
 
-import {TicketCheckinResult, checkin} from './CheckinClient';
+import { TicketCheckinResult, checkin } from "./CheckinClient";
 
 interface Props {
-  endpoint: string,
+  endpoint: string;
 }
 
 interface State {
-  response: TicketCheckinResult | null,
-  requested: boolean,
-  requestError: string | null,
-  code: string,
+  response: TicketCheckinResult | null;
+  requested: boolean;
+  requestError: string | null;
+  code: string;
 }
 
-export default class ReceptionCheckinForm extends React.Component<Props, State> {
+export default class ReceptionCheckinForm extends React.Component<
+  Props,
+  State
+> {
   private inputRef: React.RefObject<HTMLInputElement>;
   constructor(props: Props) {
     super(props);
     this.state = {
       response: null,
       requested: false,
       requestError: null,
-      code: '',
+      code: "",
     };
     this.inputRef = React.createRef();
   }
 
   public render() {
-    return <div>
-      {this.renderForm()}
-      {this.renderTicket()}
-      {this.renderResult()}
-    </div>;
+    return (
+      <div>
+        {this.renderForm()}
+        {this.renderTicket()}
+        {this.renderResult()}
+      </div>
+    );
   }
 
   public renderForm() {
-    return <div className='mb-3'>
-      <form action="#" onSubmit={this.onSubmit.bind(this)} className='form-inline'>
-        <fieldset disabled={this.state.requested} >
-          <input value={this.state.code} onChange={this.onChange.bind(this)} ref={this.inputRef} className='form-control' placeholder='Code, or URL' />
-          <button className='btn btn-primary'>Check In</button>
-        </fieldset>
-      </form>
-    </div>;
+    return (
+      <div className="mb-3">
+        <form
+          action="#"
+          onSubmit={this.onSubmit.bind(this)}
+          className="form-inline"
+        >
+          <fieldset disabled={this.state.requested}>
+            <input
+              value={this.state.code}
+              onChange={this.onChange.bind(this)}
+              ref={this.inputRef}
+              className="form-control"
+              placeholder="Code, or URL"
+            />
+            <button className="btn btn-primary">Check In</button>
+          </fieldset>
+        </form>
+      </div>
+    );
   }
 
   public renderTicket() {
     if (!(this.state.response && this.state.response.ticket)) return null;
     const ticket = this.state.response.ticket;
-    return <div className='card mt-2'>
-      <div className='card-body'>
-        <div className='d-flex justify-content-between'>
-          <div>
-            <code>{ticket.code}</code>-<code>{ticket.id}</code>
+    return (
+      <div className="card mt-2">
+        <div className="card-body">
+          <div className="d-flex justify-content-between">
+            <div>
+              <code>{ticket.code}</code>-<code>{ticket.id}</code>
+            </div>
+            <div>{ticket.conference}</div>
+          </div>
+          <div className="text-center my-2">
+            <p style={{ fontSize: "26pt" }}>
+              <strong>{ticket.name}</strong>
+            </p>
+            <small style={{ fontSize: "18pt" }}>{ticket.sponsor}</small>
+            <p style={{ fontSize: "14pt" }}>
+              <span className="badge badge-info">{ticket.kind}</span>
+            </p>
           </div>
-          <div>{ticket.conference}</div>
-        </div>
-        <div className='text-center my-2'>
-          <p style={{fontSize: '26pt'}}><strong>{ticket.name}</strong></p>
-          <small style={{fontSize: '18pt'}}>{ticket.sponsor}</small>
-          <p style={{fontSize: '14pt'}}><span className='badge badge-info'>{ticket.kind}</span></p>
         </div>
       </div>
-    </div>
+    );
   }
 
   public renderResult() {
     if (this.state.response) {
       if (this.state.response.ok) {
-        return <div className="alert alert-success"><b>Checked in</b></div>;
+        return (
+          <div className="alert alert-success">
+            <b>Checked in</b>
+          </div>
+        );
       } else {
         const errors = this.state.response.errors || [];
-        return <div className="alert alert-danger">
-            <p><b>Errors:</b></p>
+        return (
+          <div className="alert alert-danger">
+            <p>
+              <b>Errors:</b>
+            </p>
             <ul>
-              {errors.map((err, index) => <li key={index}>{err}</li>)}
+              {errors.map((err, index) => (
+                <li key={index}>{err}</li>
+              ))}
             </ul>
-          </div>;
+          </div>
+        );
       }
     }
     return null;
   }
 
   private onSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
-    this.setState({requested: true, requestError: null});
-    const code = this.state.code.replace(/^.+\//, '');
-    checkin(`${this.props.endpoint}/${code}`).then((resp) => {
-      this.setState({response: resp, requested: false, code: ''});
-      if (this.inputRef.current) this.inputRef.current.focus();
-    }).catch((e) => {
-      this.setState({requestError: e.toString(), requested: false});
-      if (this.inputRef.current) this.inputRef.current.focus();
-      throw e;
-    });
+    this.setState({ requested: true, requestError: null });
+    const code = this.state.code.replace(/^.+\//, "");
+    checkin(`${this.props.endpoint}/${code}`)
+      .then((resp) => {
+        this.setState({ response: resp, requested: false, code: "" });
+        if (this.inputRef.current) this.inputRef.current.focus();
+      })
+      .catch((e) => {
+        this.setState({ requestError: e.toString(), requested: false });
+        if (this.inputRef.current) this.inputRef.current.focus();
+        throw e;
+      });
   }
 
   private onChange(e: React.ChangeEvent<HTMLInputElement>) {
-    this.setState({code: e.target.value});
+    this.setState({ code: e.target.value });
   }
 }
diff --git a/app/javascript/SponsorshipAssetFileUploader.tsx b/app/javascript/SponsorshipAssetFileUploader.tsx
@@ -1,27 +1,27 @@
-import AWS from 'aws-sdk/global';
-import S3 from 'aws-sdk/clients/s3';
+import AWS from "aws-sdk/global";
+import S3 from "aws-sdk/clients/s3";
 
-import Rails from '@rails/ujs';
+import Rails from "@rails/ujs";
 
 interface Params {
-  file: File,
-  sessionEndpoint: string,
-  sessionEndpointMethod: string,
+  file: File;
+  sessionEndpoint: string;
+  sessionEndpointMethod: string;
   onProgress?: (progress: S3.ManagedUpload.Progress) => any;
 }
 
 export interface SessionCredentials {
-  access_key_id: string,
-  secret_access_key: string,
-  session_token?: string,
+  access_key_id: string;
+  secret_access_key: string;
+  session_token?: string;
 }
 
 export interface SessionData {
-  id: string,
-  region: string,
-  bucket: string,
-  key: string,
-  credentials: SessionCredentials,
+  id: string;
+  region: string;
+  bucket: string;
+  key: string;
+  credentials: SessionCredentials;
 }
 
 export default class SponsorshipAssetFileUploader {
@@ -48,9 +48,13 @@ export default class SponsorshipAssetFileUploader {
     if (this.session) return this.session;
 
     const sessionPayload = new FormData();
-    sessionPayload.append('extension', this.file.name.split('.').pop() || '');
-    sessionPayload.append(Rails.csrfParam() || '', Rails.csrfToken() || '');
-    const sessionResp = await fetch(this.sessionEndpoint, {method: this.sessionEndpointMethod, credentials: 'include', body: sessionPayload});
+    sessionPayload.append("extension", this.file.name.split(".").pop() || "");
+    sessionPayload.append(Rails.csrfParam() || "", Rails.csrfToken() || "");
+    const sessionResp = await fetch(this.sessionEndpoint, {
+      method: this.sessionEndpointMethod,
+      credentials: "include",
+      body: sessionPayload,
+    });
     if (sessionResp.ok) {
       const session: SessionData = await sessionResp.json();
       this.session = session;
@@ -91,14 +95,14 @@ export default class SponsorshipAssetFileUploader {
         Body: this.file,
       },
     });
-    if (this.onProgress) uploader.on('httpUploadProgress', this.onProgress);
+    if (this.onProgress) uploader.on("httpUploadProgress", this.onProgress);
 
     this.uploader = uploader;
     return this.uploader;
   }
 
   public async perform() {
-    const {bucket, key} = await this.getSession();
+    const { bucket, key } = await this.getSession();
     const uploader = await this.getUploader();
     const s3 = await this.getS3();
 

diff --git a/app/javascript/booth_assignments.ts b/app/javascript/booth_assignments.ts
@@ -1,18 +1,23 @@
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.booth_assignment_form').forEach((topElem) => {
-    const checkBoxes = topElem.querySelectorAll('input[type=checkbox]') as NodeListOf<HTMLInputElement>;
-    topElem.querySelectorAll('button.booth_assignment_select_all_button').forEach((button) => {
-      button.addEventListener('click', (e) => {
-        e.preventDefault();
-        checkBoxes.forEach((checkbox) => checkbox.checked = true);
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll(".booth_assignment_form").forEach((topElem) => {
+    const checkBoxes = topElem.querySelectorAll(
+      "input[type=checkbox]",
+    ) as NodeListOf<HTMLInputElement>;
+    topElem
+      .querySelectorAll("button.booth_assignment_select_all_button")
+      .forEach((button) => {
+        button.addEventListener("click", (e) => {
+          e.preventDefault();
+          checkBoxes.forEach((checkbox) => (checkbox.checked = true));
+        });
       });
-    });
-    topElem.querySelectorAll('button.booth_assignment_select_none_button').forEach((button) => {
-      button.addEventListener('click', (e) => {
-        e.preventDefault();
-        checkBoxes.forEach((checkbox) => checkbox.checked = false);
+    topElem
+      .querySelectorAll("button.booth_assignment_select_none_button")
+      .forEach((button) => {
+        button.addEventListener("click", (e) => {
+          e.preventDefault();
+          checkBoxes.forEach((checkbox) => (checkbox.checked = false));
+        });
       });
-    });
   });
 });
-
diff --git a/app/javascript/broadcast_new_recipient_fields.ts b/app/javascript/broadcast_new_recipient_fields.ts
@@ -1,22 +1,28 @@
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.broadcast_new_recipient_fields').forEach((formElem) => {
-    formElem.querySelectorAll('.broadcast_new_recipient_fields_selector').forEach((elem) => {
-      const select = elem as HTMLSelectElement;
+document.addEventListener("DOMContentLoaded", () => {
+  document
+    .querySelectorAll(".broadcast_new_recipient_fields")
+    .forEach((formElem) => {
+      formElem
+        .querySelectorAll(".broadcast_new_recipient_fields_selector")
+        .forEach((elem) => {
+          const select = elem as HTMLSelectElement;
 
-      const handleChange = (e?: Event) => {
-        const fieldsets = formElem.querySelectorAll(`fieldset`);
-        const fieldset = formElem.querySelector(`.broadcast_new_recipient_fields_kind__${select.value}`) as HTMLFieldSetElement;
-        if (fieldset) {
-          fieldsets.forEach((fs) => {
-            fs.classList.add('d-none');
-            fs.disabled = true;
-          });
-          fieldset.classList.remove('d-none');
-          fieldset.disabled = false;
-        }
-      }
-      select.addEventListener('change', handleChange);
-      handleChange();
+          const handleChange = (e?: Event) => {
+            const fieldsets = formElem.querySelectorAll(`fieldset`);
+            const fieldset = formElem.querySelector(
+              `.broadcast_new_recipient_fields_kind__${select.value}`,
+            ) as HTMLFieldSetElement;
+            if (fieldset) {
+              fieldsets.forEach((fs) => {
+                fs.classList.add("d-none");
+                fs.disabled = true;
+              });
+              fieldset.classList.remove("d-none");
+              fieldset.disabled = false;
+            }
+          };
+          select.addEventListener("change", handleChange);
+          handleChange();
+        });
     });
-  });
 });
diff --git a/app/javascript/meta.ts b/app/javascript/meta.ts
@@ -1,3 +1,3 @@
 export const SENTRY_DSN = document.querySelector<HTMLMetaElement>(
-  'meta[name="rkto:sentry-dsn"]'
+  'meta[name="rkto:sentry-dsn"]',
 )?.content;
diff --git a/app/javascript/raven.js b/app/javascript/raven.js
@@ -1,5 +1,5 @@
-import * as Sentry from '@sentry/browser';
+import * as Sentry from "@sentry/browser";
 
 if (window.SENTRY_DSN) {
-  Sentry.init({dsn: window.SENTRY_DSN});
+  Sentry.init({ dsn: window.SENTRY_DSN });
 }
diff --git a/app/javascript/reception_checkin_button.tsx b/app/javascript/reception_checkin_button.tsx
@@ -1,18 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import ReceptionCheckinButton from './ReceptionCheckinButton';
+import ReceptionCheckinButton from "./ReceptionCheckinButton";
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll('.checkin_button').forEach((target) => {
+  document.querySelectorAll(".checkin_button").forEach((target) => {
     const elem = target as HTMLDivElement;
     const endpoint = elem.dataset.ticketUrl;
     if (!endpoint) return;
     const component = ReactDOM.render(
-      <ReceptionCheckinButton
-        endpoint={endpoint}
-      />,
-    target) as unknown as ReceptionCheckinButton;
+      <ReceptionCheckinButton endpoint={endpoint} />,
+      target,
+    ) as unknown as ReceptionCheckinButton;
   });
 });
-
diff --git a/app/javascript/reception_checkin_form.tsx b/app/javascript/reception_checkin_form.tsx
@@ -1,18 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import ReceptionCheckinForm from './ReceptionCheckinForm';
+import ReceptionCheckinForm from "./ReceptionCheckinForm";
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll('.checkin_form').forEach((target) => {
+  document.querySelectorAll(".checkin_form").forEach((target) => {
     const elem = target as HTMLDivElement;
     const endpoint = elem.dataset.endpoint;
     if (!endpoint) return;
     const component = ReactDOM.render(
-      <ReceptionCheckinForm
-        endpoint={endpoint}
-      />,
-    target) as unknown as ReceptionCheckinForm;
+      <ReceptionCheckinForm endpoint={endpoint} />,
+      target,
+    ) as unknown as ReceptionCheckinForm;
   });
 });
-
diff --git a/app/javascript/user_sponsorship_asset_file_form.tsx b/app/javascript/user_sponsorship_asset_file_form.tsx
@@ -1,21 +1,26 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import SponsorshipAssetFileForm from './SponsorshipAssetFileForm';
+import SponsorshipAssetFileForm from "./SponsorshipAssetFileForm";
 
 document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll('.sponsorships_form').forEach((formElem) => {
+  document.querySelectorAll(".sponsorships_form").forEach((formElem) => {
     const form = formElem as HTMLFormElement;
-    const errorElem = form.querySelector('.submit_error') as HTMLDivElement;
-    form.querySelectorAll('.sponsorships_form_asset_file').forEach((elem_) => {
+    const errorElem = form.querySelector(".submit_error") as HTMLDivElement;
+    form.querySelectorAll(".sponsorships_form_asset_file").forEach((elem_) => {
       const elem = elem_ as HTMLDivElement;
-      const dest = elem.querySelector('.sponsorships_form_asset_file_form');
+      const dest = elem.querySelector(".sponsorships_form_asset_file_form");
 
-      const fileIdElem = elem.querySelector('input[type=hidden][name="sponsorship[asset_file_id]"]') as HTMLInputElement;
-      const fileIdToCopyElem = elem.querySelector('input[type=hidden][name="sponsorship[asset_file_id_to_copy]"]') as (HTMLInputElement | undefined);
+      const fileIdElem = elem.querySelector(
+        'input[type=hidden][name="sponsorship[asset_file_id]"]',
+      ) as HTMLInputElement;
+      const fileIdToCopyElem = elem.querySelector(
+        'input[type=hidden][name="sponsorship[asset_file_id_to_copy]"]',
+      ) as HTMLInputElement | undefined;
       if (!fileIdElem) return;
-      const existingFileId = fileIdElem.value.length > 0 ? fileIdElem.value : null;
-      const doCopy = (fileIdToCopyElem?.value ?? '').length > 0;
+      const existingFileId =
+        fileIdElem.value.length > 0 ? fileIdElem.value : null;
+      const doCopy = (fileIdToCopyElem?.value ?? "").length > 0;
 
       const sessionEndpoint = elem.dataset.sessionEndpoint;
       const sessionEndpointMethod = elem.dataset.sessionEndpointMethod;
@@ -28,27 +33,33 @@ document.addEventListener("DOMContentLoaded", () => {
           sessionEndpoint={sessionEndpoint}
           sessionEndpointMethod={sessionEndpointMethod}
         />,
-      dest) as unknown as SponsorshipAssetFileForm;
-      form.addEventListener('submit', async function (e) {
+        dest,
+      ) as unknown as SponsorshipAssetFileForm;
+      form.addEventListener("submit", async function (e) {
         e.preventDefault();
-        form.querySelectorAll('input[type=submit]:disabled').forEach((el) => (el as HTMLInputElement).disabled = true);
+        form
+          .querySelectorAll("input[type=submit]:disabled")
+          .forEach((el) => ((el as HTMLInputElement).disabled = true));
         try {
-          errorElem.classList.add('d-none');
+          errorElem.classList.add("d-none");
           const fileId = await component.startUpload();
           if (fileId !== null) {
             fileIdElem.value = fileId;
             form.submit();
             return;
           }
-          form.querySelectorAll('input[type=submit]:disabled').forEach((el) => (el as HTMLInputElement).disabled = false);
+          form
+            .querySelectorAll("input[type=submit]:disabled")
+            .forEach((el) => ((el as HTMLInputElement).disabled = false));
         } catch (e) {
           errorElem.innerHTML = `ERROR: ${e}`;
-          errorElem.classList.remove('d-none');
-          form.querySelectorAll('input[type=submit]:disabled').forEach((el) => (el as HTMLInputElement).disabled = false);
+          errorElem.classList.remove("d-none");
+          form
+            .querySelectorAll("input[type=submit]:disabled")
+            .forEach((el) => ((el as HTMLInputElement).disabled = false));
           throw e;
         }
       });
     });
   });
 });
-
diff --git a/app/javascript/user_sponsorships_form.ts b/app/javascript/user_sponsorships_form.ts
@@ -16,7 +16,7 @@ document.addEventListener("DOMContentLoaded", () => {
       .querySelectorAll(".sponsorships_form_billing_contact")
       .forEach((elem) => {
         const checkbox = elem.querySelector(
-          ".form-check input[type=checkbox]"
+          ".form-check input[type=checkbox]",
         ) as HTMLInputElement;
         const fieldset = elem.querySelector("fieldset") as HTMLFieldSetElement;
 
@@ -36,18 +36,18 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const calculateTotalAttendees = () => {
       const totalElem = formElem.querySelector(
-        ".sponsorships_form_tickets__total"
+        ".sponsorships_form_tickets__total",
       ) as Element;
       if (!totalElem) return;
 
       const selectedPlanElem = formElem.querySelector(
-        ".sponsorships_form_plans input[type=radio]:checked"
+        ".sponsorships_form_plans input[type=radio]:checked",
       ) as HTMLInputElement;
       const ticketsIncludedInPlanElem = formElem.querySelector(
-        ".sponsorships_form_tickets__included_in_plan"
+        ".sponsorships_form_tickets__included_in_plan",
       )! as Element;
       const additionalAttendeesElem = formElem.querySelector(
-        ".sponsorships_form_tickets__additional_attendees input"
+        ".sponsorships_form_tickets__additional_attendees input",
       )! as HTMLInputElement;
 
       const numberOfGuests = selectedPlanElem
@@ -63,7 +63,7 @@ document.addEventListener("DOMContentLoaded", () => {
     };
     formElem
       .querySelectorAll(
-        ".sponsorships_form_tickets__additional_attendees input"
+        ".sponsorships_form_tickets__additional_attendees input",
       )
       .forEach((elem) => {
         elem.addEventListener("change", () => calculateTotalAttendees());
@@ -73,19 +73,19 @@ document.addEventListener("DOMContentLoaded", () => {
 
     formElem.querySelectorAll(".sponsorships_form_plans").forEach((elem) => {
       const boothCheckbox = formElem.querySelector(
-        ".sponsorships_form_booth_request input[type=checkbox]"
+        ".sponsorships_form_booth_request input[type=checkbox]",
       ) as HTMLInputElement;
       const uneligibleHelpTextElem = formElem.querySelector(
-        ".sponsorships_form_booth_request_uneligible"
+        ".sponsorships_form_booth_request_uneligible",
       ) as Element;
       const customizationRequestField = document.querySelector(
-        ".sponsorships_form_customization_request"
+        ".sponsorships_form_customization_request",
       ) as HTMLTextAreaElement;
       const profileFieldHelpElem = document.querySelector(
-        ".sponsorships_form_profile_help"
+        ".sponsorships_form_profile_help",
       ) as Element;
       const acceptanceHelpElem = document.querySelector(
-        ".sponsorships_acceptance_help"
+        ".sponsorships_acceptance_help",
       ) as Element;
 
       const handleChange = (e: HTMLInputElement | null) => {
@@ -115,7 +115,7 @@ document.addEventListener("DOMContentLoaded", () => {
         customizationRequestField.required = e.dataset["other"] == "1";
       };
       handleChange(
-        elem.querySelector("input[type=radio]:checked") as HTMLInputElement
+        elem.querySelector("input[type=radio]:checked") as HTMLInputElement,
       );
 
       elem.querySelectorAll("input[type=radio]").forEach((planRadioElem) => {

diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "css-loader": "^6.7.1",
     "glob": "^7.2.0",
     "mini-css-extract-plugin": "^2.6.0",
+    "prettier": "^3.1.1",
     "sass-loader": "^12.6.0",
     "terser-webpack-plugin": "^5.3.1",
     "webpack": "^5.70.0",

diff --git a/yarn.lock b/yarn.lock
@@ -1383,6 +1383,11 @@ postcss@^8.4.7:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prettier@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
+  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
+
 prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz"