Skip to content

Commit e26e65e

Browse files
AchoArnoldAchoArnold
committed
Fix the billing usage layout
1 parent 0c40a80 commit e26e65e

3 files changed

Lines changed: 400 additions & 72 deletions

File tree

‎web/app/pages/billing/index.vue‎

Lines changed: 64 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import type {
1515
ResponsesUserSubscriptionPaymentsResponse,
1616
} from "~~/shared/types/api";
1717
import { formatBillingPeriodDateOrdinal } from "~/utils/filters";
18+
import { countries, getStateOptions } from "~/utils/countries";
1819
1920
definePageMeta({
2021
middleware: ["auth"],
@@ -80,6 +81,10 @@ const subscriptionIsCancelled = computed(
8081
() => authStore.user?.subscription_status === "cancelled",
8182
);
8283
84+
const invoiceStateOptions = computed(() =>
85+
getStateOptions(invoiceFormCountry.value),
86+
);
87+
8388
const totalMessages = computed(() => {
8489
if (!billingStore.billingUsage) return 0;
8590
return billingStore.billingUsage.sent_messages + billingStore.billingUsage.received_messages;
@@ -202,16 +207,16 @@ onMounted(async () => {
202207
location="bottom"
203208
/>
204209
</VAppBar>
205-
<VContainer class="mt-16">
210+
<VContainer>
206211
<VRow>
207212
<VCol cols="12" md="9" offset-md="1" xl="8" offset-xl="2">
208213
<!-- Current Plan -->
209-
<h4 class="text-h4 mb-3 mt-3">Current Plan</h4>
214+
<h4 class="text-headline-large mb-3 mt-0">Current Plan</h4>
210215
<VRow v-if="authStore.user">
211-
<VCol md="6" xl="4">
212-
<VAlert type="info" variant="tonal" prominent>
216+
<VCol md="6">
217+
<VAlert type="info" :icon="false" variant="tonal" prominent>
213218
<div>
214-
<h1 class="text-subtitle-1 font-weight-bold text-uppercase mt-3">
219+
<h1 class="text-title-large mt-0 mb-0 font-weight-bold text-uppercase">
215220
<span v-if="isOnFreePlan">{{ plan.name }}</span>
216221
<span v-else-if="subscriptionIsCancelled">
217222
<span class="text-warning">{{ plan.name }}</span> → Free
@@ -220,7 +225,7 @@ onMounted(async () => {
220225
</h1>
221226
<p
222227
v-if="!isOnFreePlan && !isOnLifetimePlan && !subscriptionIsCancelled"
223-
class="text-medium-emphasis"
228+
class="text-medium-emphasis mt-1"
224229
>
225230
Your next bill is for <b>${{ plan.price }}</b> on
226231
<b>{{
@@ -237,11 +242,11 @@ onMounted(async () => {
237242
new Date(authStore.user.subscription_ends_at!).toLocaleDateString()
238243
}}</b>
239244
</p>
240-
<p v-else class="text-medium-emphasis">
245+
<p v-else class="text-medium-emphasis mt-1">
241246
{{ totalMessages }}/{{ plan.messagesPerMonth }} messages
242247
</p>
243248
</div>
244-
<div class="d-flex mb-2 mt-2">
249+
<div class="d-flex mb-1 mt-1">
245250
<VBtn
246251
v-if="!subscriptionIsCancelled && !isOnFreePlan && !isOnLifetimePlan"
247252
color="primary"
@@ -262,6 +267,7 @@ onMounted(async () => {
262267
v-if="!subscriptionIsCancelled && !isOnFreePlan && !isOnLifetimePlan"
263268
v-model="dialog"
264269
max-width="590"
270+
opacity="0.9"
265271
>
266272
<template #activator="{ props: activatorProps }">
267273
<VBtn v-bind="activatorProps" color="error" variant="text">
@@ -270,7 +276,7 @@ onMounted(async () => {
270276
</template>
271277
<VCard>
272278
<VCardText class="pt-4">
273-
<h2 class="text-h5 mb-2">
279+
<h2 class="text-headline-medium mb-2">
274280
Are you sure you want to cancel your subscription?
275281
</h2>
276282
<p>
@@ -307,57 +313,41 @@ onMounted(async () => {
307313

308314
<!-- Upgrade Plan (only for free users) -->
309315
<template v-if="isOnFreePlan">
310-
<h2 class="text-h4 mt-4 mb-2">Upgrade Plan</h2>
316+
<h2 class="text-headline-large mt-4 mb-2">Upgrade Plan</h2>
311317
<VRow>
312-
<VCol cols="12" md="6" xl="4">
313-
<VCard variant="outlined" :href="checkoutURL">
314-
<VCardText>
315-
<VRow align="center">
316-
<VCol class="flex-grow-1">
317-
<h1 class="text-subtitle-1 font-weight-bold text-uppercase mt-3">
318-
Pro - Monthly
319-
</h1>
320-
<p class="text-medium-emphasis">5,000 messages monthly</p>
321-
</VCol>
322-
<VCol class="flex-shrink-1">
323-
<span class="text-h5">$10</span>/month
324-
</VCol>
325-
</VRow>
326-
</VCardText>
327-
</VCard>
328-
</VCol>
329-
<VCol cols="12" md="6" xl="4">
330-
<VCard variant="outlined" :href="checkoutURL">
318+
<VCol cols="12" md="6">
319+
<VCard :href="checkoutURL" link>
331320
<VCardText>
332321
<VRow align="center">
333-
<VCol class="flex-grow-1">
334-
<h1 class="text-subtitle-1 font-weight-bold text-uppercase mt-3">
335-
Pro - Yearly
336-
<VChip size="small" color="primary" class="mt-n1">
337-
2 months free
338-
</VChip>
322+
<VCol class="flex-grow-1 flex-shrink-1">
323+
<h1 class="text-title-large font-weight-bold text-uppercase mt-3">
324+
Pro Plan
339325
</h1>
340-
<p class="text-medium-emphasis">5,000 messages monthly</p>
326+
<p class="text-medium-emphasis">
327+
Send and receive up to 20,000 messages per month
328+
</p>
341329
</VCol>
342-
<VCol class="flex-shrink-1">
343-
<span class="text-h5">$100</span>/year
330+
<VCol class="flex-grow-0 flex-shrink-0">
331+
<span class="text-headline-medium">$10</span>/month
344332
</VCol>
345333
</VRow>
346334
</VCardText>
347335
</VCard>
348336
</VCol>
349-
<VCol cols="12" md="6" xl="4">
350-
<VCard variant="outlined" :href="enterpriseCheckoutURL">
337+
<VCol cols="12" md="6">
338+
<VCard :href="enterpriseCheckoutURL" link>
351339
<VCardText>
352340
<VRow align="center">
353-
<VCol class="flex-grow-1">
354-
<h1 class="text-subtitle-1 font-weight-bold text-uppercase mt-3">
355-
100k - Monthly
341+
<VCol class="flex-grow-1 flex-shrink-1">
342+
<h1 class="text-title-large font-weight-bold text-uppercase mt-3">
343+
Enterprise Plan
356344
</h1>
357-
<p class="text-medium-emphasis">100,000 messages monthly</p>
345+
<p class="text-medium-emphasis">
346+
Send and receive up to 200,000 messages per month
347+
</p>
358348
</VCol>
359-
<VCol class="flex-shrink-1">
360-
<span class="text-h5">$175</span>/month
349+
<VCol class="flex-grow-0 flex-shrink-0">
350+
<span class="text-headline-medium">$89</span>/month
361351
</VCol>
362352
</VRow>
363353
</VCardText>
@@ -367,7 +357,7 @@ onMounted(async () => {
367357
</template>
368358

369359
<!-- Overview -->
370-
<h4 class="text-h4 mb-3 mt-8">Overview</h4>
360+
<h4 class="text-headline-large mb-3 mt-8">Overview</h4>
371361
<p class="text-medium-emphasis">
372362
This is the summary of the sent messages and received messages in
373363
<code
@@ -383,50 +373,37 @@ onMounted(async () => {
383373
/>.
384374
</p>
385375
<VRow v-if="billingStore.billingUsage">
386-
<VCol cols="12" md="4">
376+
<VCol cols="12" md="6">
387377
<VAlert
388378
type="info"
389379
variant="tonal"
390380
:icon="mdiCallMade"
391381
prominent
392382
>
393-
<h2 class="text-h4 font-weight-bold mt-4">
383+
<h2 class="text-headline-large my-0">
394384
{{ formatDecimal(billingStore.billingUsage.sent_messages) }}
395385
</h2>
396386
<p class="text-medium-emphasis mt-n1">Messages Sent</p>
397387
</VAlert>
398388
</VCol>
399-
<VCol cols="12" md="4">
389+
<VCol cols="12" md="6">
400390
<VAlert
401391
type="warning"
402392
variant="tonal"
403393
:icon="mdiCallReceived"
404394
prominent
405395
>
406-
<h2 class="text-h4 font-weight-bold mt-4">
396+
<h2 class="text-headline-large font-weight-bold my-0">
407397
{{ formatDecimal(billingStore.billingUsage.received_messages) }}
408398
</h2>
409399
<p class="text-medium-emphasis mt-n1">Messages Received</p>
410400
</VAlert>
411401
</VCol>
412-
<VCol cols="12" md="4">
413-
<VAlert
414-
type="success"
415-
variant="tonal"
416-
:icon="mdiCreditCard"
417-
prominent
418-
>
419-
<h2 class="text-h4 font-weight-bold mt-4">
420-
{{ formatMoney(billingStore.billingUsage.total_cost) }}
421-
</h2>
422-
<p class="text-medium-emphasis mt-n1">Total Cost</p>
423-
</VAlert>
424-
</VCol>
425402
</VRow>
426403

427404
<!-- Subscription Payments -->
428405
<template v-if="authStore.user?.subscription_id != null">
429-
<h4 class="text-h4 mb-3 mt-8">Subscription Payments</h4>
406+
<h4 class="text-headline-large mb-3 mt-8">Subscription Payments</h4>
430407
<p class="text-medium-emphasis">
431408
This is a list of your last 10 subscription payments made using
432409
our payment provider
@@ -492,14 +469,14 @@ onMounted(async () => {
492469
</template>
493470

494471
<!-- Usage History -->
495-
<h4 class="text-h4 mb-3 mt-8">Usage History</h4>
472+
<h4 class="text-headline-large mb-3 mt-8">Usage History</h4>
496473
<p class="text-medium-emphasis">
497474
Summary of all the sent and received messages in the past 12
498475
billing periods
499476
</p>
500-
<VTable>
477+
<VTable density="comfortable">
501478
<thead>
502-
<tr class="text-uppercase">
479+
<tr class="text-uppercase text-medium-emphasis">
503480
<th class="text-left">Start Date</th>
504481
<th class="text-left">End Date</th>
505482
<th class="text-left">
@@ -534,9 +511,10 @@ onMounted(async () => {
534511
v-model="subscriptionInvoiceDialog"
535512
persistent
536513
max-width="600"
514+
opacity="0.9"
537515
>
538516
<VCard>
539-
<VCardTitle class="text-h4">Generate Invoice</VCardTitle>
517+
<VCardTitle class="text-headline-large">Generate Invoice</VCardTitle>
540518
<VCardSubtitle class="mt-n1">
541519
Create an invoice for your
542520
<b>{{ selectedPayment?.attributes.total_formatted }}</b> payment on
@@ -588,6 +566,7 @@ onMounted(async () => {
588566
</VCol>
589567
<VCol cols="6">
590568
<VTextField
569+
v-if="invoiceStateOptions.length === 0"
591570
v-model="invoiceFormState"
592571
density="compact"
593572
:disabled="loading"
@@ -598,6 +577,19 @@ onMounted(async () => {
598577
persistent-placeholder
599578
variant="outlined"
600579
/>
580+
<VAutocomplete
581+
v-else
582+
v-model="invoiceFormState"
583+
density="compact"
584+
:disabled="loading"
585+
:error="errorMessages.has('state')"
586+
:error-messages="errorMessages.get('state')"
587+
:items="invoiceStateOptions"
588+
label="State"
589+
placeholder="e.g CA"
590+
persistent-placeholder
591+
variant="outlined"
592+
/>
601593
</VCol>
602594
</VRow>
603595
<VRow>
@@ -615,12 +607,13 @@ onMounted(async () => {
615607
/>
616608
</VCol>
617609
<VCol cols="6">
618-
<VTextField
610+
<VAutocomplete
619611
v-model="invoiceFormCountry"
620612
density="compact"
621613
:disabled="loading"
622614
:error="errorMessages.has('country')"
623615
:error-messages="errorMessages.get('country')"
616+
:items="countries"
624617
label="Country"
625618
placeholder="e.g United States"
626619
persistent-placeholder
@@ -652,7 +645,7 @@ onMounted(async () => {
652645
Download Invoice
653646
</VBtn>
654647
<VSpacer />
655-
<VBtn color="error" variant="text" @click="subscriptionInvoiceDialog = false">
648+
<VBtn color="warning" variant="text" @click="subscriptionInvoiceDialog = false">
656649
Close
657650
</VBtn>
658651
</VCardActions>

‎web/app/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -773,7 +773,7 @@ Console.WriteLine(await response.Content.ReadAsStringAsync());</code></pre>
773773
</VCol>
774774
<!-- Pro Plan -->
775775
<VCol cols="12" lg="4">
776-
<VCard elevation="4" color="#121212">
776+
<VCard elevation="4" color="#000000">
777777
<VCardText>
778778
<h1 class="text-center text-display-medium mt-0 mb-4 text-primary">Pro</h1>
779779
<p class="text-body-large text-center mt-0 text-medium-emphasis">

0 commit comments

Comments
 (0)