diff --git a/app/components/ContributionAmountField.vue b/app/components/ContributionAmountField.vue new file mode 100644 index 0000000..ffc596c --- /dev/null +++ b/app/components/ContributionAmountField.vue @@ -0,0 +1,302 @@ + + + + + diff --git a/app/config/contributions.js b/app/config/contributions.js index 73005f1..ea60f98 100644 --- a/app/config/contributions.js +++ b/app/config/contributions.js @@ -20,3 +20,12 @@ export const getGuidanceLabel = (amount) => { const match = CONTRIBUTION_PRESETS.findLast(p => p.amount <= n) return match?.label ?? null } + +// Format a contribution amount with cadence-aware suffix. +// amount is interpreted in cadence units (e.g. 180 + 'annual' → "$180/yr"). +export const formatContribution = (amount, cadence) => { + const n = Number(amount) || 0 + if (n === 0) return '$0' + const suffix = cadence === 'annual' ? '/yr' : '/mo' + return `$${n}${suffix}` +} diff --git a/app/layouts/admin.vue b/app/layouts/admin.vue index 0c0d201..839fc3b 100644 --- a/app/layouts/admin.vue +++ b/app/layouts/admin.vue @@ -44,7 +44,7 @@
  • Series @@ -66,6 +66,14 @@ Board Channels
  • +
  • + + Tags + +
  • @@ -178,6 +186,15 @@ Board Channels
  • +
  • + + Tags + +
  • +

    {{ fieldErrors.name }}

    @@ -68,7 +71,7 @@
    -

    Which circle fits where you are right now?

    +

    Where you are in your co-op journey. You can change this anytime.

    - -
    -
    - - -
    -
    - - -
    -
    -
    - -
    - -
    - $ - -
    -
    - -
    -

    {{ guidanceLabel }}

    +

    Pay what you can. If you can pay more, you're making room for someone who can't.

    -
    -
    -

    - You'll be charged ${{ firstCharge }} today (${{ form.contributionAmount }}/month × 12). -

    -

    - Then ${{ firstCharge }} every {{ cadence === 'annual' ? 'year' : 'month' }}, until you cancel. -

    -
    -
    -