Description
We need to update the PhoneInputDialog from the temporary one in the Quick Dial POC with the following changes
Requirements:
MUST we must update the “Dial” button
Currently it is the secondary large style with spacing that is off
Desired : primary, small button from the design system.
MUST add two tabs to the popover
Current: no tabs, manual entry appears below the quick dial options
Desired: add tab for Quick Dial (default state). The inactive tab will say “Enter Number”
MUST make the tabs conditional. The tabs only appear if at least 1 quick dial option is configured AND the manual dial option is enabled. If not, the only available option should appear with no tabs above it
MUST update the form field in the popover
Currently: the form field extends about 75% of the popover and then there is a dial button
Desired: extend the form field to be 100% of the popover content area (minus the margins).
MUST move the Dial button
Current: Dial button is on the same line as the form field
Desired: Move the Dial button in the bottom footer of the popover.
MUST disable the DIAL button visually for the “Enter number” version of the popover
Current: The dial button is active even if a number is not in the form field
Desired: Activate the button as soon as a digit is entered into the field (I don’t think we are validating number format? @Annalise Irby to confirm)
MUST we must update the post “Dial” button click experience
Currently the popover remains open after the button is clicked
Desired : once the call has been connected, the entire popover should disappear.
SHOULD move the help text under the manual phone number form field
Currently the help text is inside the form field
Desired : move it below the form field. Use the hex value of #606B85 for the font color. Update the text to read “Example: +1 123-456-7890”
(move into the form field label). Delete from field
We MUST move the pre-programmed phone numbers, to a dropdown form field for quick dial.
Currently the numbers are not in a drop down menu, they are stand alone buttons.
Desired: move numbers into a dropdown menu. Default to first phone number that NAMI lists
Remove the triangular pointer at the bottom of the popover square
All new and updated text must be translatable keys
Additional context
Work off branch CHI-3946-quick_dial_with_config NOT master
Quick Dial with tabs
Manual Dial with Tabs - no number entered
Manual Dial with Tabs - number entered
Use the 'StyledTabs' component for the tabs
Description
We need to update the PhoneInputDialog from the temporary one in the Quick Dial POC with the following changes
Requirements:
MUST we must update the “Dial” button
Currently it is the secondary large style with spacing that is off
Desired : primary, small button from the design system.
MUST add two tabs to the popover
Current: no tabs, manual entry appears below the quick dial options
Desired: add tab for Quick Dial (default state). The inactive tab will say “Enter Number”
MUST make the tabs conditional. The tabs only appear if at least 1 quick dial option is configured AND the manual dial option is enabled. If not, the only available option should appear with no tabs above it
MUST update the form field in the popover
Currently: the form field extends about 75% of the popover and then there is a dial button
Desired: extend the form field to be 100% of the popover content area (minus the margins).
MUST move the Dial button
Current: Dial button is on the same line as the form field
Desired: Move the Dial button in the bottom footer of the popover.
MUST disable the DIAL button visually for the “Enter number” version of the popover
Current: The dial button is active even if a number is not in the form field
Desired: Activate the button as soon as a digit is entered into the field (I don’t think we are validating number format? @Annalise Irby to confirm)
MUST we must update the post “Dial” button click experience
Currently the popover remains open after the button is clicked
Desired : once the call has been connected, the entire popover should disappear.
SHOULD move the help text under the manual phone number form field
Currently the help text is inside the form field
Desired : move it below the form field. Use the hex value of #606B85 for the font color. Update the text to read “Example: +1 123-456-7890”
(move into the form field label). Delete from field
We MUST move the pre-programmed phone numbers, to a dropdown form field for quick dial.
Currently the numbers are not in a drop down menu, they are stand alone buttons.
Desired: move numbers into a dropdown menu. Default to first phone number that NAMI lists
Remove the triangular pointer at the bottom of the popover square
All new and updated text must be translatable keys
Additional context
Work off branch CHI-3946-quick_dial_with_config NOT master
Quick Dial with tabs
Manual Dial with Tabs - no number entered
Manual Dial with Tabs - number entered
Use the 'StyledTabs' component for the tabs