From d70d82e4ee47a9b83bd03860c9d35140ad74a58b Mon Sep 17 00:00:00 2001 From: Alexandre Monjol Date: Tue, 4 Jul 2023 13:09:33 -0300 Subject: [PATCH] feat(plan) open combobox on "add charge" click --- ditto/base.json | 2 +- src/components/plans/ChargeAccordion.tsx | 21 ++++------ src/components/plans/ChargesSection.tsx | 52 ++++++++++++++++-------- src/core/constants/form.ts | 3 +- 4 files changed, 46 insertions(+), 32 deletions(-) diff --git a/ditto/base.json b/ditto/base.json index 6f17bff22..0678de81d 100644 --- a/ditto/base.json +++ b/ditto/base.json @@ -804,7 +804,7 @@ "text_648c2be974f70300748a4cd4": "Add a recurring charge", "text_649c54823c90890062476255": "Prorate charge amount", "text_649c47c0a6c1f200de8ff48d": "Prorated charge", - "text_649c54823c9089006247625a": "Can’t be prorated due to {{chargeModel}} pricing model defined in above.", + "text_649c54823c9089006247625a": "Can’t be prorated due to {{chargeModel}} pricing model defined above.", "text_649c49bcebd91c0082d84446": "Full charge", "text_649c54823c90890062476259": "Based between the event reception date and the end date of the period", "text_645bb193927b375079d28a8f": "Taxes", diff --git a/src/components/plans/ChargeAccordion.tsx b/src/components/plans/ChargeAccordion.tsx index 2e5fe63d9..b1f70ff23 100644 --- a/src/components/plans/ChargeAccordion.tsx +++ b/src/components/plans/ChargeAccordion.tsx @@ -204,11 +204,12 @@ export const ChargeAccordion = memo( const isProratedOptionDisabled = useMemo(() => { return ( - localCharge.chargeModel === ChargeModelEnum.Volume || + (localCharge.billableMetric.recurring && + localCharge.chargeModel === ChargeModelEnum.Graduated) || localCharge.chargeModel === ChargeModelEnum.Package || localCharge.chargeModel === ChargeModelEnum.Percentage ) - }, [localCharge.chargeModel]) + }, [localCharge.billableMetric.recurring, localCharge.chargeModel]) const proratedOptionHelperText = useMemo(() => { if (isProratedOptionDisabled) @@ -300,12 +301,12 @@ export const ChargeAccordion = memo( label: translate('text_624aa732d6af4e0103d40e6f'), value: ChargeModelEnum.Standard, }, + { + label: translate('text_62793bbb599f1c01522e919f'), + value: ChargeModelEnum.Graduated, + }, ...(!localCharge.billableMetric.recurring ? [ - { - label: translate('text_62793bbb599f1c01522e919f'), - value: ChargeModelEnum.Graduated, - }, { label: translate('text_62a0b7107afa2700a65ef6e2'), value: ChargeModelEnum.Percentage, @@ -435,13 +436,7 @@ export const ChargeAccordion = memo( handleUpdate('prorated', Boolean(value))} diff --git a/src/components/plans/ChargesSection.tsx b/src/components/plans/ChargesSection.tsx index 2a28364f1..8e44e9842 100644 --- a/src/components/plans/ChargesSection.tsx +++ b/src/components/plans/ChargesSection.tsx @@ -15,6 +15,11 @@ import { useGetRecurringBillableMetricsLazyQuery, } from '~/generated/graphql' import { Item } from '~/components/form/ComboBox/ComboBoxItem' +import { + MUI_INPUT_BASE_ROOT_CLASSNAME, + SEARCH_METERED_CHARGE_INPUT_CLASSNAME, + SEARCH_RECURRING_CHARGE_INPUT_CLASSNAME, +} from '~/core/constants/form' import { LocalChargeInput, PlanFormInput } from './types' import { ChargeAccordion } from './ChargeAccordion' @@ -76,9 +81,6 @@ interface ChargesSectionProps { const getNewChargeId = (id: string, index: number) => `plan-charge-${id}-${index}` -const SEARCH_METERED_CHARGE_INPUT_NAME = 'searchMeteredChargeInput' -const SEARCH_RECURRING_CHARGE_INPUT_NAME = 'searchRecurringChargeInput' - export const ChargesSection = memo( ({ canBeEdited, @@ -208,14 +210,14 @@ export const ChargesSection = memo( if (!showAddMeteredCharge) setShowAddMeteredCharge(true) setTimeout(() => { - const element = document.getElementsByName( - SEARCH_METERED_CHARGE_INPUT_NAME - )[0] + const element = document.querySelector( + `.${SEARCH_METERED_CHARGE_INPUT_CLASSNAME} .${MUI_INPUT_BASE_ROOT_CLASSNAME}` + ) as HTMLElement if (!element) return element.scrollIntoView({ behavior: 'smooth' }) - element.focus() + element.click() closePopper() }, 0) @@ -230,14 +232,14 @@ export const ChargesSection = memo( if (!showAddRecurringCharge) setShowAddRecurringCharge(true) setTimeout(() => { - const element = document.getElementsByName( - SEARCH_RECURRING_CHARGE_INPUT_NAME - )[0] + const element = document.querySelector( + `.${SEARCH_RECURRING_CHARGE_INPUT_CLASSNAME} .${MUI_INPUT_BASE_ROOT_CLASSNAME}` + ) as HTMLElement if (!element) return element.scrollIntoView({ behavior: 'smooth' }) - element.focus() + element.click() closePopper() }, 0) @@ -305,7 +307,7 @@ export const ChargesSection = memo( {!!showAddMeteredCharge && ( { setShowAddMeteredCharge(true) setTimeout(() => { - document.getElementsByName(SEARCH_METERED_CHARGE_INPUT_NAME)[0].focus() + ;( + document.querySelector( + `.${SEARCH_METERED_CHARGE_INPUT_CLASSNAME} .${MUI_INPUT_BASE_ROOT_CLASSNAME}` + ) as HTMLElement + )?.click() }, 0) }} > @@ -384,7 +390,11 @@ export const ChargesSection = memo( onClick={() => { setShowAddRecurringCharge(true) setTimeout(() => { - document.getElementsByName(SEARCH_RECURRING_CHARGE_INPUT_NAME)[0].focus() + ;( + document.querySelector( + `.${SEARCH_RECURRING_CHARGE_INPUT_CLASSNAME} .${MUI_INPUT_BASE_ROOT_CLASSNAME}` + ) as HTMLElement + )?.click() }, 0) }} > @@ -441,7 +451,7 @@ export const ChargesSection = memo( {!!showAddRecurringCharge && ( { setShowAddMeteredCharge(true) setTimeout(() => { - document.getElementsByName(SEARCH_METERED_CHARGE_INPUT_NAME)[0].focus() + ;( + document.querySelector( + `.${SEARCH_METERED_CHARGE_INPUT_CLASSNAME} .${MUI_INPUT_BASE_ROOT_CLASSNAME}` + ) as HTMLElement + )?.click() }, 0) }} > @@ -517,7 +531,11 @@ export const ChargesSection = memo( onClick={() => { setShowAddRecurringCharge(true) setTimeout(() => { - document.getElementsByName(SEARCH_RECURRING_CHARGE_INPUT_NAME)[0].focus() + ;( + document.querySelector( + `.${SEARCH_RECURRING_CHARGE_INPUT_CLASSNAME} .${MUI_INPUT_BASE_ROOT_CLASSNAME}` + ) as HTMLElement + )?.click() }, 0) }} > diff --git a/src/core/constants/form.ts b/src/core/constants/form.ts index 0b92c54ae..f9ce1a139 100644 --- a/src/core/constants/form.ts +++ b/src/core/constants/form.ts @@ -5,5 +5,6 @@ export enum FORM_ERRORS_ENUM { } // Selectors -export const SEARCH_CHARGE_INPUT_NAME = 'searchChargeInput' +export const SEARCH_METERED_CHARGE_INPUT_CLASSNAME = 'searchMeteredChargeInput' +export const SEARCH_RECURRING_CHARGE_INPUT_CLASSNAME = 'searchRecurringChargeInput' export const MUI_INPUT_BASE_ROOT_CLASSNAME = 'MuiInputBase-root'