diff --git a/src/api/index.ts b/src/api/index.ts index 5406196..8b61cd9 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -582,6 +582,10 @@ export const deleteTtsCache = () => { return deleteFetch(API_TTS_CACHE); }; +export const deleteAccountTtsCache = (sid: string) => { + return deleteFetch(`${API_BASE_URL}/Accounts/${sid}/TtsCache`); +}; + /** Named wrappers for `getFetch` */ export const getUser = (sid: string) => { diff --git a/src/containers/internal/views/accounts/edit.tsx b/src/containers/internal/views/accounts/edit.tsx index 405915a..3e5d872 100644 --- a/src/containers/internal/views/accounts/edit.tsx +++ b/src/containers/internal/views/accounts/edit.tsx @@ -7,7 +7,7 @@ import { useApiData } from "src/api"; import { toastError, useSelectState } from "src/store"; import { AccountForm } from "./form"; -import type { Account, Application, Limit } from "src/api/types"; +import type { Account, Application, Limit, TtsCache } from "src/api/types"; import { ROUTE_INTERNAL_ACCOUNTS, ROUTE_INTERNAL_APPLICATIONS, @@ -25,6 +25,9 @@ export const EditAccount = () => { `Accounts/${params.account_sid}/Limits` ); const [apps] = useApiData("Applications"); + const [ttsCache, ttsCacheFetcher] = useApiData( + `Accounts/${params.account_sid}/TtsCache` + ); useScopedRedirect( Scope.account, @@ -50,6 +53,7 @@ export const EditAccount = () => { apps={apps} account={{ data, refetch, error }} limits={{ data: limitsData, refetch: refetchLimits }} + ttsCache={{ data: ttsCache, refetch: ttsCacheFetcher }} /> ; account?: UseApiDataMap; + ttsCache?: UseApiDataMap; }; -export const AccountForm = ({ apps, limits, account }: AccountFormProps) => { +export const AccountForm = ({ + apps, + limits, + account, + ttsCache, +}: AccountFormProps) => { const navigate = useNavigate(); const user = useSelectState("user"); const currentServiceProvider = useSelectState("currentServiceProvider"); @@ -60,6 +68,7 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => { const [initialRegHook, setInitialRegHook] = useState(false); const [initialQueueHook, setInitialQueueHook] = useState(false); const [localLimits, setLocalLimits] = useState([]); + const [clearTtsCacheFlag, setClearTtsCacheFlag] = useState(false); /** This lets us map and render the same UI for each... */ const webhooks = [ @@ -139,6 +148,20 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => { } }; + const handleClearCache = () => { + deleteAccountTtsCache(account?.data?.account_sid || "") + .then(() => { + if (ttsCache) { + ttsCache.refetch(); + } + setClearTtsCacheFlag(false); + toastSuccess("Tts Cache successfully cleaned"); + }) + .catch((error) => { + toastError(error.msg); + }); + }; + const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); @@ -446,6 +469,25 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => { ); })} + {ttsCache && ( +
+ + + + {`There are ${ + ttsCache.data ? ttsCache.data.size : 0 + } cached TTS prompts`} +
+ )} {message && (
@@ -476,6 +518,14 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {

)} + {clearTtsCacheFlag && ( + setClearTtsCacheFlag(false)} + > +

Are you sure you want to clean TTS cache for this account?

+
+ )} ); };