{
// Reset price fields if next plan is not AM Enterprise
const isManagedPlan = isAmEnterprisePlan(v as string);
const chosenPlanIsAm3Ds = isAm3DsPlan(v as string);
const nextPrices = isManagedPlan
? {}
: {
customPriceErrors: '',
customPriceTransactions: '',
customPriceReplays: '',
customPriceMonitorSeats: '',
customPriceUptime: '',
customPriceSpans: '',
customPriceSpansIndexed: '',
customPriceAttachments: '',
customPricePcss: '',
customPrice: '',
};
const nextReservedCpes = chosenPlanIsAm3Ds
? {}
: {
reservedCpeSpans: '',
reservedCpeSpansIndexed: '',
};
this.setState(state => ({
...state,
data: {
...state.data,
plan: v,
...nextPrices,
...nextReservedCpes,
},
}));
}}
value={this.state.data.plan}
/>
this.setState(state => ({
...state,
effectiveAtDisabled: !!v,
data: {...state.data, atPeriodEnd: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, coterm: v},
effectiveAtDisabled: !!v,
}))
}
/>
this.setState(state => ({
...state,
data: {
...this.state.data,
billingInterval: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
managed: v,
customPrice: v ? state.data.customPrice : '',
},
}))
}
/>
{
if (v === 'credit_card') {
this.setState(state => ({
...state,
data: {...state.data, onDemandInvoicedManual: ''},
}));
}
this.setState(state => ({...state, data: {...state.data, type: v}}));
}}
value={this.state.data.type}
/>
{this.state.data.type === 'invoiced' && (
this.setState(state => ({
...state,
data: {...state.data, onDemandInvoicedManual: v},
}))
}
/>
)}
{!this.disableRetainOnDemand() && (
this.setState(state => ({
...state,
data: {
...state.data,
retainOnDemandBudget: v,
},
}))
}
/>
)}
Plan Quotas
Monthly quantities for each SKU
this.setState(state => ({
...state,
data: {...state.data, reservedErrors: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeErrors: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, reservedTransactions: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeTransactions: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, reservedReplays: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeReplays: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, reservedSpans: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeSpans: v},
}))
}
/>
{isAm3Ds && (
this.setState(state => ({
...state,
data: {
...state.data,
reservedCpeSpans: v,
reservedSpans: RESERVED_BUDGET_QUOTA,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(this.state.data.reservedCpeSpans);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
reservedCpeSpans: currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
)}
{isAm3Ds && (
this.setState(state => ({
...state,
data: {...state.data, reservedSpansIndexed: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeSpansIndexed: v},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
reservedCpeSpansIndexed: v,
reservedSpansIndexed: RESERVED_BUDGET_QUOTA,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.reservedCpeSpansIndexed
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
reservedCpeSpansIndexed:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
)}
this.setState(state => ({
...state,
data: {...state.data, reservedMonitorSeats: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeMonitorSeats: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, reservedUptime: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeUptime: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, reservedAttachments: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeAttachments: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, reservedProfileDuration: v},
}))
}
/>
this.setState(state => ({
...state,
data: {...state.data, softCapTypeProfileDuration: v},
}))
}
/>
Reserved Volume Prices
Annual prices for reserved volumes, in whole dollars.
this.setState(state => ({
...state,
data: {
...state.data,
customPriceErrors: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPriceTransactions: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPriceReplays: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPriceSpans: v,
},
}))
}
/>
{isAm3Ds && (
this.setState(state => ({
...state,
data: {
...state.data,
customPriceSpansIndexed: v,
},
}))
}
/>
)}
this.setState(state => ({
...state,
data: {
...state.data,
customPriceMonitorSeats: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPriceUptime: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPriceAttachments: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPriceProfileDuration: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPricePcss: v,
},
}))
}
/>
this.setState(state => ({
...state,
data: {
...state.data,
customPrice: v,
},
}))
}
/>
{this.isEnablingOnDemandMaxSpend() && (
On-Demand Cost-Per-Event (CPE)
The cost of on-demand units, in dollars, for invoiced customers with
on-demand max spend. If not set, the on-demand spend will be
calculated with the self-serve on-demand pricing.
If the subscription already has on-demand spend in the current
period, and the new cost-per-event overrides would cause the spend
to exceed the on-demand budget, the request will fail.
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeErrors: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeErrors
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeErrors:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeTransactions: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeTransactions
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeTransactions:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeReplays: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeReplays
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeReplays:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeSpans: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(this.state.data.onDemandCpeSpans);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeSpans:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeAttachments: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeAttachments
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeAttachments:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeProfileDuration: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeProfileDuration
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeProfileDuration:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeMonitorSeats: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeMonitorSeats
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeMonitorSeats:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeUptime: v,
},
}))
}
onBlur={() => {
const currentValue = parseFloat(
this.state.data.onDemandCpeUptime
);
if (!isNaN(currentValue)) {
this.setState(state => ({
...state,
data: {
...state.data,
onDemandCpeUptime:
currentValue.toFixed(CPE_DECIMAL_PRECISION),
},
}));
}
}}
/>
)}