104 lines
5.6 KiB
Plaintext
104 lines
5.6 KiB
Plaintext
---
|
||
import Icon from './Icon.astro';
|
||
import FormAPreview from '../FormAPreview.astro';
|
||
import JotformIframe from '../JotformIframe.astro';
|
||
import { formAPreviewEnabled, formModeForRuntime, resolveFormAIframe, resolveFormMode } from '../../utils/form-integration';
|
||
interface Props {
|
||
sourcePage: 'general' | 'commercial' | 'ahcccs' | 'private_pay';
|
||
title: string;
|
||
intro: string;
|
||
buttonText: string;
|
||
}
|
||
const { sourcePage, title, intro, buttonText } = Astro.props;
|
||
const phone = import.meta.env.PUBLIC_AIA_PHONE || '480-687-7099';
|
||
const tel = phone.replace(/[^0-9+]/g, '');
|
||
const formConfig = resolveFormMode(import.meta.env.PUBLIC_AIA_FORMS_MODE, import.meta.env.PUBLIC_AIA_FORMS_LIVE_APPROVED);
|
||
const formPreview = formAPreviewEnabled(import.meta.env.PUBLIC_AIA_FORM_A_PREVIEW, import.meta.env.PUBLIC_ALLOW_INDEXING, formModeForRuntime(formConfig));
|
||
const campaignRoute = sourcePage === 'general'
|
||
? '/lp/aba-therapy'
|
||
: sourcePage === 'commercial'
|
||
? '/lp/aba-insurance'
|
||
: sourcePage === 'ahcccs'
|
||
? '/lp/aba-ahcccs'
|
||
: '/lp/aba-private-pay';
|
||
const iframeDescription = 'Use this form to request a conversation. An AIA team member can explain the next steps for your family.';
|
||
const formAIframe = resolveFormAIframe({
|
||
rawMode: import.meta.env.PUBLIC_AIA_FORMS_MODE,
|
||
liveApproved: import.meta.env.PUBLIC_AIA_FORMS_LIVE_APPROVED,
|
||
isolatedTestApproved: import.meta.env.PUBLIC_AIA_FORMS_ISOLATED_TEST_APPROVED,
|
||
consultationTestApproved: import.meta.env.PUBLIC_AIA_FORMS_CONSULTATION_TEST_APPROVED,
|
||
productionApproved: import.meta.env.PUBLIC_AIA_FORM_A_PRODUCTION_APPROVED,
|
||
environmentRole: import.meta.env.PUBLIC_AIA_FORMS_ENVIRONMENT,
|
||
allowIndexing: import.meta.env.PUBLIC_ALLOW_INDEXING,
|
||
route: campaignRoute,
|
||
locale: 'en',
|
||
});
|
||
---
|
||
<section class="section consultation" id="consultation" aria-labelledby="consultation-heading">
|
||
<div class="container consultation__panel grid-2">
|
||
<div class="consultation__copy">
|
||
<div class="eyebrow">Talk with AIA</div>
|
||
<h2 id="consultation-heading">{title}</h2>
|
||
<p class="lede">{intro}</p>
|
||
</div>
|
||
<div class="form-wrap">
|
||
{formAIframe.enabled
|
||
? <JotformIframe config={formAIframe} heading="Start with your contact details" description={iframeDescription} variant="embedded" />
|
||
: formPreview ? <FormAPreview lang="en" variant="compact" submitText={buttonText} /> : <div id="lead-form" role="group" aria-labelledby="campaign-form-heading" data-forms-mode="off">
|
||
<!-- TODO: Replace this inactive presentation with the approved Jotform integration under P9-03. -->
|
||
<!-- TODO: Verify privacy, spam protection and notifications before production activation. -->
|
||
<h3 id="campaign-form-heading">Start with your contact details</h3>
|
||
<p class="form-note form-intro">Use this form to request a conversation. An AIA team member can explain the next steps for your family.</p>
|
||
<input disabled type="hidden" name="sourcePage" value={sourcePage} />
|
||
<div class="form-grid">
|
||
<div class="field field--full">
|
||
<label for="name">Parent or caregiver name</label>
|
||
<input disabled id="name" name="name" autocomplete="name" required maxlength="160" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="phone">Phone</label>
|
||
<input disabled id="phone" name="phone" type="tel" autocomplete="tel" required maxlength="80" />
|
||
</div>
|
||
<div class="field field--website" aria-hidden="true" inert>
|
||
<label for="website">Website</label>
|
||
<input disabled id="website" name="website" type="text" tabindex="-1" autocomplete="off" data-1p-ignore />
|
||
</div>
|
||
<div class="field">
|
||
<label for="email">Email <span id="email-requirement" class="form-note">(optional)</span></label>
|
||
<input disabled id="email" name="email" type="email" autocomplete="email" maxlength="320" />
|
||
</div>
|
||
<div class="field field--full">
|
||
<label for="preferredContact">Preferred contact method</label>
|
||
<select disabled id="preferredContact" name="preferredContact" required>
|
||
<option value="">Choose one</option>
|
||
<option value="phone">Phone</option>
|
||
<option value="email">Email</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div id="form-error" class="form-error" role="alert" tabindex="-1"></div>
|
||
<button class="button" type="button" disabled>{buttonText}<Icon name="arrow" /></button>
|
||
<p class="form-note">Questions? <a href={`tel:${tel}`}>Call AIA at {phone}</a>. Review AIA's <a href="/privacy-policy">privacy policy</a>.</p>
|
||
</div>}
|
||
</div>
|
||
<div class="consultation__details">
|
||
<div class="consultation__contact">
|
||
<h3><a href={`tel:${tel}`}><Icon name="phone" />Call AIA at {phone}</a></h3>
|
||
<p>Mon–Fri, 8:00 AM–6:00 PM</p>
|
||
</div>
|
||
<div class="clinic-location" aria-labelledby="clinic-location-heading">
|
||
<span class="icon-circle"><Icon name="pin" /></span>
|
||
<div class="clinic-location__body">
|
||
<h3 id="clinic-location-heading">Scottsdale clinic location</h3>
|
||
<address>8901 E Raintree Dr, Ste 160<br />Scottsdale, AZ 85260</address>
|
||
<a class="clinic-location__directions" href="https://www.google.com/maps/search/?api=1&query=8901+E+Raintree+Dr+Ste+160+Scottsdale+AZ+85260" target="_blank" rel="noopener noreferrer">Get directions <Icon name="arrow" /></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.field--website { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||
</style>
|