Skip to content

[front] - enh(StatusBanner): prettify component #11458

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
Mar 19, 2025
Merged

[front] - enh(StatusBanner): prettify component #11458

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
176 changes: 99 additions & 77 deletions front/components/navigation/NavigationSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {
classNames,
cn,
CollapseButton,
NavigationList,
NavigationListItem,
Expand Down Expand Up @@ -166,6 +167,46 @@ export const NavigationSidebar = React.forwardRef<
);
});

interface StatusBannerProps {
variant?: "info" | "warning";
title: string;
description: React.ReactNode;
footer?: React.ReactNode;
}

function StatusBanner({
variant = "info",
title,
description,
footer,
}: StatusBannerProps) {
const colorClasses = {
info: cn(
"border-info-200 dark:border-info-200-night",
"bg-info-100 dark:bg-info-100-night",
"text-info-900 dark:text-info-900-night"
),
warning: cn(
"border-warning-200 dark:border-warning-200-night",
"bg-warning-100 dark:bg-warning-100-night",
"text-warning-900 dark:text-warning-900-night"
),
};

return (
<div
className={cn(
"space-y-2 border-y px-3 py-3 text-xs",
colorClasses[variant]
)}
>
<div className="font-bold">{title}</div>
<div className="font-normal">{description}</div>
{footer && <div>{footer}</div>}
</div>
);
}

function AppStatusBanner() {
const { appStatus } = useAppStatus();

Expand All @@ -177,39 +218,28 @@ function AppStatusBanner() {

if (dustStatus) {
return (
<div
className={classNames(
"space-y-2 border-y px-3 py-3 text-xs",
"border-pink-200 dark:border-pink-200-night",
"bg-pink-100 dark:bg-pink-100-night",
"text-pink-900 dark:text-pink-900-night"
)}
>
<div className="font-bold">{dustStatus.name}</div>
<div className="font-normal">{dustStatus.description}</div>
<div>
Check our{" "}
<Link href={dustStatus.link} target="_blank" className="underline">
status page
</Link>{" "}
for updates.
</div>
</div>
<StatusBanner
title={dustStatus.name}
description={dustStatus.description}
footer={
<>
Check our{" "}
<Link href={dustStatus.link} target="_blank" className="underline">
status page
</Link>{" "}
for updates.
</>
}
/>
);
}

if (providersStatus) {
return (
<div
className={classNames(
"space-y-2 border-y px-3 py-3 text-xs",
"border-pink-200 dark:border-pink-200-night",
"bg-pink-100 dark:bg-pink-100-night",
"text-pink-900 dark:text-pink-900-night"
)}
>
<div className="font-bold">{providersStatus.name}</div>
<div className="font-normal">{providersStatus.description}</div>
</div>
<StatusBanner
title={providersStatus.name}
description={providersStatus.description}
/>
);
}

Expand All @@ -224,59 +254,51 @@ function SubscriptionEndBanner({ endDate }: { endDate: number }) {
});

return (
<div
className={classNames(
"border-y px-3 py-3 text-xs",
"border-pink-200 dark:border-pink-200-night",
"bg-pink-100 dark:bg-pink-100-night",
"text-pink-900 dark:text-pink-900-night"
)}
>
<div className="font-bold">Subscription ending on {formattedEndDate}</div>
<div className="font-normal">
Connections will be deleted and members will be revoked. Details{" "}
<Link
href="https://docs.dust.tt/docs/subscriptions#what-happens-when-we-cancel-our-dust-subscription"
target="_blank"
className="underline"
>
here
</Link>
.
</div>
</div>
<StatusBanner
variant="warning"
title={`Subscription ending on ${formattedEndDate}`}
description={
<>
Connections will be deleted and members will be revoked. Details{" "}
<Link
href="https://docs.dust.tt/docs/subscriptions#what-happens-when-we-cancel-our-dust-subscription"
target="_blank"
className="underline"
>
here
</Link>
.
</>
}
/>
);
}

function SubscriptionPastDueBanner() {
return (
<div
className={classNames(
"border-y px-3 py-3 text-xs",
"border-warning-200 dark:border-warning-200-night",
"bg-warning-100 dark:bg-warning-100-night",
"text-warning-900 dark:text-warning-900-night"
)}
>
<div className="font-bold">Your payment has failed!</div>
<div className="font-normal">
<br />
Please make sure to update your payment method in the Admin section to
maintain access to your workspace. We will retry in a few days.
<br />
<br />
After 3 attempts, your workspace will be downgraded to the free plan.
Connections will be deleted and members will be revoked. Details{" "}
<Link
href="https://docs.dust.tt/docs/subscriptions#what-happens-when-we-cancel-our-dust-subscription"
target="_blank"
className="underline"
>
here
</Link>
.
</div>
</div>
<StatusBanner
variant="warning"
title="Your payment has failed!"
description={
<>
<br />
Please make sure to update your payment method in the Admin section to
maintain access to your workspace. We will retry in a few days.
<br />
<br />
After 3 attempts, your workspace will be downgraded to the free plan.
Connections will be deleted and members will be revoked. Details{" "}
<Link
href="https://docs.dust.tt/docs/subscriptions#what-happens-when-we-cancel-our-dust-subscription"
target="_blank"
className="underline"
>
here
</Link>
.
</>
}
/>
);
}

Expand Down