Update user billing flow and improve error handling

Updated the user billing process to add a return to home function and redirect users to their specific account page after payment. Enhanced error handling in the billing event handler to handle scenarios where no account id is found in the subscription. Removed unused billing page object from the stripe page object.
This commit is contained in:
giancarlo
2024-04-14 18:25:33 +08:00
parent 0824ac8e9f
commit 7dcd688ca9
6 changed files with 29 additions and 7 deletions

View File

@@ -20,8 +20,11 @@ test.describe('User Billing', () => {
await po.billing.stripe.submitForm();
await expect(po.billing.successStatus()).toBeVisible();
await po.billing.returnToHome();
await page.goto('/home/billing');
await page.locator('a', {
hasText: 'Billing',
}).click();
await expect(await po.billing.getStatus()).toContainText('active');
await expect(po.billing.manageBillingButton()).toBeVisible();

View File

@@ -29,6 +29,7 @@ export class BillingPageObject {
}
async returnToHome() {
await this.page.waitForTimeout(500);
await this.successStatus().locator('button').click();
}

View File

@@ -1,13 +1,10 @@
import { Page, expect } from '@playwright/test';
import { BillingPageObject } from './billing.po';
export class StripePageObject {
private readonly page: Page;
public readonly billing: BillingPageObject;
constructor(page: Page) {
this.page = page;
this.billing = new BillingPageObject(page);
}
getStripeCheckoutIframe() {

View File

@@ -14,6 +14,10 @@ interface SessionPageProps {
searchParams: {
session_id: string;
};
params: {
account: string;
};
}
const LazyEmbeddedCheckout = dynamic(
@@ -27,7 +31,10 @@ const LazyEmbeddedCheckout = dynamic(
},
);
async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
async function ReturnCheckoutSessionPage({
searchParams,
params,
}: SessionPageProps) {
const sessionId = searchParams.session_id;
if (!sessionId) {
@@ -45,12 +52,17 @@ async function ReturnCheckoutSessionPage({ searchParams }: SessionPageProps) {
);
}
const redirectPath = pathsConfig.app.accountHome.replace(
'[account]',
params.account,
);
return (
<>
<div className={'fixed left-0 top-48 z-50 mx-auto w-full'}>
<BillingSessionStatus
customerEmail={customerEmail ?? ''}
redirectPath={pathsConfig.app.home}
redirectPath={redirectPath}
/>
</div>