refactor(console): add next bill tip for tax info (#5246)

packages/console/src/components/BillInfo/index.module.scss

@@ -17,6 +17,8 @@
 
 .price {
   font: var(--font-title-2);
+  display: flex;
+  align-items: center;
 }
 
 .description {

packages/console/src/components/BillInfo/index.tsx

@@ -1,10 +1,14 @@
 import { useContext, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
+import Tip from '@/assets/icons/tip.svg';
 import { newPlansBlogLink } from '@/consts';
 import { TenantsContext } from '@/contexts/TenantsProvider';
 import Button from '@/ds-components/Button';
+import DynamicT from '@/ds-components/DynamicT';
+import IconButton from '@/ds-components/IconButton';
 import TextLink from '@/ds-components/TextLink';
+import { ToggleTip } from '@/ds-components/Tip';
 import useSubscribe from '@/hooks/use-subscribe';
 
 import * as styles from './index.module.scss';
@@ -24,7 +28,16 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
   return (
     <div className={styles.container}>
       <div className={styles.billInfo}>
-        <div className={styles.price}>{`$${(cost / 100).toLocaleString()}`}</div>
+        <div className={styles.price}>
+          <span>{`$${(cost / 100).toLocaleString()}`}</span>
+          {cost > 0 && (
+            <ToggleTip content={<DynamicT forKey="subscription.next_bill_tip" />}>
+              <IconButton size="small">
+                <Tip />
+              </IconButton>
+            </ToggleTip>
+          )}
+        </div>
         <div className={styles.description}>
           <Trans
             components={{

packages/phrases/src/locales/de/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: 'Plan-Zyklus: {{period}}. Die Nutzung wird am {{renewDate}} erneuert.',
   next_bill: 'Ihre nächste Rechnung',
   next_bill_hint: 'Weitere Informationen zur Berechnung finden Sie in diesem <a>Artikel</a>.',
+  next_bill_tip:
+    'Die hier angezeigten Preise verstehen sich exklusive Steuern. Die Steuer wird auf Grundlage der von Ihnen bereitgestellten Informationen und Ihrer lokalen gesetzlichen Anforderungen berechnet und in Ihren Rechnungen ausgewiesen.',
   manage_payment: 'Zahlung verwalten',
   overfill_quota_warning:
     'Sie haben Ihr Quotenlimit erreicht. Um Probleme zu vermeiden, upgraden Sie den Plan.',

packages/phrases/src/locales/en/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: 'Plan cycle: {{period}}. Usage renews on {{renewDate}}.',
   next_bill: 'Your next bill',
   next_bill_hint: 'To learn more about the calculation, please refer to this <a>article</a>.',
+  next_bill_tip:
+    'The prices displayed here are tax-exclusive. The tax amount will be calculated based on the information you provide and your local regulatory requirements, and will be shown in your invoices.',
   manage_payment: 'Manage Payment',
   overfill_quota_warning:
     'You have reached your quota limit. To prevent any issues, upgrade the plan.',

packages/phrases/src/locales/es/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: 'Ciclo del plan: {{period}}. La renovación del uso se realiza en {{renewDate}}.',
   next_bill: 'Su próxima factura',
   next_bill_hint: 'Para obtener más información sobre el cálculo, consulte este <a>artículo</a>.',
+  next_bill_tip:
+    'Los precios mostrados aquí no incluyen impuestos. El monto de impuestos se calculará según la información que proporcione y los requisitos regulatorios locales, y se mostrará en sus facturas.',
   manage_payment: 'Gestionar el pago',
   overfill_quota_warning:
     'Ha alcanzado el límite de su cuota. Para evitar problemas, actualice el plan.',

packages/phrases/src/locales/fr/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: "Cycle du plan: {{period}}. L'utilisation est renouvelée le {{renewDate}}.",
   next_bill: 'Votre prochaine facture',
   next_bill_hint: 'Pour en savoir plus sur le calcul, veuillez vous référer à cet <a>article</a>.',
+  next_bill_tip:
+    "Les prix affichés ici n'incluent pas les taxes. Le montant des taxes sera calculé en fonction des informations que vous fournissez et des exigences réglementaires locales, et sera indiqué sur vos factures.",
   manage_payment: 'Gérer le Paiement',
   overfill_quota_warning:
     'Vous avez atteint votre limite de quota. Pour éviter tout problème, passez à un plan supérieur.',

packages/phrases/src/locales/it/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: "Ciclo del piano: {{period}}. L'utilizzo si rinnova il {{renewDate}}.",
   next_bill: 'La tua prossima fattura',
   next_bill_hint: 'Per saperne di più sul calcolo, consulta questo <a>articolo</a>.',
+  next_bill_tip:
+    "I prezzi visualizzati qui sono esclusi di tasse. L'importo delle tasse sarà calcolato in base alle informazioni che fornite e ai requisiti normativi locali, e verrà mostrato nelle vostre fatture.",
   manage_payment: 'Gestisci pagamento',
   overfill_quota_warning:
     "Hai raggiunto il limite del tuo contingente. Per evitare eventuali problemi, esegui l'upgrade del piano.",

packages/phrases/src/locales/ja/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: 'プランサイクル: {{period}}。更新日: {{renewDate}}。',
   next_bill: '次の請求書',
   next_bill_hint: '計算方法については、次の<a>記事</a>を参照してください。',
+  next_bill_tip:
+    'ここに表示されている価格には税金が含まれていません。税金は、提供された情報と地元の規制要件に基づいて計算され、請求書に表示されます。',
   manage_payment: '支払い方法の管理',
   overfill_quota_warning:
     'クォータ制限に到達しました。問題を防ぐために、プランをアップグレードしてください。',

packages/phrases/src/locales/ko/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: 'Plan cycle: {{period}}. 사용량은 {{renewDate}}에 갱신됩니다.',
   next_bill: '다음 청구서',
   next_bill_hint: '계산에 대해 자세히 알아보려면 이 <a>게시물</a>을 참조하세요.',
+  next_bill_tip:
+    '여기에 표시된 가격은 세금이 포함되어 있지 않습니다. 세금은 제공하는 정보와 지역 규정 요건을 기반으로 계산되어 청구서에 표시됩니다.',
   manage_payment: '결제 관리',
   overfill_quota_warning:
     '할당량 한도에 도달했습니다. 문제를 방지하기 위해 요금제를 업그레이드하세요.',

packages/phrases/src/locales/pl-pl/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: 'Cykl planu: {{period}}. Użycie odnawiane w dniu {{renewDate}}.',
   next_bill: 'Twoje następne rozliczenie',
   next_bill_hint: 'Aby dowiedzieć się więcej o obliczeniach, zapoznaj się z tym <a>artykułem</a>.',
+  next_bill_tip:
+    'Tutaj wyświetlane ceny nie obejmują podatków. Kwota podatku będzie obliczana na podstawie dostarczonych przez Ciebie informacji oraz lokalnych wymagań regulacyjnych i będzie widoczna na Twoich fakturach.',
   manage_payment: 'Zarządzanie płatnościami',
   overfill_quota_warning:
     'Osiągnąłeś limit swojej puli. Aby uniknąć problemów, zaktualizuj swój plan.',

packages/phrases/src/locales/pt-br/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: 'Ciclo do plano: {{period}}. O uso é renovado em {{renewDate}}.',
   next_bill: 'Sua próxima fatura',
   next_bill_hint: 'Para saber mais sobre o cálculo, consulte este <a>artigo</a>.',
+  next_bill_tip:
+    'Os preços exibidos aqui não incluem impostos. O valor do imposto será calculado com base nas informações que você fornecer e nos requisitos regulatórios locais, e será mostrado nas suas faturas.',
   manage_payment: 'Gerenciar pagamento',
   overfill_quota_warning:
     'Você atingiu o limite de cota. Para evitar problemas, faça upgrade do plano.',

packages/phrases/src/locales/pt-pt/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: 'Ciclo do plano: {{period}}. O uso é renovado em {{renewDate}}.',
   next_bill: 'Sua próxima fatura',
   next_bill_hint: 'Para saber mais sobre o cálculo, consulte este <a>artigo</a>.',
+  next_bill_tip:
+    'Os preços exibidos aqui não incluem impostos. O valor do imposto será calculado com base nas informações que você fornecer e nos requisitos regulatórios locais, e será mostrado nas suas faturas.',
   manage_payment: 'Gerenciar pagamento',
   overfill_quota_warning:
     'Você atingiu o limite da sua cota. Para evitar problemas, faça upgrade do plano.',

packages/phrases/src/locales/ru/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: 'Цикл плана: {{period}}. Использование обновляется {{renewDate}}.',
   next_bill: 'Ваш следующий счет',
   next_bill_hint: 'Чтобы узнать больше о расчете, ознакомьтесь с этой <a>статьей</a>.',
+  next_bill_tip:
+    'Цены, отображаемые здесь, не включают налоги. Сумма налога будет рассчитана на основе предоставленной вами информации и местных требований регулирования, и будет указана в ваших счетах.',
   manage_payment: 'Управление платежами',
   overfill_quota_warning:
     'Вы достигли лимита вашего квоты. Чтобы избежать возможных проблем, повысьте план.',

packages/phrases/src/locales/tr-tr/translation/admin-console/subscription/index.ts

@@ -15,6 +15,8 @@ const subscription = {
   plan_cycle: 'Plan döngüsü: {{period}}. Kullanım {{renewDate}} tarihinde yenilenir.',
   next_bill: 'Bir sonraki faturanız',
   next_bill_hint: 'Hesaplama hakkında daha fazla bilgi için lütfen bu <a>makaleye</a> başvurun.',
+  next_bill_tip:
+    'Burada görünen fiyatlar vergileri içermez. Vergi tutarı, sağladığınız bilgilere ve yerel düzenleyici gereksinimlere dayalı olarak hesaplanacak ve faturalarınızda gösterilecektir.',
   manage_payment: 'Ödemeleri düzenle',
   overfill_quota_warning:
     'Kota sınırınıza ulaştınız. Herhangi bir sorunu önlemek için planı yükseltin.',

packages/phrases/src/locales/zh-cn/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: '计划周期：{{period}}，使用情况将于{{renewDate}}续订。',
   next_bill: '您的下一个账单',
   next_bill_hint: '要了解有关计算的更多信息，请参阅此<a>文章</a>。',
+  next_bill_tip:
+    '此处显示的价格不包含税款。税款将根据您提供的信息和当地法规要求进行计算，并将显示在您的发票中。',
   manage_payment: '管理付款',
   overfill_quota_warning: '您已达到配额限制。为防止任何问题，请升级计划。',
   upgrade_pro: '升级专业计划',

packages/phrases/src/locales/zh-hk/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: '計劃週期：{{period}}。使用情況將在{{renewDate}}重新啟動。',
   next_bill: '您的下個帳單',
   next_bill_hint: '要了解有關計算的更多信息，請參閱這篇<a>文章</a>。',
+  next_bill_tip:
+    '這裡顯示的價格不包括稅款。稅款將根據您提供的信息和當地法規要求進行計算，並顯示在您的發票中。',
   manage_payment: '管理付款',
   overfill_quota_warning: '您已達到配額限制。請升級計劃以防止任何問題。',
   upgrade_pro: '升級到專業版',

packages/phrases/src/locales/zh-tw/translation/admin-console/subscription/index.ts

@@ -14,6 +14,8 @@ const subscription = {
   plan_cycle: '計劃週期：{{period}}。使用情況訂閱日期為{{renewDate}}。',
   next_bill: '您的下一個帳單',
   next_bill_hint: '要了解更多計算方法，請參閱本<a>文章</a>。',
+  next_bill_tip:
+    '這裡顯示的價格不包括稅款。稅款將根據您提供的信息和當地法規要求進行計算，並顯示在您的發票中。',
   manage_payment: '管理付款',
   overfill_quota_warning: '您已達到配額限制。為防止出現問題，請升級計畫。',
   upgrade_pro: '升級專業',