feat: Customer Portal v2

[stephenlago99]

Context

This pull request contains the new version of the Customer Portal.

Goals for the new version of the Customer Portal:

• Make it accessible to everyone (goal solved in another PR that was already merged)
• Expose subscription and usage data (UsagePage, UsageSection)
• Expose customer information and edit customer information (Customer information section already existed, so it was only polished and a page with a form was created)
• Expose wallet information and top-up workflow (WalletPage, WalletSection)

It also includes fixes after the first round of QA testing (commits starting with LAGO-).

Description

Since this implementation required a refactoring of the existing CustomerPortal, this couldn't be split in multiple merge requests. There are new components that are used in multiple places, and separating it would have made the development process harder.

New components

Since the old Customer portal was missing some sections, some new components were developed for this:

• Wallet section / Wallet page
• Usage section / Usage page
• Customer information page (for editing the customer information)

To aid code share between them, some helper components were also created:

• PageTitle
• SectionContainer
• SectionError
• SectionLoading
• SectionTitle
• TextButton

The design also facilitated the creation of reusable components, since design bits were re-used between sections and pages.

Refactoring of existing components

SearchInput

A new className param was added to aid tailwind styling.

Subscription usage table / graph

src/components/subscriptions/SubscriptionCurrentUsageTable.tsx

src/components/subscriptions/SubscriptionUsageLifetimeGraph.tsx

Since the Usage part required us to display the usage table / graph, the existing components were refactored and de-coupled from the graphql queries.

New routes

The Customer Portal now includes a way to navigate between pages (in the previous implementation, we didn't have separate pages).

Besides the existing CUSTOMER_PORTAL_ROUTE, some new routes were added:

For general pages:

export const CUSTOMER_PORTAL_ROUTE_PAGE = '/customer-portal/:token/:page'

For pages with items (like the usage section):

export const CUSTOMER_PORTAL_ROUTE_PAGE_ITEMID = '/customer-portal/:token/:page/:itemId'

[ansmonjol]

Thank for handling all our comments! 🙌

[keellyp]

LGTM so far! Huge PR congrats for the work!