feat(plan) open combobox on "add charge" click

getlago · Jul 24, 2023 · d70d82e · d70d82e
1 parent a5ba12a
commit d70d82e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 32 deletions.
diff --git 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
@@ -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(
               <Switch
                 name={`charge-${localCharge.id}-prorated`}
                 label={translate('text_649c54823c90890062476255')}
-                disabled={
-                  disabled ||
-                  (localCharge.billableMetric.recurring &&
-                    localCharge.chargeModel === ChargeModelEnum.Graduated) ||
-                  localCharge.chargeModel === ChargeModelEnum.Package ||
-                  localCharge.chargeModel === ChargeModelEnum.Percentage
-                }
+                disabled={disabled || isProratedOptionDisabled}
                 subLabel={proratedOptionHelperText}
                 checked={!!localCharge.prorated}
                 onChange={(value) => handleUpdate('prorated', Boolean(value))}

diff --git 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 && (
             <AddChargeInlineWrapper>
               <ComboBox
-                name={SEARCH_METERED_CHARGE_INPUT_NAME}
+                className={SEARCH_METERED_CHARGE_INPUT_CLASSNAME}
                 data={meteredBillableMetrics}
                 searchQuery={getMeteredBillableMetrics}
                 loading={meteredBillableMetricsLoading}
@@ -369,7 +371,11 @@ export const ChargesSection = memo(
                   onClick={() => {
                     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 && (
             <AddChargeInlineWrapper>
               <ComboBox
-                name={SEARCH_RECURRING_CHARGE_INPUT_NAME}
+                className={SEARCH_RECURRING_CHARGE_INPUT_CLASSNAME}
                 data={recurringBillableMetrics}
                 searchQuery={getRecurringBillableMetrics}
                 loading={recurringBillableMetricsLoading}
@@ -502,7 +512,11 @@ export const ChargesSection = memo(
                   onClick={() => {
                     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
@@ -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'