+
+ ![]()
+
+
diff --git a/src/components/BottleApp.vue b/src/components/BottleApp.vue
index db3b79f..de6459a 100644
--- a/src/components/BottleApp.vue
+++ b/src/components/BottleApp.vue
@@ -18,6 +18,8 @@ import SendTicketModal from './modals/SendTicketModal.vue';
import TicketModal from './modals/TicketModal.vue';
import AddGuestModal from './modals/AddGuestModal.vue';
import DoorScannerModal from './modals/DoorScannerModal.vue';
+import UpgradeModal from './UpgradeModal.vue';
+import CoOrganisersModal from './modals/CoOrganisersModal.vue';
const store = useStore();
@@ -218,7 +220,15 @@ const tabs = computed(() => {
+
-
+
+
+
+
+
+
diff --git a/src/components/JoinScreen.vue b/src/components/JoinScreen.vue
new file mode 100644
index 0000000..5c9c548
--- /dev/null
+++ b/src/components/JoinScreen.vue
@@ -0,0 +1,342 @@
+
+
+
+
+
+
+
+ Opening your invite…
+
+
+
+ This invite has expired
++ The link is no longer active — the host may have closed the guest list. + Ask them for a fresh one. +
+ What is BottleCount? +
+
+
+
+ Something went wrong
+We couldn't load this invite. Check your connection and refresh.
+
+
+
+ {{ cover?.emoji }}
+
+
+ {{ data.party.name }}
+{{ dateLabel }} · {{ data.party.venue.time }}
+
+
+
+
+
+
+
+
+ You're on the list, {{ data.name }}.
+ See you there.
+
+
+
+
+
+
+ You've said you can't make it.
+ No hard feelings.
+
+
+
+
+
+
+
+
+
+
+
+ + The host is happy for you to invite a friend. Share your own link + and they'll show up as yours. +
+ +
+
{{ error }}
+ +
+
+
+
+
+
+
+
+
+
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 24b9827..56af4cf 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -1,10 +1,12 @@
---
const { active } = Astro.props as { active: string };
+import { APP_URL } from '../lib/links';
const base = import.meta.env.BASE_URL;
const links = [
{ href: base, label: 'Home', key: 'home' },
- { href: `${base}app`, label: 'App', key: 'app' },
+ { href: APP_URL, label: 'App', key: 'app' },
+ { href: `${base}pricing`, label: 'Pricing', key: 'pricing' },
{ href: `${base}docs`, label: 'Docs', key: 'docs' },
];
---
diff --git a/src/components/PartyHeader.vue b/src/components/PartyHeader.vue
index 5af212b..027cbe5 100644
--- a/src/components/PartyHeader.vue
+++ b/src/components/PartyHeader.vue
@@ -14,6 +14,34 @@ const emoji = computed(() => {
const errCount = computed(() => store.menuErrors().length);
+/**
+ * How many people are on this party besides you. Shown on the button so the
+ * fact that a party is shared is visible without opening anything — which
+ * matters when somebody else's edits start appearing under your cursor.
+ */
+const coOrganisers = computed(() =>
+ Math.max(0, store.state.members.length - 1),
+);
+
+/**
+ * Whether there are unsent edits. A shared party that is quietly failing to
+ * save is the worst thing this feature can do silently, so it says so.
+ */
+const syncPending = computed(() => store.state.syncPending);
+const syncFailed = computed(() => store.state.syncError !== null);
+
+const membersTitle = computed(() =>
+ coOrganisers.value > 0
+ ? `${coOrganisers.value + 1} people are running this party`
+ : 'Invite a co-organiser',
+);
+
+const syncLabel = computed(() =>
+ syncFailed.value
+ ? { short: 'Not saved', title: "Couldn't reach the server — still trying" }
+ : { short: 'Saving…', title: 'Saving your changes…' },
+);
+
function onNameInput(e: Event): void {
const val = (e.target as HTMLInputElement).value;
store.update((p) => {
@@ -107,6 +135,57 @@ function onNameInput(e: Event): void {
{{ errCount }} to balance
+
+
+
+
+
+ Opening your invitation…
+
+
+
+ You've been asked to co-organise
++ Co-organising means editing someone's party, so we need to know who you + are. Sign in and you'll come straight back here. +
++ You won't be charged for this — the party belongs to whoever invited + you, and it's already paid for. +
+ +
+
+
+ This invitation has expired
++ The link is no longer active — whoever sent it may have revoked it. Ask + them for a fresh one. +
+
+
+
+ Something went wrong
++ We couldn't open this invitation. Check your connection and refresh. +
+
+
+
+ {{ cover?.emoji }}
+
+
+ {{ preview.partyName }}
+{{ dateLabel }}
+
+
+
+
+
+
+ Open the party
+
+
+
+
+
+ You're a co-organiser.
+ The party is in your list now.
+
+ + {{ preview.invitedBy }} has asked you to help run + this party. +
++ You'll be able to edit the menu, the budget and the guest list, from + your own device. You can't delete the party or remove people — that + stays with {{ preview.invitedBy }}. +
+ + No thanks + +
- Manual lookup
+ Check by code
+
+
+ When the QR won't scan. Both the code and the name have to match.
-
-
-
-
-
-
+
-
- {{ manualResult.invite.name }}
-
-
-
-
- Ticket code (compare with guest's screen)
-
-
+ {{ manualResult.qrCode }}
+ @keyup.enter="verifyManually"
+ />
- No accepted guest matches that name
-
+
+
-
+
-
+
-
-
-
-
-
- RSVP funnel
-
-
-
- Share your invite link — anyone who opens it RSVPs
- with their own name
- and lands in the guest list below. You never type them in.
-
-
-
-
-
-
+
-
-
-
-
+
+
- {{ invites.length }}
+ RSVP funnel
-
-
-
+
-
-
+ Live · {{ lastSyncedLabel }}
+
+
+
+
-
-
-
-
-
+
+
+
+
+
-
-
+
+
+
+
+ Maybe
+ {{ invites.length }}
+
- {{ pending.length }}
+
-
+
+
+ {{ confirmed.length }}
+
-
-
-
-
-
+
+
+
+
+ Declined
+ {{ opened.length }}
+
- {{ declined.length }}
+
+
+
+ {{ declined.length }}
+
-
- Filling {{ capacity }} expected toward a {{ maxCap }} cap — green is
- on target, amber is past expected
-
-
- Against {{ capacity }} capacity — solid is confirmed, faded is still
- maybe
-
-
-
-
-
- {{ accepted.length }}/{{ hasMax ? maxCap : capacity }}
- {{ hasMax ? 'to cap' : '' }}
-
-
- {{ capacity }} expected
-
-
-
-
-
+
-
-
+
+
+
+
-
-
- How far the word spread
-
-
- guests inviting their own friends
-
-
+ :style="{ width: confirmedWithinW, background: 'var(--good)' }"
+ >
+
- {{ spreadFactor }}
-
+ v-if="hasMax"
+ :style="{ width: confirmedOverW, background: 'var(--accent)' }"
+ >
- spread factor
-
+ >
+
+ {{ confirmed.length }}/{{ hasMax ? maxCap : capacity }}
+ {{ hasMax ? 'to cap' : '' }}
+
+
+ {{ capacity }} expected
+
-
+
-
+
- ★
-
-
- 1
-
-
- You
+
-
-
+
-
+ How far the word spread
+
+
+ guests inviting their own friends
+
- the host
+
+
-
+
+
+ {{ spreadFactor }}
+
+
+ spread factor
+
+
-
-
-
+
-
{{ initial(inv.name) }}★
-
-
-
- {{ direct.length }}
-
-
- Direct invites
-
-
- invited by you
+
+
+ 1
+
+
+ You
+
+
+ the host
+
+
-
-
- {{ initial(inv.name) }}
-
+
+
+
+
+ {{ initial(inv.name) }}
+
+
+
+ {{ direct.length }}
+
+
+ Direct invites
+
+
+ invited by you
+
- {{ viral.length }}
-
-
- Friends-of-friends
-
-
- forwarded by guests
+
+
+ {{ initial(inv.name) }}
+
+
+
+ {{ viral.length }}
+
+
+ Friends-of-friends
+
+
+ forwarded by guests
+
- With
- "let guests invite friends"
+
-
- on, your guests can forward the invite to their own friends — anyone
- they bring lands in this tier.
+ With
+ "let guests invite friends"
+ on, your guests can forward the invite to their own friends — anyone
+ they bring lands in this tier.
+
store.state.device === 'phone');
Checked in
- {{ checkedIn }}/{{ accepted.length }}
+ {{ checkedIn }}/{{ confirmed.length }}
store.state.device === 'phone');
:style="{
background: avatarColor(inv.id),
opacity:
- inv.status === 'accepted'
+ inv.status === 'confirmed'
? '1'
- : inv.status === 'pending'
+ : inv.status === 'opened'
? '0.7'
: '0.45',
}"
@@ -896,7 +1001,7 @@ const isPhone = computed(() => store.state.device === 'phone');
-
-
+
+
-
-
+
+