@ticketboothapp/booking 0.1.11 → 0.1.12

package/src/components/JobApplicationDialog.tsx

@@ -0,0 +1,620 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  getPresignedUploadUrl,
+  uploadFileToPresignedUrl,
+  submitJobApplication,
+  type SubmitApplicationPayload,
+} from '@/lib/job-application-api';
+import strings from '@/strings';
+import PhoneInputWithCountry from '@/components/PhoneInputWithCountry';
+import styles from './JobApplicationDialog.module.css';
+import Button, { ButtonHoverColor } from './button';
+
+const JOB_ID_GUEST_EXPERIENCE = 'guest-experience-coordinator';
+
+function YesNoField({
+  id,
+  label,
+  value,
+  onChange,
+  t,
+  submitting,
+  required,
+}: {
+  id: string;
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  t: (key: string) => string;
+  submitting: boolean;
+  required?: boolean;
+}) {
+  return (
+    <div className={styles.formGroup}>
+      <label className={styles.label}>
+        {label} {required && '*'}
+      </label>
+      <div className={styles.radioGroup}>
+        <label className={styles.radioLabel}>
+          <input
+            type="radio"
+            name={id}
+            value="YES"
+            checked={value === 'YES'}
+            onChange={(e) => onChange(e.target.value)}
+            disabled={submitting}
+            required={required}
+          />
+          <span>{t('yes')}</span>
+        </label>
+        <label className={styles.radioLabel}>
+          <input
+            type="radio"
+            name={id}
+            value="NO"
+            checked={value === 'NO'}
+            onChange={(e) => onChange(e.target.value)}
+            disabled={submitting}
+          />
+          <span>{t('no')}</span>
+        </label>
+      </div>
+    </div>
+  );
+}
+
+interface JobApplicationDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  jobId: string;
+  jobTitle: string;
+  jobDescription: string;
+  jobDescriptionExpanded?: string;
+}
+
+export default function JobApplicationDialog({
+  isOpen,
+  onClose,
+  jobId,
+  jobTitle,
+  jobDescription,
+  jobDescriptionExpanded,
+}: JobApplicationDialogProps) {
+  const jobAppStrings = (strings as { careers?: { jobApplication?: Record<string, string> } }).careers?.jobApplication;
+  const t = (key: string) => jobAppStrings?.[key] ?? key;
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [eligibleToWorkInCanada, setEligibleToWorkInCanada] = useState<string>('');
+  const [accommodationInBowValley, setAccommodationInBowValley] = useState<string>('');
+  const [whyJoinViaVia, setWhyJoinViaVia] = useState('');
+  const [comfortableEarlyMornings, setComfortableEarlyMornings] = useState<string>('');
+  const [languagesSpoken, setLanguagesSpoken] = useState('');
+  const [fastPacedExperience, setFastPacedExperience] = useState<string>('');
+  const [whatMakesYouReliable, setWhatMakesYouReliable] = useState('');
+  const [eligibleToWorkInCanadaExplain, setEligibleToWorkInCanadaExplain] = useState('');
+  const [accommodationInBowValleyExplain, setAccommodationInBowValleyExplain] = useState('');
+  const [fastPacedExperienceExplain, setFastPacedExperienceExplain] = useState('');
+  const [resumeFile, setResumeFile] = useState<File | null>(null);
+  const [coverLetterFile, setCoverLetterFile] = useState<File | null>(null);
+  const [descriptionExpanded, setDescriptionExpanded] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isOpen) setDescriptionExpanded(false);
+  }, [isOpen]);
+  const [success, setSuccess] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [showCloseConfirm, setShowCloseConfirm] = useState(false);
+
+  const hasMeaningfulPhone = phone.replace(/\D/g, '').length > 1;
+  const isFormDirty = Boolean(
+    name.trim() ||
+    email.trim() ||
+    hasMeaningfulPhone ||
+    eligibleToWorkInCanada ||
+    accommodationInBowValley ||
+    whyJoinViaVia.trim() ||
+    comfortableEarlyMornings ||
+    languagesSpoken.trim() ||
+    fastPacedExperience ||
+    whatMakesYouReliable.trim() ||
+    eligibleToWorkInCanadaExplain.trim() ||
+    accommodationInBowValleyExplain.trim() ||
+    fastPacedExperienceExplain.trim() ||
+    resumeFile ||
+    coverLetterFile
+  );
+
+  const resetForm = () => {
+    setName('');
+    setEmail('');
+    setPhone('');
+    setEligibleToWorkInCanada('');
+    setAccommodationInBowValley('');
+    setWhyJoinViaVia('');
+    setComfortableEarlyMornings('');
+    setLanguagesSpoken('');
+    setFastPacedExperience('');
+    setWhatMakesYouReliable('');
+    setEligibleToWorkInCanadaExplain('');
+    setAccommodationInBowValleyExplain('');
+    setFastPacedExperienceExplain('');
+    setResumeFile(null);
+    setCoverLetterFile(null);
+    setError(null);
+    setSuccess(false);
+    setShowCloseConfirm(false);
+  };
+
+  const handleClose = () => {
+    setShowCloseConfirm(false);
+    resetForm();
+    onClose();
+  };
+
+  const requestClose = () => {
+    if (!success && isFormDirty) {
+      setShowCloseConfirm(true);
+    } else {
+      handleClose();
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!name.trim()) {
+      setError(t('name') + ' is required');
+      return;
+    }
+    if (!email.trim()) {
+      setError(t('email') + ' is required');
+      return;
+    }
+    if (!email.includes('@')) {
+      setError('Please enter a valid email address');
+      return;
+    }
+    if (!eligibleToWorkInCanada) {
+      setError(t('eligibleToWorkInCanada') + ' is required');
+      return;
+    }
+    if (eligibleToWorkInCanada === 'NO' && !eligibleToWorkInCanadaExplain.trim()) {
+      setError(t('followUpRequired'));
+      return;
+    }
+    if (!accommodationInBowValley) {
+      setError(t('accommodationInBowValley') + ' is required');
+      return;
+    }
+    if (accommodationInBowValley === 'NO' && !accommodationInBowValleyExplain.trim()) {
+      setError(t('followUpRequired'));
+      return;
+    }
+    if (!whyJoinViaVia.trim()) {
+      setError(t('whyJoinViaVia') + ' is required');
+      return;
+    }
+    if (!comfortableEarlyMornings) {
+      setError(t('comfortableEarlyMornings') + ' is required');
+      return;
+    }
+    if (!languagesSpoken.trim()) {
+      setError(t('languagesSpoken') + ' is required');
+      return;
+    }
+    if (!fastPacedExperience) {
+      setError(t('fastPacedExperience') + ' is required');
+      return;
+    }
+    if (!whatMakesYouReliable.trim()) {
+      setError(t('whatMakesYouReliable') + ' is required');
+      return;
+    }
+    if (!resumeFile) {
+      setError(t('resume') + ' is required');
+      return;
+    }
+
+    const allowedResumeTypes = ['.pdf', '.doc', '.docx'];
+    const resumeExt = resumeFile.name.substring(resumeFile.name.lastIndexOf('.')).toLowerCase();
+    if (!allowedResumeTypes.includes(resumeExt)) {
+      setError('Resume must be PDF, DOC, or DOCX');
+      return;
+    }
+
+    setSubmitting(true);
+
+    try {
+      // Upload resume
+      const resumePresigned = await getPresignedUploadUrl(jobId, 'resume', resumeFile.name);
+      await uploadFileToPresignedUrl(
+        resumePresigned.uploadUrl,
+        resumeFile,
+        resumePresigned.contentType
+      );
+      const resumeS3Key = resumePresigned.s3Key;
+
+      // Upload cover letter if provided
+      let coverLetterS3Key: string | undefined;
+      if (coverLetterFile) {
+        const clPresigned = await getPresignedUploadUrl(jobId, 'coverLetter', coverLetterFile.name);
+        await uploadFileToPresignedUrl(
+          clPresigned.uploadUrl,
+          coverLetterFile,
+          clPresigned.contentType
+        );
+        coverLetterS3Key = clPresigned.s3Key;
+      }
+
+      const payload: SubmitApplicationPayload = {
+        jobId,
+        fullName: name.trim(),
+        email: email.trim(),
+        phone: hasMeaningfulPhone ? phone.trim() : undefined,
+        answers: {
+          eligibleToWorkInCanada: eligibleToWorkInCanada.trim(),
+          eligibleToWorkInCanadaExplain: eligibleToWorkInCanadaExplain.trim(),
+          accommodationInBowValley: accommodationInBowValley.trim(),
+          accommodationInBowValleyExplain: accommodationInBowValleyExplain.trim(),
+          whyJoinViaVia: whyJoinViaVia.trim(),
+          comfortableEarlyMornings: comfortableEarlyMornings.trim(),
+          languagesSpoken: languagesSpoken.trim(),
+          fastPacedExperience: fastPacedExperience.trim(),
+          fastPacedExperienceExplain: fastPacedExperienceExplain.trim(),
+          whatMakesYouReliable: whatMakesYouReliable.trim(),
+        },
+        resumeS3Key,
+        coverLetterS3Key,
+      };
+
+      await submitJobApplication(payload);
+      setSuccess(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t('error'));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const handleOverlayClick = () => {
+    if (showCloseConfirm) {
+      setShowCloseConfirm(false);
+    } else {
+      requestClose();
+    }
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="job-application-dialog-title"
+    >
+      <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div className={`${styles.header} ${descriptionExpanded ? styles.headerExpanded : ''}`}>
+          <div className={styles.headerContent}>
+            <h2 id="job-application-dialog-title" className={styles.title}>
+              {jobTitle}
+            </h2>
+            <div
+              className={`${styles.descriptionSection} ${descriptionExpanded ? styles.descriptionExpanded : ''}`}
+            >
+              {descriptionExpanded && jobDescriptionExpanded ? (
+                <div
+                  className={styles.descriptionExpandedContent}
+                  dangerouslySetInnerHTML={{ __html: jobDescriptionExpanded }}
+                />
+              ) : (
+                <p className={styles.description}>{jobDescription}</p>
+              )}
+              <button
+                type="button"
+                onClick={() => setDescriptionExpanded((v) => !v)}
+                className={styles.descriptionToggle}
+                aria-label={descriptionExpanded ? t('collapseDescription') : t('expandDescription')}
+                aria-expanded={descriptionExpanded}
+              >
+                <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <button
+            type="button"
+            onClick={requestClose}
+            className={styles.closeBtn}
+            aria-label={t('close')}
+          >
+            <svg width="24" height="24" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className={styles.formRow}>
+        <div className={styles.bodyScroll}>
+          <div className={styles.content}>
+          {success ? (
+            <>
+              <div className={styles.success}>{t('success')}</div>
+              <div className={styles.footer}>
+                <button type="button" onClick={handleClose} className={styles.submitBtn}>
+                  {t('close')}
+                </button>
+              </div>
+            </>
+          ) : showCloseConfirm ? (
+            <div className={styles.closeConfirm}>
+              <p className={styles.closeConfirmTitle}>{t('closeConfirmTitle')}</p>
+              <p className={styles.closeConfirmMessage}>{t('closeConfirmMessage')}</p>
+              <div className={styles.closeConfirmActions}>
+                <button
+                  type="button"
+                  onClick={() => setShowCloseConfirm(false)}
+                  className={styles.cancelBtn}
+                >
+                  {t('keepEditing')}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  className={styles.submitBtn}
+                >
+                  {t('discard')}
+                </button>
+              </div>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className={styles.form}>
+              <div className={styles.formGroup}>
+                <label htmlFor="name" className={styles.label}>
+                  {t('name')} *
+                </label>
+                <input
+                  id="name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  className={styles.input}
+                  required
+                  disabled={submitting}
+                />
+              </div>
+
+              <div className={styles.formGroup}>
+                <label htmlFor="email" className={styles.label}>
+                  {t('email')} *
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className={styles.input}
+                  required
+                  disabled={submitting}
+                />
+              </div>
+
+              <div className={styles.formGroup}>
+                <label htmlFor="phone" className={styles.label}>
+                  {t('phoneNumber')}
+                </label>
+                <PhoneInputWithCountry
+                  id="phone"
+                  value={phone}
+                  onChange={(value) => setPhone(value ?? '')}
+                  placeholder="e.g. +1 403 555 0123"
+                  disabled={submitting}
+                  className={styles.phoneInputMatch}
+                />
+              </div>
+
+              <YesNoField
+                id="eligibleToWorkInCanada"
+                label={t('eligibleToWorkInCanada')}
+                value={eligibleToWorkInCanada}
+                onChange={setEligibleToWorkInCanada}
+                t={t}
+                submitting={submitting}
+                required
+              />
+              {eligibleToWorkInCanada === 'NO' && (
+                <div className={styles.formGroup}>
+                  <label htmlFor="eligibleToWorkInCanadaExplain" className={styles.label}>
+                    {t('eligibleToWorkInCanadaFollowUp')} *
+                  </label>
+                  <input
+                    id="eligibleToWorkInCanadaExplain"
+                    type="text"
+                    value={eligibleToWorkInCanadaExplain}
+                    onChange={(e) => setEligibleToWorkInCanadaExplain(e.target.value)}
+                    className={styles.input}
+                    required={eligibleToWorkInCanada === 'NO'}
+                    disabled={submitting}
+                  />
+                </div>
+              )}
+
+              <YesNoField
+                id="accommodationInBowValley"
+                label={t('accommodationInBowValley')}
+                value={accommodationInBowValley}
+                onChange={setAccommodationInBowValley}
+                t={t}
+                submitting={submitting}
+                required
+              />
+              {accommodationInBowValley === 'NO' && (
+                <div className={styles.formGroup}>
+                  <label htmlFor="accommodationInBowValleyExplain" className={styles.label}>
+                    {t('accommodationInBowValleyFollowUp')} *
+                  </label>
+                  <input
+                    id="accommodationInBowValleyExplain"
+                    type="text"
+                    value={accommodationInBowValleyExplain}
+                    onChange={(e) => setAccommodationInBowValleyExplain(e.target.value)}
+                    className={styles.input}
+                    required={accommodationInBowValley === 'NO'}
+                    disabled={submitting}
+                  />
+                </div>
+              )}
+
+              <div className={styles.formGroup}>
+                <label htmlFor="whyJoinViaVia" className={styles.label}>
+                  {t('whyJoinViaVia')} *
+                </label>
+                <textarea
+                  id="whyJoinViaVia"
+                  value={whyJoinViaVia}
+                  onChange={(e) => setWhyJoinViaVia(e.target.value)}
+                  className={`${styles.input} ${styles.textarea}`}
+                  disabled={submitting}
+                  required
+                />
+              </div>
+
+              <YesNoField
+                id="comfortableEarlyMornings"
+                label={t('comfortableEarlyMornings')}
+                value={comfortableEarlyMornings}
+                onChange={setComfortableEarlyMornings}
+                t={t}
+                submitting={submitting}
+                required
+              />
+
+              <div className={styles.formGroup}>
+                <label htmlFor="languagesSpoken" className={styles.label}>
+                  {t('languagesSpoken')} *
+                </label>
+                <input
+                  id="languagesSpoken"
+                  type="text"
+                  value={languagesSpoken}
+                  onChange={(e) => setLanguagesSpoken(e.target.value)}
+                  className={styles.input}
+                  required
+                  disabled={submitting}
+                />
+              </div>
+
+              <YesNoField
+                id="fastPacedExperience"
+                label={t('fastPacedExperience')}
+                value={fastPacedExperience}
+                onChange={setFastPacedExperience}
+                t={t}
+                submitting={submitting}
+                required
+              />
+              {(fastPacedExperience === 'YES' || fastPacedExperience === 'NO') && (
+                <div className={styles.formGroup}>
+                  <label htmlFor="fastPacedExperienceExplain" className={styles.label}>
+                    {t('explainOptional')}
+                  </label>
+                  <input
+                    id="fastPacedExperienceExplain"
+                    type="text"
+                    value={fastPacedExperienceExplain}
+                    onChange={(e) => setFastPacedExperienceExplain(e.target.value)}
+                    className={styles.input}
+                    disabled={submitting}
+                  />
+                </div>
+              )}
+
+              <div className={styles.formGroup}>
+                <label htmlFor="whatMakesYouReliable" className={styles.label}>
+                  {t('whatMakesYouReliable')} *
+                </label>
+                <textarea
+                  id="whatMakesYouReliable"
+                  value={whatMakesYouReliable}
+                  onChange={(e) => setWhatMakesYouReliable(e.target.value)}
+                  className={`${styles.input} ${styles.textarea}`}
+                  disabled={submitting}
+                  required
+                />
+              </div>
+
+              <div className={styles.formGroup}>
+                <label className={styles.label}>
+                  {t('resume')} *
+                </label>
+                <div className={`${styles.fileInput} ${submitting ? styles.fileInputDisabled : ''}`}>
+                  <input
+                    id="resume-file"
+                    type="file"
+                    accept=".pdf,.doc,.docx"
+                    onChange={(e) => setResumeFile(e.target.files?.[0] ?? null)}
+                    disabled={submitting}
+                    className={styles.fileInputHidden}
+                  />
+                  <label htmlFor="resume-file" className={styles.fileInputButton}>
+                    {t('chooseFile')}
+                  </label>
+                  {resumeFile && <div className={styles.fileName}>{resumeFile.name}</div>}
+                </div>
+              </div>
+
+              <div className={styles.formGroup}>
+                <label className={styles.label}>
+                  {t('coverLetter')}
+                </label>
+                <div className={`${styles.fileInput} ${submitting ? styles.fileInputDisabled : ''}`}>
+                  <input
+                    id="cover-letter-file"
+                    type="file"
+                    accept=".pdf,.doc,.docx"
+                    onChange={(e) => setCoverLetterFile(e.target.files?.[0] ?? null)}
+                    disabled={submitting}
+                    className={styles.fileInputHidden}
+                  />
+                  <label htmlFor="cover-letter-file" className={styles.fileInputButton}>
+                    {t('chooseFile')}
+                  </label>
+                  {coverLetterFile && <div className={styles.fileName}>{coverLetterFile.name}</div>}
+                </div>
+              </div>
+
+              {error && <div className={styles.error}>{error}</div>}
+
+              <div className={styles.footer}>
+              <Button
+                variant={submitting ? 'disabled' : 'primary'}
+                hoverColor={ButtonHoverColor.Turquoise}
+                onClick={handleSubmit}
+              >
+                {t('submit')}
+              </Button>
+              </div>
+            </form>
+          )}
+          </div>
+        </div>
+          <div className={styles.rightColumn}>
+            <p className={styles.rightColumnText}>Good people.</p>
+            <p className={styles.rightColumnText}>Epic journeys.</p>
+            <p className={styles.rightColumnText}>Real impact.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { JOB_ID_GUEST_EXPERIENCE };