commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.1k Packages Projects Releases Wiki Activity

fix: Billings page reorganised (#28053)

Browse Source 
* billings page reorganised

* Update redirect-apps.generated.ts

* small border update

* udpate for organization billing page

---------

Co-authored-by: Romit <romitgabani1.work@gmail.com>
Co-authored-by: Romit <85230081+romitg2@users.noreply.github.com>
This commit is contained in:
Ram Shukla
2026-02-18 21:50:38 +00:00
committed by GitHub
co-authored by Romit Romit
parent 9bfa4165b9
commit 74f3608b42
3 changed files with 37 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(use-page-wrapper)/settings/(settings-layout)/billing/page.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ const Page = async () => {
<SettingsHeader
title={t("billing")}
description={t("manage_billing_description")}
borderInShellHeader={false}>
borderInShellHeader={true}>
<BillingView />
</SettingsHeader>
);
apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/(org-admin-only)/billing/page.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ const Page = async () => {
<SettingsHeader
title={t("billing")}
description={t("manage_billing_description")}
borderInShellHeader={false}>
borderInShellHeader={true}>
<BillingView />
</SettingsHeader>
);
apps/web/modules/settings/billing/billing-view.tsx
+35 -33
View File
@@ -108,45 +108,47 @@ const BillingView = () => {
return (
<>
<div className="bg-cal-muted border-muted mt-5 rounded-xl border p-1">
<div className="bg-default border-muted flex rounded-[10px] border px-5 py-4">
<div className="flex w-full flex-col gap-1">
<h3 className="text-emphasis text-sm font-semibold leading-none">{t("manage_billing")}</h3>
<p className="text-subtle text-sm font-medium leading-tight">
{t("view_and_manage_billing_details")}
</p>
</div>
<Button color="primary" href={billingHref} target="_blank" size="sm" EndIcon="external-link">
{t("billing_portal")}
</Button>
</div>
{isTrialing && (
<div className="bg-default border-muted mt-1 flex rounded-[10px] border px-5 py-4">
<div className="border-subtle rounded-b-lg border border-t-0 px-4 py-8 sm:px-6">
<div className="bg-cal-muted border-muted rounded-xl border p-1">
<div className="bg-default border-muted flex rounded-[10px] border px-5 py-4">
<div className="flex w-full flex-col gap-1">
<h3 className="text-emphasis text-sm font-semibold leading-none">{t("skip_trial")}</h3>
<p className="text-subtle text-sm font-medium leading-tight">{t("skip_trial_description")}</p>
<h3 className="text-emphasis text-sm font-semibold leading-none">{t("manage_billing")}</h3>
<p className="text-subtle text-sm font-medium leading-tight">
{t("view_and_manage_billing_details")}
</p>
</div>
<Button
color="secondary"
size="sm"
onClick={() => setShowSkipTrialDialog(true)}
loading={isLoadingStatus}>
{t("skip_trial")}
<Button color="primary" href={billingHref} target="_blank" size="sm" EndIcon="external-link">
{t("billing_portal")}
</Button>
</div>
{isTrialing && (
<div className="bg-default border-muted mt-1 flex rounded-[10px] border px-5 py-4">
<div className="flex w-full flex-col gap-1">
<h3 className="text-emphasis text-sm font-semibold leading-none">{t("skip_trial")}</h3>
<p className="text-subtle text-sm font-medium leading-tight">{t("skip_trial_description")}</p>
</div>
<Button
color="secondary"
size="sm"
onClick={() => setShowSkipTrialDialog(true)}
loading={isLoadingStatus}>
{t("skip_trial")}
</Button>
</div>
)}
<div className="flex items-center justify-between px-4 py-5">
<p className="text-subtle text-sm font-medium leading-tight">{t("need_help")}</p>
<Button color="secondary" size="sm" onClick={onContactSupportClick}>
{t("contact_support")}
</Button>
</div>
)}
<div className="flex items-center justify-between px-4 py-5">
<p className="text-subtle text-sm font-medium leading-tight">{t("need_help")}</p>
<Button color="secondary" size="sm" onClick={onContactSupportClick}>
{t("contact_support")}
</Button>
</div>
<BillingCredits />
{teamIdNumber && subscriptionStatus?.billingMode === "ACTIVE_USERS" && (
<ActiveUserBreakdown teamId={teamIdNumber} />
)}
<InvoicesTable />
</div>
<BillingCredits />
{teamIdNumber && subscriptionStatus?.billingMode === "ACTIVE_USERS" && (
<ActiveUserBreakdown teamId={teamIdNumber} />
)}
<InvoicesTable />
<Dialog open={showSkipTrialDialog} onOpenChange={setShowSkipTrialDialog}>
<DialogContent>