feat(contribution): extract ContributionAmountField component
This commit is contained in:
parent
1c3273cee2
commit
81783866d1
1 changed files with 297 additions and 0 deletions
297
app/components/ContributionAmountField.vue
Normal file
297
app/components/ContributionAmountField.vue
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div class="contribution-amount-field">
|
||||
<div v-if="allowCadenceChange" class="form-group">
|
||||
<label class="form-label">How often</label>
|
||||
<div class="cadence-radios">
|
||||
<div class="circle-radio">
|
||||
<input
|
||||
:id="`${uid}-cadence-monthly`"
|
||||
type="radio"
|
||||
:name="`${uid}-cadence`"
|
||||
value="monthly"
|
||||
:checked="cadence === 'monthly'"
|
||||
@change="onCadenceChange('monthly')"
|
||||
>
|
||||
<label :for="`${uid}-cadence-monthly`">
|
||||
<span class="circle-label-name">Per Month</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="circle-radio">
|
||||
<input
|
||||
:id="`${uid}-cadence-annual`"
|
||||
type="radio"
|
||||
:name="`${uid}-cadence`"
|
||||
value="annual"
|
||||
:checked="cadence === 'annual'"
|
||||
@change="onCadenceChange('annual')"
|
||||
>
|
||||
<label :for="`${uid}-cadence-annual`">
|
||||
<span class="circle-label-name">Per Year</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" :for="`${uid}-amount`">Contribution</label>
|
||||
<div class="contribution-input-row">
|
||||
<span class="contribution-currency">$</span>
|
||||
<input
|
||||
:id="`${uid}-amount`"
|
||||
:value="modelValue"
|
||||
type="number"
|
||||
min="0"
|
||||
step="1"
|
||||
inputmode="numeric"
|
||||
class="contribution-input"
|
||||
@input="onAmountInput"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="contribution-presets"
|
||||
role="group"
|
||||
aria-label="Suggested amounts"
|
||||
>
|
||||
<button
|
||||
v-for="preset in presetChips"
|
||||
:key="preset.amount"
|
||||
type="button"
|
||||
class="contribution-preset-chip"
|
||||
:class="{ active: numericAmount === preset.amount }"
|
||||
@click="selectPreset(preset.amount)"
|
||||
>
|
||||
${{ preset.amount }}
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="guidanceLabel" class="contribution-guidance">
|
||||
{{ guidanceLabel }}
|
||||
</p>
|
||||
<p v-if="showSoftMax" class="contribution-soft-max">
|
||||
Whoa, that's a lot. Are you sure that's the amount you meant?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="showSummary && numericAmount > 0" class="form-group">
|
||||
<div class="billing-summary">
|
||||
<p class="billing-summary-line">
|
||||
You'll be charged <strong>${{ numericAmount }} today</strong>.
|
||||
</p>
|
||||
<p class="billing-summary-line">
|
||||
Then <strong>${{ numericAmount }}</strong>
|
||||
{{ cadence === 'annual' ? 'at each annual renewal.' : 'each month.' }}
|
||||
</p>
|
||||
<p v-if="summaryNote" class="billing-summary-line billing-summary-note">
|
||||
{{ summaryNote }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, useId } from 'vue'
|
||||
import {
|
||||
CONTRIBUTION_PRESETS,
|
||||
getGuidanceLabel,
|
||||
} from '~/config/contributions.js'
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Number, required: true },
|
||||
cadence: { type: String, required: true },
|
||||
allowCadenceChange: { type: Boolean, default: true },
|
||||
showSummary: { type: Boolean, default: true },
|
||||
summaryNote: { type: String, default: '' },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'update:cadence'])
|
||||
|
||||
const uid = useId()
|
||||
|
||||
const numericAmount = computed(() => {
|
||||
const n = Number(props.modelValue)
|
||||
return Number.isFinite(n) ? n : 0
|
||||
})
|
||||
|
||||
const monthlyEquivalent = computed(() =>
|
||||
props.cadence === 'annual' ? numericAmount.value / 12 : numericAmount.value,
|
||||
)
|
||||
|
||||
const presetChips = computed(() =>
|
||||
CONTRIBUTION_PRESETS.map((p) => ({
|
||||
amount: props.cadence === 'annual' ? p.amount * 12 : p.amount,
|
||||
label: p.label,
|
||||
})),
|
||||
)
|
||||
|
||||
const guidanceLabel = computed(() => getGuidanceLabel(monthlyEquivalent.value))
|
||||
|
||||
const showSoftMax = computed(() => monthlyEquivalent.value > 500)
|
||||
|
||||
const onAmountInput = (event) => {
|
||||
const raw = event.target.value
|
||||
if (raw === '') {
|
||||
emit('update:modelValue', 0)
|
||||
return
|
||||
}
|
||||
const n = Number(raw)
|
||||
emit('update:modelValue', Number.isFinite(n) ? n : 0)
|
||||
}
|
||||
|
||||
const selectPreset = (amount) => {
|
||||
emit('update:modelValue', amount)
|
||||
}
|
||||
|
||||
// Annual→monthly snap: floor(annual/12)*12 keeps the amount cleanly divisible
|
||||
// before we divide, so toggling cadences never leaves fractional dollars.
|
||||
const onCadenceChange = (newCadence) => {
|
||||
if (newCadence === props.cadence) return
|
||||
const current = numericAmount.value
|
||||
let next = current
|
||||
if (newCadence === 'annual') {
|
||||
next = current * 12
|
||||
} else {
|
||||
next = Math.floor(current / 12)
|
||||
}
|
||||
emit('update:cadence', newCadence)
|
||||
emit('update:modelValue', next)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
|
||||
.cadence-radios {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
.circle-radio {
|
||||
position: relative;
|
||||
}
|
||||
.circle-radio input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.circle-radio label {
|
||||
display: block;
|
||||
border: 1px dashed var(--border);
|
||||
padding: 14px 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
.circle-radio label:hover {
|
||||
border-color: var(--candle-faint);
|
||||
}
|
||||
.circle-radio input:checked + label {
|
||||
border-style: solid;
|
||||
border-color: var(--candle);
|
||||
}
|
||||
.circle-radio input:checked + label .circle-label-name {
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.circle-label-name {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contribution-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.contribution-currency {
|
||||
font-weight: 600;
|
||||
}
|
||||
.contribution-input {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--parch);
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 1rem;
|
||||
color: var(--text-bright);
|
||||
}
|
||||
.contribution-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--candle);
|
||||
}
|
||||
|
||||
.contribution-presets {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.contribution-preset-chip {
|
||||
padding: 0.25rem 0.75rem;
|
||||
background: transparent;
|
||||
border: 1px dashed var(--parch);
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
}
|
||||
.contribution-preset-chip:hover {
|
||||
border-style: solid;
|
||||
border-color: var(--candle);
|
||||
}
|
||||
.contribution-preset-chip.active {
|
||||
border-style: solid;
|
||||
border-color: var(--candle);
|
||||
background: var(--parch);
|
||||
color: var(--text-bright);
|
||||
}
|
||||
|
||||
.contribution-guidance {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
color: var(--text);
|
||||
}
|
||||
.contribution-soft-max {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.billing-summary {
|
||||
padding: 12px 16px;
|
||||
border: 1px dashed var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
.billing-summary-line {
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
.billing-summary-line + .billing-summary-line {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.billing-summary-line strong {
|
||||
color: var(--text-bright);
|
||||
font-weight: 600;
|
||||
}
|
||||
.billing-summary-note {
|
||||
color: var(--text-dim);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue