graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make billing integration exclusivity more obvious

Browse source 
Add 'Choose one' badge with indigo border to billing category,
clarify that only one billing platform can be active at a time.
This commit is contained in:
Graham McIntire 2026-02-16 08:22:39 -06:00
parent 7e819d62cf
commit 91946946a6
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
lib/towerops_web/live/org/integrations_live.html.heex
View file

@ -36,7 +36,16 @@
Enum.find(category.providers, fn p ->
@integrations[p.id] && @integrations[p.id].enabled
end) %>
<div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-white/10 dark:bg-white/5">
<div class="rounded-lg border-2 border-indigo-200 bg-white p-6 dark:border-indigo-800/50 dark:bg-white/5">
<div class="mb-4 flex items-center gap-2">
<span class="inline-flex items-center gap-1 rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300">
<.icon name="hero-arrow-path" class="h-3.5 w-3.5" />
Choose one
</span>
<span class="text-xs text-gray-500 dark:text-gray-400">
— only one billing platform can be active at a time
</span>
</div>
<%= if active_billing do %>
<%!-- Active billing provider --%>
<% integration = @integrations[active_billing.id] %>
@ -154,8 +163,8 @@
</div>
<% else %>
<%!-- No active billing — show provider picker --%>
<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">
{t("Select your billing platform to get started:")}
<p class="mb-4 text-sm text-gray-600 dark:text-gray-300 font-medium">
{t("Which billing platform does your organization use?")}
</p>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
<button