| 1 |
{# Fee calculator results, server-rendered, swapped into /pricing via HTMX |
| 2 |
from GET /pricing/compare as the dials change. Every value here is |
| 3 |
preformatted in `fee_calculator::Outcome`, including the bar's segment |
| 4 |
widths; this template does no arithmetic. The math lives in Rust, sourced |
| 5 |
from `docs/business/assumptions.toml`, and is pinned by |
| 6 |
`fee_calculator::tests`. |
| 7 |
|
| 8 |
The other platform is never named, here or anywhere else. Its fees are the |
| 9 |
two dials above, so there is nothing to keep current. #} |
| 10 |
<div class="tier-section" id="results"> |
| 11 |
<div class="calc-verdict {{ outcome.verdict.css_class() }}">{{ outcome.headline }}</div> |
| 12 |
|
| 13 |
<table class="data-table calc-table well" aria-label="Monthly take-home comparison"> |
| 14 |
<thead> |
| 15 |
<tr> |
| 16 |
<th>Monthly</th> |
| 17 |
<th>Here</th> |
| 18 |
<th>The other platform</th> |
| 19 |
</tr> |
| 20 |
</thead> |
| 21 |
<tbody> |
| 22 |
<tr> |
| 23 |
<th scope="row">You sell</th> |
| 24 |
<td colspan="2" class="calc-gross">{{ outcome.gross }}</td> |
| 25 |
</tr> |
| 26 |
<tr class="calc-keep-row"> |
| 27 |
<th scope="row">You keep</th> |
| 28 |
<td>{{ outcome.mnw_keep }}</td> |
| 29 |
<td>{{ outcome.other_keep }}</td> |
| 30 |
</tr> |
| 31 |
<tr> |
| 32 |
<th scope="row">Total fees</th> |
| 33 |
<td>{{ outcome.mnw_rate }}</td> |
| 34 |
<td>{{ outcome.other_rate }}</td> |
| 35 |
</tr> |
| 36 |
</tbody> |
| 37 |
</table> |
| 38 |
</div> |
| 39 |
|
| 40 |
<div class="tier-section"> |
| 41 |
<h2 class="section-label">Where each one wins</h2> |
| 42 |
|
| 43 |
{# Two segments tiling one bar, widths already computed as percentages. |
| 44 |
The left segment is the volume range where the other platform costs |
| 45 |
less; either segment can be the full width. #} |
| 46 |
<div class="calc-scale"> |
| 47 |
<div class="calc-bar" role="img" aria-label="{{ outcome.headline }}"> |
| 48 |
<div class="calc-bar-seg calc-bar-seg--other" style="width: {{ outcome.scale.other_pct_width }}%"></div> |
| 49 |
<div class="calc-bar-seg calc-bar-seg--mnw" style="width: {{ outcome.scale.mnw_pct_width }}%"></div> |
| 50 |
<div class="calc-marker" style="left: {{ outcome.scale.marker_pct }}%"></div> |
| 51 |
{% if outcome.scale.has_crossover %} |
| 52 |
<div class="calc-crossover" style="left: {{ outcome.scale.crossover_pct }}%" aria-hidden="true"></div> |
| 53 |
{% endif %} |
| 54 |
</div> |
| 55 |
<div class="calc-axis"> |
| 56 |
<span>0 sales</span> |
| 57 |
{% match outcome.scale.crossover_label %} |
| 58 |
{% when Some with (label) %} |
| 59 |
<span class="calc-axis-crossover">crossover at {{ label }}</span> |
| 60 |
{% when None %} |
| 61 |
{% endmatch %} |
| 62 |
<span>{{ outcome.scale.max_label }}</span> |
| 63 |
</div> |
| 64 |
<div class="calc-legend"> |
| 65 |
<span class="calc-legend-item calc-legend-item--other">the other platform costs less</span> |
| 66 |
<span class="calc-legend-item calc-legend-item--mnw">we cost less</span> |
| 67 |
</div> |
| 68 |
</div> |
| 69 |
|
| 70 |
{% match outcome.crossover_note %} |
| 71 |
{% when Some with (note) %} |
| 72 |
<p class="calc-note">{{ note }}</p> |
| 73 |
{% when None %} |
| 74 |
{% endmatch %} |
| 75 |
|
| 76 |
<p class="pricing-disclaimer">Our side of this uses the payment processor's published US card rates. Yours is whatever you type in, so check it against a real payout rather than a pricing page: some platforms quote their cut before processing and some after.</p> |
| 77 |
<p class="pricing-disclaimer"><strong>Selling small-ticket items?</strong> Payment processors charge a fixed fee per sale (~$0.30) that hits harder on $1-5 items. That is an industry-wide constraint and it applies wherever you sell. Bundling items into collections lets fans buy in groups at a single transaction cost instead of paying per-item processing.</p> |
| 78 |
</div> |
| 79 |
|