paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

banners: Redesign organization upgrade banners.

Browse Source 
This commit redesigns the upgrade and sponsorship banners by adding
AVAILABLE_ON_STANDARD, UPGRADE_ACCESS_BANNER, and
UPGRADE_OR_SPONSORSHIP_BANNER.

Fixes part of #34252.
This commit is contained in:
Maneesh Shukla
2025-07-30 18:50:25 +05:30
committed by Tim Abbott
parent 85d8c225a3
commit a93a015b21
12 changed files with 116 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tools/test-js-with-node
View File

@@ -216,6 +216,7 @@ EXEMPT_FILES = make_set(
"web/src/server_events_state.ts",
"web/src/settings.ts",
"web/src/settings_account.ts",
"web/src/settings_banner.ts",
"web/src/settings_bots.ts",
"web/src/settings_components.ts",
"web/src/settings_emoji.ts",

10
web/src/click_handlers.ts
View File

@@ -980,4 +980,14 @@ export function initialize(): void {
$(".settings-header.mobile .fa-chevron-left").on("click", () => {
settings_panel_menu.mobile_deactivate_section();
});
$(document).on("click", ".request-upgrade", (e) => {
e.preventDefault();
window.open("/upgrade/", "_blank", "noopener,noreferrer");
});
$(document).on("click", ".request-sponsorship", (e) => {
e.preventDefault();
window.open("/sponsorship/", "_blank", "noopener,noreferrer");
});
}

85
web/src/settings_banner.ts Normal file
View File

@@ -0,0 +1,85 @@
import $ from "jquery";
import * as banners from "./banners.ts";
import type {Banner} from "./banners.ts";
import {$t} from "./i18n.ts";
import * as settings_config from "./settings_config.ts";
import * as settings_data from "./settings_data.ts";
import {realm} from "./state_data.ts";
const UPGRADE_ACCESS_BANNER: Banner = {
intent: "info",
label: $t({defaultMessage: "Available on Zulip Cloud Standard."}),
buttons: [
{
label: $t({defaultMessage: "Upgrade to access"}),
custom_classes: "request-upgrade",
attention: "quiet",
},
],
custom_classes: "organization-upgrade-banner",
close_button: false,
};
const AVAILABLE_ON_STANDARD: Banner = {
intent: "neutral",
label: $t({defaultMessage: "Available on Zulip Cloud Standard."}),
buttons: [],
custom_classes: "organization-upgrade-banner",
close_button: false,
};
const UPGRADE_OR_SPONSORSHIP_BANNER: Banner = {
intent: "info",
label: $t({
defaultMessage: "Available on Zulip Cloud Standard.",
}),
buttons: [
{
label: $t({defaultMessage: "Upgrade"}),
custom_classes: "request-upgrade",
attention: "quiet",
},
{
label: $t({defaultMessage: "Request sponsorship"}),
custom_classes: "request-sponsorship",
attention: "borderless",
},
],
custom_classes: "organization-upgrade-banner",
close_button: false,
};
export function set_up_upgrade_banners(): void {
const has_billing_access = settings_data.user_has_billing_access();
const is_business_type_org =
realm.realm_org_type === settings_config.all_org_type_values.business.code;
const $upgrade_banner_containers = $(".upgrade-organization-banner-container");
if ($upgrade_banner_containers.length === 0) {
return;
}
let banner;
if (is_business_type_org) {
banner = has_billing_access ? UPGRADE_ACCESS_BANNER : AVAILABLE_ON_STANDARD;
} else {
banner = has_billing_access ? UPGRADE_OR_SPONSORSHIP_BANNER : AVAILABLE_ON_STANDARD;
}
banners.open(banner, $upgrade_banner_containers);
}
export function set_up_banner($container: JQuery, banner: Banner, url?: string): void {
if ($container.length === 0) {
return;
}
banners.open(banner, $container);
if (url !== undefined) {
$container.on("click", ".banner-external-link", (e) => {
e.preventDefault();
window.open(url, "_blank", "noopener,noreferrer");
});
}
}

2
web/src/settings_org.ts
View File

@@ -25,6 +25,7 @@ import * as pygments_data from "./pygments_data.ts";
import * as realm_icon from "./realm_icon.ts";
import * as realm_logo from "./realm_logo.ts";
import {realm_user_settings_defaults} from "./realm_user_settings_defaults.ts";
import * as settings_banner from "./settings_banner.ts";
import {
type MessageMoveTimeLimitSetting,
type SettingOptionValueWithKey,
@@ -1320,6 +1321,7 @@ export function build_page(): void {
meta.loaded = true;
loading.make_indicator($("#admin_page_auth_methods_loading_indicator"));
settings_banner.set_up_upgrade_banners();
// Initialize all the dropdown list widgets.
init_dropdown_widgets();

2
web/src/stream_ui_updates.ts
View File

@@ -10,6 +10,7 @@ import render_stream_settings_tip from "../templates/stream_settings/stream_sett
import * as hash_parser from "./hash_parser.ts";
import {$t} from "./i18n.ts";
import * as overlays from "./overlays.ts";
import * as settings_banner from "./settings_banner.ts";
import * as settings_components from "./settings_components.ts";
import * as settings_config from "./settings_config.ts";
import * as settings_data from "./settings_data.ts";
@@ -401,6 +402,7 @@ export function enable_or_disable_permission_settings_in_edit_panel(
settings_components.disable_opening_typeahead_on_clicking_label($setting_element);
}
}
settings_banner.set_up_upgrade_banners();
if (!stream_data.user_can_set_topics_policy(sub)) {
$stream_settings.find("#id_topics_policy").prop("disabled", true);

2
web/src/user_group_edit.ts
View File

@@ -44,6 +44,7 @@ import * as people from "./people.ts";
import * as resize from "./resize.ts";
import * as scroll_util from "./scroll_util.ts";
import type {UserGroupUpdateEvent} from "./server_event_types.ts";
import * as settings_banner from "./settings_banner.ts";
import * as settings_components from "./settings_components.ts";
import * as settings_config from "./settings_config.ts";
import * as settings_data from "./settings_data.ts";
@@ -1872,6 +1873,7 @@ export function setup_page(callback: () => void): void {
render_group_info_banner(context),
);
settings_banner.set_up_upgrade_banners();
// Initially as the overlay is build with empty right panel,
// active_group_id is undefined.
user_group_components.reset_active_group_id();

8
web/styles/app_components.css
View File

@@ -547,6 +547,14 @@ input.settings_text_input {
}
}
.create-group-button-container {
.upgrade-organization-banner-container {
display: flex;
justify-content: center;
}
}
.organization-upgrade-banner,
.admin-permissions-banner,
.desktop-setting-notifications {
margin-bottom: 10px;

4
web/templates/settings/organization_permissions_admin.hbs
View File

@@ -67,7 +67,7 @@
</h3>
{{> settings_save_discard_widget section_name="stream-permissions" }}
</div>
<div class="m-10 inline-block organization-permissions-parent">
<div class="m-10 organization-permissions-parent">
{{> group_setting_value_pill_input
setting_name="realm_can_create_public_channel_group"
label=group_setting_labels.can_create_public_channel_group}}
@@ -113,7 +113,7 @@
</h3>
{{> settings_save_discard_widget section_name="group-permissions" }}
</div>
<div class="m-10 inline-block organization-permissions-parent">
<div class="m-10 organization-permissions-parent">
{{> group_setting_value_pill_input
setting_name="realm_can_manage_all_groups"
label=group_setting_labels.can_manage_all_groups}}

2
web/templates/settings/organization_profile_admin.hbs
View File

@@ -61,8 +61,8 @@
<h3>{{t "Organization logo" }}
{{> ../help_link_widget link="/help/create-your-organization-profile#add-a-wide-logo" }}
</h3>
{{> upgrade_tip_widget . }}
</div>
{{> upgrade_tip_widget . }}
<p>{{t "A wide image (200×25 pixels) for the upper left corner of the app." }}</p>
<div class="realm-logo-group">

24
web/templates/settings/upgrade_tip_widget.hbs
View File

@@ -1,29 +1,7 @@
<div>
{{#unless is_guest}}
{{#unless zulip_plan_is_not_limited}}
{{#if is_business_type_org}}
{{#if has_billing_access}}
<a href="/upgrade/" class="upgrade-tip" target="_blank" rel="noopener noreferrer">
{{upgrade_text_for_wide_organization_logo}}
</a>
{{else}}
<div class="upgrade-tip">
{{upgrade_text_for_wide_organization_logo}}
</div>
{{/if}}
{{else}}
<div class="upgrade-or-sponsorship-tip">
{{#if has_billing_access}}
{{#tr}}
Available on Zulip Cloud Standard. <z-link-upgrade>Upgrade</z-link-upgrade> or <z-link-sponsorship>request sponsorship</z-link-sponsorship> to access.
{{#*inline "z-link-upgrade"}}<a href="/upgrade/" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
{{#*inline "z-link-sponsorship"}}<a href="/sponsorship/" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
{{/tr}}
{{else}}
{{t 'Available on Zulip Cloud Standard.'}}
{{/if}}
</div>
{{/if}}
<div class="upgrade-organization-banner-container banner-wrapper"></div>
{{/unless}}
{{/unless}}
</div>

2
web/templates/stream_settings/stream_permissions.hbs
View File

@@ -182,7 +182,7 @@
{{#if (or is_owner is_stream_edit)}}
<div>
<div class="input-group inline-block message-retention-setting-group time-limit-setting">
<div class="input-group message-retention-setting-group time-limit-setting">
<label class="dropdown-title settings-field-label" for="{{prefix}}message_retention_days">{{t "Message retention period" }}
{{> ../help_link_widget link="/help/message-retention-policy" }}
</label>

1
web/tests/settings_org.test.cjs
View File

@@ -16,6 +16,7 @@ mock_esm("../src/loading", {
make_indicator: noop,
destroy_indicator: noop,
});
mock_esm("../src/settings_banner", {set_up_upgrade_banners: noop});
mock_esm("../src/buttons", {
show_button_loading_indicator: noop,
hide_button_loading_indicator: noop,