Skip to content

add projectId parameter to pay analytics components #6245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 13, 2025
Merged

add projectId parameter to pay analytics components #6245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,11 @@ export default async function Page(props: {
notFound();
}

return <PayAnalytics clientId={project.publishableKey} />;
return (
<PayAnalytics
clientId={project.publishableKey}
projectId={project.id}
teamId={project.teamId}
/>
);
}
46 changes: 42 additions & 4 deletions ...c/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/components/webhooks.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,13 @@ type Webhook = {
};

type PayWebhooksPageProps = {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
};

export function PayWebhooksPage(props: PayWebhooksPageProps) {
Expand All @@ -71,7 +77,13 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
method: "GET",
pathname: "/webhooks/get-all",
searchParams: {
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
},
headers: {
"Content-Type": "application/json",
Expand All @@ -95,7 +107,11 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
return (
<div className="flex flex-col items-center gap-8 rounded-lg border border-border p-8 text-center">
<h2 className="font-semibold text-xl">No webhooks configured yet.</h2>
<CreateWebhookButton clientId={props.clientId}>
<CreateWebhookButton
clientId={props.clientId}
projectId={props.projectId}
teamId={props.teamId}
>
<Button variant="primary" className="gap-1">
<PlusIcon className="size-4" />
<span>Create Webhook</span>
Expand All @@ -109,7 +125,11 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
<div>
<div className="flex items-center justify-between">
<h2 className="font-semibold text-xl tracking-tight">Webhooks</h2>
<CreateWebhookButton clientId={props.clientId}>
<CreateWebhookButton
clientId={props.clientId}
projectId={props.projectId}
teamId={props.teamId}
>
<Button size="sm" variant="default" className="gap-1">
<PlusIcon className="size-4" />
<span>Create Webhook</span>
Expand Down Expand Up @@ -149,7 +169,9 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
<TableCell className="text-right">
<DeleteWebhookButton
clientId={props.clientId}
projectId={props.projectId}
webhookId={webhook.id}
teamId={props.teamId}
>
<Button variant="ghost" size="icon">
<TrashIcon className="size-5" strokeWidth={1} />
Expand Down Expand Up @@ -185,7 +207,15 @@ function CreateWebhookButton(props: PropsWithChildren<PayWebhooksPageProps>) {
const res = await payServerProxy({
method: "POST",
pathname: "/webhooks/create",
body: JSON.stringify({ ...values, clientId: props.clientId }),
body: JSON.stringify({
...values,
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
}),
headers: {
"Content-Type": "application/json",
},
Expand Down Expand Up @@ -311,7 +341,15 @@ function DeleteWebhookButton(
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ id, clientId: props.clientId }),
body: JSON.stringify({
id,
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
}),
pathname: "/webhooks/revoke",
});

Expand Down
8 changes: 7 additions & 1 deletion apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,11 @@ export default async function Page(props: {
notFound();
}

return <PayWebhooksPage clientId={project.publishableKey} />;
return (
<PayWebhooksPage
clientId={project.publishableKey}
projectId={project.id}
teamId={project.teamId}
/>
);
}
32 changes: 30 additions & 2 deletions apps/dashboard/src/components/pay/PayAnalytics/PayAnalytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,18 @@ import { Payouts } from "./components/Payouts";
import { TotalPayVolume } from "./components/TotalPayVolume";
import { TotalVolumePieChart } from "./components/TotalVolumePieChart";

export function PayAnalytics(props: { clientId: string }) {
export function PayAnalytics(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
}) {
const clientId = props.clientId;
const projectId = props.projectId;
const teamId = props.teamId;
const [range, setRange] = useState<Range>(() =>
getLastNDaysRange("last-120"),
);
Expand All @@ -34,12 +44,16 @@ export function PayAnalytics(props: { clientId: string }) {
<div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
<TotalVolumePieChart
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
/>
</div>
<TotalPayVolume
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
numberOfDays={numberOfDays}
Expand All @@ -50,6 +64,8 @@ export function PayAnalytics(props: { clientId: string }) {
<CardContainer>
<Payouts
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
numberOfDays={numberOfDays}
Expand All @@ -58,6 +74,8 @@ export function PayAnalytics(props: { clientId: string }) {
<CardContainer>
<PaymentsSuccessRate
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
/>
Expand All @@ -68,20 +86,30 @@ export function PayAnalytics(props: { clientId: string }) {
<div className="border-border border-b pb-6 xl:border-none xl:pb-0">
<PayNewCustomers
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
numberOfDays={numberOfDays}
/>
</div>
<PayCustomersTable
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
/>
</GridWithSeparator>

<CardContainer>
<PaymentHistory clientId={clientId} from={range.from} to={range.to} />
<PaymentHistory
clientId={clientId}
projectId={projectId}
teamId={teamId}
from={range.from}
to={range.to}
/>
</CardContainer>
</div>
</div>
Expand Down
12 changes: 12 additions & 0 deletions apps/dashboard/src/components/pay/PayAnalytics/components/PayCustomersTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,13 @@ function processQuery(
}

export function PayCustomersTable(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
from: Date;
to: Date;
}) {
Expand All @@ -80,7 +86,13 @@ export function PayCustomersTable(props: {
);

const topCustomersQuery = usePayCustomers({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
from: props.from,
to: props.to,
pageSize: 100,
Expand Down
12 changes: 12 additions & 0 deletions apps/dashboard/src/components/pay/PayAnalytics/components/PayNewCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,13 @@ function processQuery(
}

export function PayNewCustomers(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
from: Date;
to: Date;
numberOfDays: number;
Expand All @@ -86,7 +92,13 @@ export function PayNewCustomers(props: {

const uiQuery = processQuery(
usePayNewCustomers({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
from: props.from,
to: props.to,
intervalType,
Expand Down
18 changes: 18 additions & 0 deletions apps/dashboard/src/components/pay/PayAnalytics/components/PaymentHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,26 @@ function processQuery(
}

export function PaymentHistory(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
from: Date;
to: Date;
}) {
const [page, setPage] = useState(1);

const purchasesQuery = usePayPurchases({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
from: props.from,
to: props.to,
start: (page - 1) * pageSize,
Expand All @@ -88,7 +100,13 @@ export function PaymentHistory(props: {
fileName="transaction_history"
getData={async () => {
const purchaseData = await getPayPurchases({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
count: 10000,
from: props.from,
start: 0,
Expand Down
12 changes: 12 additions & 0 deletions apps/dashboard/src/components/pay/PayAnalytics/components/PaymentsSuccessRate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,27 @@ function processQuery(
}

export function PaymentsSuccessRate(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
from: Date;
to: Date;
}) {
const [type, setType] = useState<PayVolumeType>("all");

const uiQuery = processQuery(
usePayVolume({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
from: props.from,
to: props.to,
intervalType: "day",
Expand Down
12 changes: 12 additions & 0 deletions apps/dashboard/src/components/pay/PayAnalytics/components/Payouts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,13 @@ function processQuery(query: ReturnType<typeof usePayVolume>): ProcessedQuery {
}

export function Payouts(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
from: Date;
to: Date;
numberOfDays: number;
Expand All @@ -82,7 +88,13 @@ export function Payouts(props: {

const uiQuery = processQuery(
usePayVolume({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
from: props.from,
to: props.to,
intervalType,
Expand Down
12 changes: 12 additions & 0 deletions apps/dashboard/src/components/pay/PayAnalytics/components/TotalPayVolume.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,13 @@ function processQuery(
}

export function TotalPayVolume(props: {
/**
* @deprecated - remove after migration
*/
clientId: string;
// switching to projectId for lookup, but have to send both during migration
projectId: string;
teamId: string;
from: Date;
to: Date;
numberOfDays: number;
Expand All @@ -71,7 +77,13 @@ export function TotalPayVolume(props: {

const volumeQuery = processQuery(
usePayVolume({
/**
* @deprecated - remove after migration
*/
clientId: props.clientId,
// switching to projectId for lookup, but have to send both during migration
projectId: props.projectId,
teamId: props.teamId,
from: props.from,
intervalType,
to: props.to,
Expand Down
Loading
Loading