@ticketboothapp/booking 0.1.18 → 0.1.20

package/src/components/JobApplicationDialog.tsx

@@ -1,620 +0,0 @@
-'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 };