From 36f1055314846e8049063b33ef6c1f5db6711ced Mon Sep 17 00:00:00 2001
From: Darcy Ye <darcyye@silverhand.io>
Date: Fri, 16 Aug 2024 15:10:46 +0800
Subject: [PATCH] chore(console): add display pricing change notice and update
 plan comparison table (#6456)

* chore: add pricing change notice

* chore: update plan comparison table
---
 packages/console/src/consts/subscriptions.ts  |  1 +
 .../console/src/hooks/use-user-preferences.ts |  1 +
 .../AddOnUsageChangesNotification/index.tsx   | 50 +++++++++++++++++++
 .../Subscription/CurrentPlan/index.tsx        |  2 +
 .../PlanComparisonTable/index.tsx             | 29 +++++++++--
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts | 12 ++++-
 .../admin-console/subscription/usage.ts       |  4 ++
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 .../admin-console/subscription/quota-table.ts |  3 +-
 21 files changed, 122 insertions(+), 19 deletions(-)
 create mode 100644 packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/AddOnUsageChangesNotification/index.tsx

diff --git a/packages/console/src/consts/subscriptions.ts b/packages/console/src/consts/subscriptions.ts
index 5062e3363..3ef8e2ac8 100644
--- a/packages/console/src/consts/subscriptions.ts
+++ b/packages/console/src/consts/subscriptions.ts
@@ -12,6 +12,7 @@ export const proPlanAuditLogsRetentionDays = 14;
 
 // TODO: currently we do not provide a good way to retrieve add-on items unit price in console, we hence manually defined the unit price here, will implement the API soon.
 /* === Add-on unit price (in USD) === */
+export const proPlanBasePrice = 16;
 export const resourceAddOnUnitPrice = 4;
 export const machineToMachineAddOnUnitPrice = 8;
 export const tenantMembersAddOnUnitPrice = 8;
diff --git a/packages/console/src/hooks/use-user-preferences.ts b/packages/console/src/hooks/use-user-preferences.ts
index 25218a165..f9f1e0d25 100644
--- a/packages/console/src/hooks/use-user-preferences.ts
+++ b/packages/console/src/hooks/use-user-preferences.ts
@@ -26,6 +26,7 @@ const userPreferencesGuard = z.object({
   organizationUpsellNoticeAcknowledged: z.boolean().optional(),
   tenantMembersUpsellNoticeAcknowledged: z.boolean().optional(),
   enterpriseSsoUpsellNoticeAcknowledged: z.boolean().optional(),
+  addOnChangesInCurrentCycleNoticeAcknowledged: z.boolean().optional(),
   /* === Add on feature related fields === */
 });
 
diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/AddOnUsageChangesNotification/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/AddOnUsageChangesNotification/index.tsx
new file mode 100644
index 000000000..b19ce20f8
--- /dev/null
+++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/AddOnUsageChangesNotification/index.tsx
@@ -0,0 +1,50 @@
+import { ReservedPlanId } from '@logto/schemas';
+import { useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { proPlanBasePrice } from '@/consts/subscriptions';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
+import InlineNotification from '@/ds-components/InlineNotification';
+import TextLink from '@/ds-components/TextLink';
+import useUserPreferences from '@/hooks/use-user-preferences';
+
+type Props = {
+  readonly className?: string;
+};
+
+function AddOnUsageChangesNotification({ className }: Props) {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const {
+    currentSubscription: { planId },
+  } = useContext(SubscriptionDataContext);
+  const {
+    data: { addOnChangesInCurrentCycleNoticeAcknowledged },
+    update,
+  } = useUserPreferences();
+
+  if (planId !== ReservedPlanId.Pro || addOnChangesInCurrentCycleNoticeAcknowledged) {
+    return null;
+  }
+
+  return (
+    <InlineNotification
+      action="general.got_it"
+      className={className}
+      onClick={() => {
+        void update({ addOnChangesInCurrentCycleNoticeAcknowledged: true });
+      }}
+    >
+      <Trans
+        components={{
+          a: <TextLink to="https://blog.logto.io/pricing-add-ons/" />,
+        }}
+      >
+        {t('subscription.usage.pricing.add_on_changes_in_current_cycle_notice', {
+          price: proPlanBasePrice,
+        })}
+      </Trans>
+    </InlineNotification>
+  );
+}
+
+export default AddOnUsageChangesNotification;
diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
index aa590afaf..f6270cf38 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
@@ -15,6 +15,7 @@ import FormField from '@/ds-components/FormField';
 import { type SubscriptionPlan } from '@/types/subscriptions';
 import { hasSurpassedQuotaLimit, hasSurpassedSubscriptionQuotaLimit } from '@/utils/quota';
 
+import AddOnUsageChangesNotification from './AddOnUsageChangesNotification';
 import MauLimitExceedNotification from './MauLimitExceededNotification';
 import PaymentOverdueNotification from './PaymentOverdueNotification';
 import styles from './index.module.scss';
@@ -94,6 +95,7 @@ function CurrentPlan({ subscription, subscriptionPlan, periodicUsage: rawPeriodi
       <FormField title="subscription.next_bill">
         <BillInfo cost={upcomingCost} isManagePaymentVisible={Boolean(upcomingCost)} />
       </FormField>
+      <AddOnUsageChangesNotification className={styles.notification} />
       <MauLimitExceedNotification
         currentPlan={subscriptionPlan}
         periodicUsage={rawPeriodicUsage}
diff --git a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx
index 125ad50c5..374bf79fa 100644
--- a/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx
+++ b/packages/console/src/pages/TenantSettings/Subscription/PlanComparisonTable/index.tsx
@@ -126,11 +126,20 @@ function PlanComparisonTable() {
     const tenantMembersLimit = t('included', { value: 3 });
     const tenantMembersPrice = t('per_member', { value: 8 });
 
-    // Compliance and support
+    // Support
     const community = t('support.community');
     const emailTicketSupport = t('support.email_ticket_support');
-    const soc2Report = t('support.soc2_report');
-    const hipaaOrBaaReport = t('support.hipaa_or_baa_report');
+    const discordPrivateChannel = t('support.discord_private_channel');
+    const premiumSupport = t('support.premium_support');
+    const developerOnboarding = t('support.developer_onboarding');
+    const solutionEngineerSupport = t('support.solution_engineer_support');
+    const sla = t('support.sla');
+    const dedicatedComputingResources = t('support.dedicated_computing_resources');
+
+    // Compliance
+    const soc2Compliant = t('compliance.soc2_compliant');
+    const soc2Report = t('compliance.soc2_report');
+    const hipaaOrBaaReport = t('compliance.hipaa_or_baa_report');
 
     return [
       {
@@ -234,8 +243,20 @@ function PlanComparisonTable() {
         rows: [
           { name: community, data: ['✓', '✓', '✓'] },
           { name: emailTicketSupport, data: ['-', '✓ (48h)', contact] },
+          { name: discordPrivateChannel, data: ['-', '✓', '✓'] },
+          { name: premiumSupport, data: ['-', '-', '✓'] },
+          { name: developerOnboarding, data: ['-', '-', '✓'] },
+          { name: solutionEngineerSupport, data: ['-', '-', '✓'] },
+          { name: sla, data: ['-', '-', '✓'] },
+          { name: dedicatedComputingResources, data: ['-', '-', '✓'] },
+        ],
+      },
+      {
+        title: 'compliance.title',
+        rows: [
+          { name: soc2Compliant, data: ['✓', '✓', '✓'] },
           { name: soc2Report, data: ['-', '✓', '✓'] },
-          { name: hipaaOrBaaReport, data: ['-', '-', comingSoon] },
+          { name: hipaaOrBaaReport, data: ['-', '-', '✓'] },
         ],
       },
     ];
diff --git a/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts
index d96ba0179..b12a638d9 100644
--- a/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/de/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Bedarfsgesteuerte Bereitstellung',
   },
   support: {
-    title: 'Compliance und Support',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Gemeinschaft',
     customer_ticket: 'Support-Ticket',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts
index 28c82a571..c35303e4b 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/subscription/quota-table.ts
@@ -59,11 +59,21 @@ const quota_table = {
     just_in_time_provisioning: 'Just-in-time provisioning',
   },
   support: {
-    title: 'Compliance and support',
+    title: 'Support',
     community: 'Community',
     customer_ticket: 'Ticket support',
     premium: 'Premium',
     email_ticket_support: 'Email ticket support',
+    discord_private_channel: 'Discord private channel',
+    premium_support: 'Premium support',
+    developer_onboarding: 'Developer onboarding',
+    solution_engineer_support: 'Solution engineer',
+    sla: 'SLA',
+    dedicated_computing_resources: 'Dedicated computing resources',
+  },
+  compliance: {
+    title: 'Compliance',
+    soc2_compliant: 'SOC2 compliant',
     soc2_report: 'SOC2 report',
     hipaa_or_baa_report: 'HIPAA/BAA report',
   },
diff --git a/packages/phrases/src/locales/en/translation/admin-console/subscription/usage.ts b/packages/phrases/src/locales/en/translation/admin-console/subscription/usage.ts
index d1f5a3f11..42ae261b3 100644
--- a/packages/phrases/src/locales/en/translation/admin-console/subscription/usage.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/subscription/usage.ts
@@ -54,6 +54,10 @@ const usage = {
     tooltip:
       'Add-on feature priced at ${{price, number}} per hook. The first 10 hooks are included.',
   },
+  pricing: {
+    add_on_changes_in_current_cycle_notice:
+      'If you make any changes during the current billing cycle, your next bill may be slightly higher for the first month after the change. It will be ${{price, number}} base price plus add-on costs for unbilled usage from the current cycle and the full charge for the next cycle. <a>Learn more</a>',
+  },
 };
 
 export default Object.freeze(usage);
diff --git a/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts
index 815fa1f62..02152c792 100644
--- a/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/es/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Provisión justo a tiempo',
   },
   support: {
-    title: 'Cumplimiento y soporte',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Comunidad',
     customer_ticket: 'Ticket de soporte',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts
index 02b9376ec..2899d36df 100644
--- a/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Fourniture juste-à-temps',
   },
   support: {
-    title: 'Conformité et support',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Communauté',
     customer_ticket: 'Ticket de support',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts
index 3d3a0420a..40b43bf5d 100644
--- a/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/it/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Provisioning just-in-time',
   },
   support: {
-    title: 'Conformità e supporto',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Community',
     customer_ticket: 'Ticket di assistenza',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts
index b0281fd05..36fe7cff7 100644
--- a/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/ja/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'ジャストインタイムプロビジョニング',
   },
   support: {
-    title: 'コンプライアンスとサポート',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'コミュニティ',
     customer_ticket: 'カスタマーチケット',
     premium: 'プレミアム',
diff --git a/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts
index c5b4bb015..3e2bb7599 100644
--- a/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/ko/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: '적시 프로비저닝',
   },
   support: {
-    title: '컴플라이언스 및 지원',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: '커뮤니티',
     customer_ticket: '지원 티켓',
     premium: '프리미엄',
diff --git a/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts
index 899f70a38..8e30a53e3 100644
--- a/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Provisioning w trybie just-in-time',
   },
   support: {
-    title: 'Zgodność i wsparcie',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Społeczność',
     customer_ticket: 'Zgłoszenie wsparcia',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts
index 229168081..bea21a79d 100644
--- a/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/pt-br/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Provisionamento just-in-time',
   },
   support: {
-    title: 'Conformidade e suporte',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Comunidade',
     customer_ticket: 'Ticket de suporte',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts
index e1d3d1a4e..cec37a7ae 100644
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Provisionamento just-in-time',
   },
   support: {
-    title: 'Conformidade e suporte',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Comunidade',
     customer_ticket: 'Bilhete de suporte',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts
index 69308c7ea..79de6948d 100644
--- a/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/ru/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'Пакетная настройка по запросу',
   },
   support: {
-    title: 'Соблюдение и поддержка',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Сообщество',
     customer_ticket: 'Техническая поддержка',
     premium: 'Премиум',
diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts
index e2b0afd1c..4abadc328 100644
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: 'İstisnai olana kadar temin',
   },
   support: {
-    title: 'Uyumluluk ve destek',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: 'Topluluk',
     customer_ticket: 'Müşteri destek bileti',
     premium: 'Premium',
diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts
index 02ef12ed2..7e053b759 100644
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: '即时配置',
   },
   support: {
-    title: '合规与支持',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: '社区',
     customer_ticket: '客户支持票据',
     premium: '高级版',
diff --git a/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts
index f6bb143b9..f56160baf 100644
--- a/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: '即時規定',
   },
   support: {
-    title: '合規和支援',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: '社群',
     customer_ticket: '客戶支援票據',
     premium: '高級版',
diff --git a/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts b/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts
index c818d864d..17da36054 100644
--- a/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts
+++ b/packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/quota-table.ts
@@ -59,7 +59,8 @@ const quota_table = {
     just_in_time_provisioning: '即時供應管理',
   },
   support: {
-    title: '合規性與支援',
+    /** UNTRANSLATED */
+    title: 'Support',
     community: '社群',
     customer_ticket: '客戶支援票證',
     premium: '進階版',