Function BannerSubscription

frontend/src/react/components/BannersWrapper.tsx:115–168

()

}

function BannerSubscription() {
  const { t } = useTranslation();
  const { currentPlan, daysBeforeExpire, expireAt, isExpired, isTrialing } =
    useSubscriptionState();

  const content = useMemo(() => {
    if (currentPlan === PlanType.FREE) return "";

    const plan = t(planTitleKey(currentPlan));
    if (isTrialing) {
      return t("banner.trial-expires", {
        days: daysBeforeExpire,
        expireAt,
        plan,
      });
    }
    if (isExpired) {
      return t("banner.license-expired", { expireAt, plan });
    }
    if (daysBeforeExpire <= LICENSE_EXPIRATION_THRESHOLD) {
      return t("banner.license-expires", {
        days: daysBeforeExpire,
        expireAt,
        plan,
      });
    }
    return "";
  }, [currentPlan, daysBeforeExpire, expireAt, isExpired, isTrialing, t]);

  if (!content) return null;

  return (
    <div className="bg-info">
      <div className="mx-auto px-3 py-1">
        <div className="flex flex-wrap items-center justify-center gap-x-2">
          <p className="ml-3 truncate text-base font-medium text-white">
            {content}
          </p>
          <RouterLink
            to={{ name: SETTING_ROUTE_WORKSPACE_SUBSCRIPTION }}
            className="flex cursor-pointer items-center justify-center py-1 text-base font-medium text-white underline hover:opacity-80"
          >
            {t(
              isTrialing
                ? "subscription.purchase.subscribe"
                : "subscription.purchase.update"
            )}
            <ShoppingCart className="ml-1 size-5 text-white" />
          </RouterLink>
        </div>
      </div>
    </div>
  );
}

function BannerAnnouncement() {
  const workspaceProfile = useWorkspaceProfile();