diff --git a/src/api/constants.ts b/src/api/constants.ts index 450fba7..b3c5a43 100644 --- a/src/api/constants.ts +++ b/src/api/constants.ts @@ -152,17 +152,17 @@ export const LIMITS: LimitField[] = [ }, ]; -export const LIMIT_MINS = "minutes"; -export const LIMIT_SESS = "sessions"; +export const LIMIT_MIN = "minute"; +export const LIMIT_SESS = "session"; export const LIMIT_UNITS: LimitUnitOption[] = [ { - name: "Sessions", + name: "Session", value: LIMIT_SESS, }, { - name: "Minutes", - value: LIMIT_MINS, + name: "Minute", + value: LIMIT_MIN, }, ]; diff --git a/src/api/index.ts b/src/api/index.ts index b46f7e9..3ef4718 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -327,6 +327,7 @@ export const postServiceProviderLimit = ( sid: string, payload: Partial ) => { + console.log(payload); return postFetch>( `${API_SERVICE_PROVIDERS}/${sid}/Limits`, payload diff --git a/src/api/types.ts b/src/api/types.ts index 41ba8d3..d460705 100644 --- a/src/api/types.ts +++ b/src/api/types.ts @@ -16,7 +16,7 @@ export type LimitCategories = | "voice_call_minutes" | "voice_call_session_license"; -export type LimitUnit = "Sessions" | "Minutes"; +export type LimitUnit = "Session" | "Minute"; export interface LimitUnitOption { name: LimitUnit; diff --git a/src/components/forms/local-limits.tsx b/src/components/forms/local-limits.tsx index 5b14da3..7fa8b9f 100644 --- a/src/components/forms/local-limits.tsx +++ b/src/components/forms/local-limits.tsx @@ -1,10 +1,19 @@ import React, { useEffect, useRef, useState } from "react"; -import { LIMITS, LIMIT_MINS, LIMIT_SESS, LIMIT_UNITS } from "src/api/constants"; +import { + LIMITS, + LIMIT_MIN, + LIMIT_SESS, + LIMIT_UNITS, + USER_ADMIN, +} from "src/api/constants"; import { hasLength } from "src/utils"; import type { Limit, LimitCategories, LimitUnit } from "src/api/types"; import { Selector } from "./selector"; +import { useSelectState } from "src/store"; +import { ScopedAccess } from "../scoped-access"; +import { Scope } from "src/store/types"; type LocalLimitRef = { [key in LimitCategories]?: HTMLInputElement; @@ -26,6 +35,7 @@ export const LocalLimits = ({ limits: [localLimits, setLocalLimits], inputRef, }: LocalLimitsProps) => { + const user = useSelectState("user"); const [unit, setUnit] = useState>(LIMIT_SESS); const updateLimitValue = (category: string) => { @@ -41,21 +51,21 @@ export const LocalLimits = ({ const filteredLimits = import.meta.env.VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL ? LIMITS.filter((limit) => unit === LIMIT_SESS - ? !limit.category.includes(LIMIT_MINS) - : limit.category.includes(LIMIT_MINS) + ? !limit.category.includes(LIMIT_MIN) + : limit.category.includes(LIMIT_MIN) ) : LIMITS.filter( (limit) => !limit.category.includes("license") && - !limit.category.includes(LIMIT_MINS) + !limit.category.includes(LIMIT_MIN) ); useEffect(() => { if (hasLength(data)) { setLocalLimits(data); setUnit(() => { - return data.find((l) => l.category.includes(LIMIT_MINS)) - ? LIMIT_MINS + return data.find((l) => l.category.includes(LIMIT_MIN)) + ? LIMIT_MIN : LIMIT_SESS; }); } else { @@ -67,51 +77,82 @@ export const LocalLimits = ({ <> {import.meta.env.VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL && ( <> - + setUnit(e.target.value as Lowercase)} + disabled={user && user.scope !== USER_ADMIN} + onChange={(e) => { + setUnit(e.target.value as Lowercase); + if (e.target.value !== unit) { + localLimits.forEach((l) => { + if (l.category.includes(unit)) { + l.quantity = ""; + } + }); + } + }} /> )} {filteredLimits.map(({ category, label }) => { return ( - - - { - if (inputRef && inputRef.current) { - inputRef.current[category] = el; - } - }} - id={category} - type="number" - name={category} - placeholder="Enter quantity (0=unlimited)" - min="0" - value={updateLimitValue(category)} - onChange={(e) => { - const limit = localLimits.find((l) => l.category === category); - const value = e.target.value ? Number(e.target.value) : ""; + user && ( + + + + { + if (inputRef && inputRef.current) { + inputRef.current[category] = el; + } + }} + id={category} + type="number" + name={category} + placeholder="Enter quantity (0=unlimited)" + min="0" + value={updateLimitValue(category)} + disabled={ + import.meta.env.VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL && + user.scope !== USER_ADMIN + } + onChange={(e) => { + const limit = localLimits.find( + (l) => l.category === category + ); + const value = e.target.value ? Number(e.target.value) : ""; - if (limit) { - setLocalLimits( - localLimits.map((l) => - l.category === category ? { ...l, quantity: value } : l - ) - ); - } else { - setLocalLimits([ - ...localLimits, - { category, quantity: value }, - ]); - } - }} - /> - + if (limit) { + setLocalLimits( + localLimits.map((l) => + l.category === category + ? { ...l, quantity: value } + : l + ) + ); + } else { + setLocalLimits([ + ...localLimits, + { category, quantity: value }, + ]); + } + }} + /> + + + ) ); })} diff --git a/src/containers/internal/views/settings/service-provider-settings.tsx b/src/containers/internal/views/settings/service-provider-settings.tsx index 2e38d5b..782ff99 100644 --- a/src/containers/internal/views/settings/service-provider-settings.tsx +++ b/src/containers/internal/views/settings/service-provider-settings.tsx @@ -125,7 +125,7 @@ export const ServiceProviderSettings = ({ setInitialCheck(false); } } - }, [currentServiceProvider]); + }, [currentServiceProvider, limits]); return ( <> @@ -143,9 +143,11 @@ export const ServiceProviderSettings = ({ onChange={(e) => setName(e.target.value)} /> -
- -
+ {!import.meta.env.VITE_APP_ENABLE_ACCOUNT_LIMITS_ALL && ( +
+ +
+ )}