Dependencies
This layout uses the following components as "atoms" to create the full UI.
Extends: Layouts: Uses: Components:Sell My Car Hero
The sell my car hero is extended to contain a form which takes users through a simple step process to value their car.
<header class="c-hero c-hero--header c-hero--center c-hero--top | t-hero--sell | u-min-h-30" x-data="{ stage: 1, reg: 'FY71OLV' }">
<div class="c-hero__media">
<img class="c-hero__media-img c-img | o-fit" src="/assets/img/ui/backgrounds/listers-light-streak.svg">
</div>
<form class="c-hero__body"
@submit.prevent="console.log('submitted')"
>
<!-- Stage 1 -->
<div class="c-hero__body-description | u-pt"
x-show="stage === 1 || stage === 'fail' || stage === 'loading'"
>
<h1 class="c-hero-heading | u-heading u-giga">Sell your Car</h1>
<p class="c-hero-lead | u-lead u-gamma u-heading--alt u-mt">Simply enter your vehicle registration & mileage to get your valuation.</p>
<fieldset class="c-sell-grp | u-mt-lg"
x-show="stage === 1 || stage === 'loading'"
>
<div id="stage_1" class="c-sell-grp__1"
x-show="stage === 1"
:class="stage == 1 && 'is-active'"
>
<label class="c-label c-label--float | is-active" for="reg_input">
<span class="c-label__text | u-fw-600 u-size-md">
Enter REG:
</span>
<span class="c-label__input">
<input class="c-input c-input--text | t-reg-input" id="reg_input" type="text" name="registration" placeholder="e.g. LSTR S86" autocomplete="off" maxlength="10" pattern="(?<Current>^[A-Z]{2}[0-9]{2}[A-Z]{3}$)|(?<Prefix>^[A-Z][0-9]{1,3}[A-Z]{3}$)|(?<Suffix>^[A-Z]{3}[0-9]{1,3}[A-Z]$)|(?<DatelessLongNumberPrefix>^[0-9]{1,4}[A-Z]{1,2}$)|(?<DatelessShortNumberPrefix>^[0-9]{1,3}[A-Z]{1,3}$)|(?<DatelessLongNumberSuffix>^[A-Z]{1,2}[0-9]{1,4}$)|(?<DatelessShortNumberSufix>^[A-Z]{1,3}[0-9]{1,3}$)|(?<DatelessNorthernIreland>^[A-Z]{1,3}[0-9]{1,4}$)|(?<DiplomaticPlate>^[0-9]{3}[DX]{1}[0-9]{3}$)" required
x-model="reg"
@keyup.enter.prevent="$refs.stage2.click()"
>
</span>
</label>
<button class="c-btn c-btn--lg c-btn--positive" type="button"
x-ref="stage2"
@click="if(reg == 'fail' ){ stage = 'fail' } else if( reg == 'loading') { stage = 'loading' } else if( reg == 'ex') { stage = 'ex'} else { stage = 2 }"
>
Value your Car
<span class="u-ml-sm" aria-hidden="true">→</span>
</button>
<small class="u-fs-sm u-tc-slate-600 u-fw-500">* We only take cars up to 6 years old, and up to 60,000 miles on the clock.</small>
</div>
<!-- Loading Example -->
<div id="is_loading" class="c-sell-grp__3 | is-inactive" style="display: none;"
x-show="stage === 'loading'"
:class="stage == 'loading' && 'is-inactive'"
>
<label class="c-label c-label--float | is-active" for="reg_input_copy">
<span class="c-label__text | u-fw-600 u-size-md">
Enter REG:
</span>
<span class="c-label__input">
<input class="c-input c-input--text | t-reg-input" id="reg_input_copy" type="text" name="registration" value="FL71OLV" placeholder="e.g. LSTR S86" autocomplete="off" maxlength="10" pattern="(?<Current>^[A-Z]{2}[0-9]{2}[A-Z]{3}$)|(?<Prefix>^[A-Z][0-9]{1,3}[A-Z]{3}$)|(?<Suffix>^[A-Z]{3}[0-9]{1,3}[A-Z]$)|(?<DatelessLongNumberPrefix>^[0-9]{1,4}[A-Z]{1,2}$)|(?<DatelessShortNumberPrefix>^[0-9]{1,3}[A-Z]{1,3}$)|(?<DatelessLongNumberSuffix>^[A-Z]{1,2}[0-9]{1,4}$)|(?<DatelessShortNumberSufix>^[A-Z]{1,3}[0-9]{1,3}$)|(?<DatelessNorthernIreland>^[A-Z]{1,3}[0-9]{1,4}$)|(?<DiplomaticPlate>^[0-9]{3}[DX]{1}[0-9]{3}$)" required
@keyup.enter.prevent
>
</span>
</label>
<button class="c-btn c-btn--lg c-btn--positive | is-loading" type="button">
Value your Car
<span class="u-ml-sm" aria-hidden="true">→</span>
<svg class="c-loader | u-tc-white" viewBox="0 0 120 30" aria-hidden="true">
<g>
<circle class="c-dots" cx="15" cy="15" r="15" />
<circle class="c-dot" cx="60" cy="15" r="15" />
<circle class="c-dots" cx="105" cy="15" r="15" />
</g>
</svg>
</button>
<small class="u-fs-sm u-tc-slate-600 u-fw-500">* We only take cars up to 6 years old, with up to 60,000 miles on the clock.</small>
</div>
</fieldset>
</div>
<!-- Stage 2 -->
<div class="c-hero__body-description" style="display: none;"
x-show="stage === 2 || stage === 'ex'"
>
<!-- Vehicle details -->
<div class="c-sell-details | o-flow-sm">
<span class="c-reg" x-text="reg"></span>
<span class="u-heading u-epsilon">Toyota C-HR Design HEV CVT</span>
<ul class="o-list-inline | u-w-100% u-justify-center u-fs-small u-fw-500">
<li class="o-list__item o-delimit-item" id="year" data-delimit="•">2021</li>
<li class="o-list__item o-delimit-item" id="colour" data-delimit="•">Grey</li>
<li class="o-list__item o-delimit-item" id="transmission" data-delimit="•">Automatic</li>
<li class="o-list__item o-delimit-item" id="fuel" data-delimit="•">Hybrid</li>
</ul>
<button class="c-faux-link | u-fs-sm" type="button"
@click="stage = 1"
>Not your Car? Try Again</button>
</div>
<fieldset class="c-sell-grp | u-mt-lg">
<!-- Vehicle accepted, mileage needed -->
<div id="stage_2" class="c-sell-grp__2 | is-inactive" style="display: none;"
x-show="stage === 2"
:class="stage == 2 && 'is-inactive'"
>
<label class="c-label" for="mileage_input">
<span class="c-label__text | u-fw-600 u-size-md">Enter Mileage:</span>
<span class="c-label__input">
<input class="c-input c-input--text" id="mileage_input" type="number" name="mileage" placeholder="e.g. 24,000" autocomplete="off" autocorrect="off" pattern="[0-9]+(,[0-9]+)*" required>
</span>
</label>
<button class="c-btn c-btn--lg c-btn--positive | u-self-end" type="submit"
@keyup.enter.prevent
>
Continue
<span class="u-ml-sm" aria-hidden="true">→</span>
</button>
</div>
<!-- If Exchange Route @form !Not Needed! -->
<div id="is_exchange" class="c-sell-grp__4 | is-inactive" style="display: none;"
x-show="stage === 'ex'"
>
<div class="o-flow-sm">
<p>We can't provide a valuation for that car but ...</p>
<h3 class="u-heading u-epsilon u-tc-info">We can part exchange your car</h3>
<p class="o-flow | u-mt-md">We'll give you
<span class="u-heading u-gamma | u-tc-info u-my-sm">£1,345<sup>*</sup></span>
towards your next car as a part exchange.</p>
<small></small>
<a href="#search" class="c-btn c-btn--lg c-btn--primary | u-mt-md">
Search Cars on Listers
<span class="u-ml-sm" aria-hidden="true">→</span>
</a>
</div>
</div>
</fieldset>
</div>
<!-- Failed -->
<div class="c-hero__body-description" style="display: none;"
x-show="stage === 'fail'"
>
<fieldset class="c-sell-grp | u-mt-lg" id="is_fail">
<div class="c-sell-grp__5 | o-flow-sm">
<svg class="c-icon c-icon--md | u-inline-block u-tc-negative" viewbox="0 0 16 16" aria-hidden="true">
<path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 11.6h0m0-4.8v2.6m-6.8 2.7c-.6 1.1.2 2.5 1.4 2.5h10.8c1.2 0 2-1.4 1.4-2.5L9.4 2.8c-.6-1-2.2-1-2.8 0l-5.4 9.3Z"/>
</svg>
<span class="u-heading u-epsilon u-tc-negative">Sorry</span>
<p>Unfortunately we can't give you a valuation for that car.</p>
<button class="c-faux-link | u-fs-sm" type="button"
@click="stage = 1"
>Try Again</button>
<div class="u-left u-mt-md u-fs-sm | o-flow-sm">
<small class="u-block u-fw-600">It could be because:</small>
<ul class="c-list--disc | u-left" role="list">
<li>The registration doesn't match any known records.</li>
<li>It's a private number plate.</li>
<li>The car might be a newly registered car which is less than 3 months old.</li>
</ul>
</div>
</div>
</fieldset>
</div>
</form>
</header>