mirror of
https://github.com/logto-io/logto.git
synced 2025-01-20 21:32:31 -05:00
feat(console,phrases): implement quota guard footer (#5346)
implement the quota guard footer on third-party app creation modal
This commit is contained in:
simeng-li
GitHub
parent
185491d699
commit
0941a9b692
18 changed files with 90 additions and 3 deletions
|
|
@ -21,6 +21,11 @@ const useApplicationsUsage = () => {
|
|||
[allApplications]
|
||||
);
|
||||
|
||||
const thirdPartyAppCount = useMemo(
|
||||
() => allApplications?.filter(({ isThirdParty }) => isThirdParty).length ?? 0,
|
||||
[allApplications]
|
||||
);
|
||||
|
||||
const hasMachineToMachineAppsReachedLimit = useMemo(
|
||||
() =>
|
||||
hasReachedQuotaLimit({
|
||||
|
|
@ -41,6 +46,16 @@ const useApplicationsUsage = () => {
|
|||
[currentPlan, m2mAppCount]
|
||||
);
|
||||
|
||||
const hasThirdPartyAppsReachedLimit = useMemo(
|
||||
() =>
|
||||
hasReachedQuotaLimit({
|
||||
quotaKey: 'thirdPartyApplicationsLimit',
|
||||
plan: currentPlan,
|
||||
usage: thirdPartyAppCount,
|
||||
}),
|
||||
[currentPlan, thirdPartyAppCount]
|
||||
);
|
||||
|
||||
const hasAppsReachedLimit = useMemo(
|
||||
() =>
|
||||
hasReachedQuotaLimit({
|
||||
|
|
@ -55,6 +70,7 @@ const useApplicationsUsage = () => {
|
|||
hasMachineToMachineAppsReachedLimit,
|
||||
hasMachineToMachineAppsSurpassedLimit,
|
||||
hasAppsReachedLimit,
|
||||
hasThirdPartyAppsReachedLimit,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,18 @@ import useApplicationsUsage from '@/hooks/use-applications-usage';
|
|||
type Props = {
|
||||
selectedType?: ApplicationType;
|
||||
isLoading: boolean;
|
||||
isThirdParty?: boolean;
|
||||
onClickCreate: () => void;
|
||||
};
|
||||
|
||||
function Footer({ selectedType, isLoading, onClickCreate }: Props) {
|
||||
function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props) {
|
||||
const { currentPlan } = useContext(SubscriptionDataContext);
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' });
|
||||
const { hasAppsReachedLimit, hasMachineToMachineAppsReachedLimit } = useApplicationsUsage();
|
||||
const {
|
||||
hasAppsReachedLimit,
|
||||
hasMachineToMachineAppsReachedLimit,
|
||||
hasThirdPartyAppsReachedLimit,
|
||||
} = useApplicationsUsage();
|
||||
|
||||
if (selectedType) {
|
||||
const { id: planId, name: planName, quota } = currentPlan;
|
||||
|
|
@ -42,6 +47,21 @@ function Footer({ selectedType, isLoading, onClickCreate }: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
// Third party app is only available for paid plan (pro plan).
|
||||
if (isThirdParty && hasThirdPartyAppsReachedLimit) {
|
||||
return (
|
||||
<QuotaGuardFooter>
|
||||
<Trans
|
||||
components={{
|
||||
a: <ContactUsPhraseLink />,
|
||||
}}
|
||||
>
|
||||
{t('third_party_apps')}
|
||||
</Trans>
|
||||
</QuotaGuardFooter>
|
||||
);
|
||||
}
|
||||
|
||||
if (hasAppsReachedLimit) {
|
||||
return (
|
||||
<QuotaGuardFooter>
|
||||
|
|
|
|||
|
|
@ -105,7 +105,14 @@ function CreateForm({
|
|||
title="applications.create"
|
||||
subtitle={subtitleElement}
|
||||
size={defaultCreateType ? 'medium' : 'large'}
|
||||
footer={<Footer selectedType={value} isLoading={isSubmitting} onClickCreate={onSubmit} />}
|
||||
footer={
|
||||
<Footer
|
||||
selectedType={value}
|
||||
isLoading={isSubmitting}
|
||||
isThirdParty={isDefaultCreateThirdParty}
|
||||
onClickCreate={onSubmit}
|
||||
/>
|
||||
}
|
||||
onClose={onClose}
|
||||
>
|
||||
<form>
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Schalten Sie MFA zur Sicherheitsüberprüfung frei, indem Sie auf einen kostenpflichtigen Plan aktualisieren. Zögern Sie nicht, uns zu <a>kontaktieren</a>, wenn Sie Unterstützung benötigen.',
|
||||
organizations:
|
||||
'Organisationen freischalten, indem Sie auf einen kostenpflichtigen Plan aktualisieren. Zögern Sie nicht, <a>kontaktieren Sie uns</a>, wenn Sie Unterstützung benötigen.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,8 @@ const paywall = {
|
|||
mfa: 'Unlock MFA to verification security by upgrading to a paid plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
|
||||
organizations:
|
||||
'Unlock organizations by upgrading to a paid plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Desbloquea MFA para verificar la seguridad al actualizar a un plan pago. No dudes en <a>contactarnos</a> si necesitas ayuda.',
|
||||
organizations:
|
||||
'Desbloquea las organizaciones al actualizar a un plan pago. No dudes en <a>contactarnos</a> si necesitas ayuda.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: "Déverrouillez MFA pour vérifier la sécurité en passant à un plan payant. N'hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
|
||||
organizations:
|
||||
"Débloquez les organisations en passant à un plan payant. N’hésitez pas à <a>nous contacter</a> si vous avez besoin d'aide.",
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Sblocca MFA per verificare la sicurezza passando a un piano a pagamento. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
|
||||
organizations:
|
||||
'Sblocca le organizzazioni passando a un piano a pagamento. Non esitare a <a>contattarci</a> se hai bisogno di assistenza.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'セキュリティを確認するためにMFAを解除して有料プランにアップグレードしてください。ご質問があれば、<a>お問い合わせください</a>。',
|
||||
organizations:
|
||||
'Unlock organizations by upgrading to a paid plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: '보안을 확인하기 위해 MFA를 잠금 해제하여 유료 플랜으로 업그레이드하세요. 궁금한 점이 있으면 <a>문의하세요</a>.',
|
||||
organizations:
|
||||
'Unlock organizations by upgrading to a paid plan. Don’t hesitate to <a>contact us</a> if you need any assistance.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Odblokuj MFA, aby zweryfikować bezpieczeństwo, przechodząc na płatny plan. Nie wahaj się <a>skontaktować z nami</a>, jeśli potrzebujesz pomocy.',
|
||||
organizations:
|
||||
'Odblokuj organizacje, ulepszając do płatnego planu. Nie wahaj się <a>skontaktować z nami</a>, jeśli potrzebujesz pomocy.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Desbloqueie o MFA para verificar a segurança, fazendo upgrade para um plano pago. Não hesite em <a>nos contatar</a> se precisar de alguma assistência.',
|
||||
organizations:
|
||||
'Desbloqueie organizações ao fazer upgrade para um plano pago. Não hesite em <a>entrar em contato conosco</a> se precisar de alguma assistência.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Desbloqueie o MFA para a verificação de segurança ao atualizar para um plano pago. Não hesite em <a>entrar em contato conosco</a> se precisar de assistência.',
|
||||
organizations:
|
||||
'Desbloquear organizações ao atualizar para um plano pago. Não hesite em <a>entrar em contato conosco</a> se precisar de assistência.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: 'Разблокируйте MFA для повышения безопасности с помощью перехода на платный план. Не стесняйтесь <a>связаться с нами</a>, если вам нужна помощь.',
|
||||
organizations:
|
||||
'Разблокируйте организации, перейдя на платный план. Не стесняйтесь <a>связаться с нами</a>, если вам нужна помощь.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,9 @@ const paywall = {
|
|||
mfa: "Güvenliği kontrol etmek için MFA'yı bir ücretli plana geçerek kilidini açın. Yardıma ihtiyacınız olursa bize <a>iletişim kurmaktan</a> çekinmeyin.",
|
||||
organizations:
|
||||
'Upgrade to a paid plan to unlock organizations. Don’t hesitate to <a>contact us</a> if you need any assistance.',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@ const paywall = {
|
|||
'已达到<planName/>的{{count, number}}个 Webhook 限制。升级计划以创建更多 Webhook。如需任何帮助，请<a>联系我们</a>。',
|
||||
mfa: '升级到付费计划以解锁MFA进行安全验证。如果需要任何帮助，请随时<a>联系我们</a>。',
|
||||
organizations: '升级到付费计划以解锁组织功能。如有任何需要，请不要犹豫<a>联系我们</a>。',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@ const paywall = {
|
|||
'已達到<planName/>的{{count, number}}個 Webhook 限制。升級計劃以創建更多 Webhook。如需任何幫助，請<a>聯繫我們</a>。',
|
||||
mfa: '升級到付費計劃以解鎖MFA以提高安全性。如果需要任何協助，請隨時<a>聯繫我們</a>。',
|
||||
organizations: '升級至付費計劃以解鎖組織。如需要任何協助，請隨時<a>聯繫我們</a>。',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
|
|
@ -51,6 +51,9 @@ const paywall = {
|
|||
'已達到<planName/>的{{count, number}}個 Webhook 限制。升級計劃以創建更多 Webhook。如需任何幫助，請<a>聯繫我們</a>。',
|
||||
mfa: '升級到付費計劃以解鎖MFA以提高安全性。如果需要任何協助，請隨時<a>聯繫我們</a>。',
|
||||
organizations: '升級到付費計劃以解鎖組織。如果需要任何協助，請隨時<a>聯繫我們</a>。',
|
||||
/** UNTRANSLATED */
|
||||
third_party_apps:
|
||||
'Unlock Logto as IdP for third-party apps by upgrading to a paid plan. For any assistance, feel free to <a>contact us</a>.',
|
||||
};
|
||||
|
||||
export default Object.freeze(paywall);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue