diff --git a/src/components/DecisionModal.tsx b/src/components/DecisionModal.tsx index 77a291c1c2efa..8cf23cb6d2b29 100644 --- a/src/components/DecisionModal.tsx +++ b/src/components/DecisionModal.tsx @@ -5,7 +5,8 @@ import CONST from '@src/CONST'; import Button from './Button'; import Header from './Header'; import Modal from './Modal'; -import Text from './Text'; +import RenderHTML from './RenderHTML'; +import ScrollView from './ScrollView'; type DecisionModalProps = { /** Title describing purpose of modal */ @@ -20,6 +21,18 @@ type DecisionModalProps = { /** Text content used in second button */ secondOptionText: string; + /** Whether the first option uses a success-themed button */ + isFirstOptionSuccess?: boolean; + + /** Whether the second option uses a success-themed button */ + isSecondOptionSuccess?: boolean; + + /** Whether the first option uses a danger-themed button */ + isFirstOptionDanger?: boolean; + + /** Whether the second option uses a danger-themed button */ + isSecondOptionDanger?: boolean; + /** onSubmit callback fired after clicking on first button */ onFirstOptionSubmit?: () => void; @@ -32,11 +45,29 @@ type DecisionModalProps = { /** Callback for closing modal */ onClose: () => void; + /** Callback when modal has fully disappeared */ + onModalHide?: () => void; + /** Whether modal is visible */ isVisible: boolean; }; -function DecisionModal({title, prompt = '', firstOptionText, secondOptionText, onFirstOptionSubmit, onSecondOptionSubmit, isSmallScreenWidth, onClose, isVisible}: DecisionModalProps) { +function DecisionModal({ + title, + prompt = '', + firstOptionText, + secondOptionText, + onFirstOptionSubmit, + onSecondOptionSubmit, + isSmallScreenWidth, + onClose, + onModalHide, + isVisible, + isFirstOptionDanger = false, + isFirstOptionSuccess = true, + isSecondOptionSuccess = false, + isSecondOptionDanger = false, +}: DecisionModalProps) { const styles = useThemeStyles(); return ( @@ -45,21 +76,23 @@ function DecisionModal({title, prompt = '', firstOptionText, secondOptionText, o isVisible={isVisible} type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} innerContainerStyle={styles.pv0} + onModalHide={onModalHide} > - +
- {prompt} + {!!firstOptionText && (