complete-section-modal.js

# SectionAttempt.js
<CompleteSectionModal
  onConfirm={ () => completeSectionAttempt()
    .then(() => isLastSectionAttempt 
      ? push(`${ STUDENT_PORTAL_ROUTE }/test-taking/complete-test-confirmation`)
      : push(`${ STUDENT_PORTAL_ROUTE }/test-taking/complete-section-confirmation`)
    )}
/>

# CompleteSectionModal.js

import React from 'react'
import PropTypes from 'prop-types'
import { SubmitButton } from 'lp-components'
import { compose } from 'redux'
import { modal } from 'lp-hoc'
import { noop } from 'lodash'

const propTypes = {
  handleHide: PropTypes.func.isRequired,
  onConfirm: PropTypes.func,
}

const defaultProps = {
  onConfirm: noop,
}

function CompleteSectionModal ({ handleHide, onConfirm }) {
  return (
    <div className="modal-styles">
      <div className="top-area" style={{ paddingBottom: 0 }}>
        <div className="modal-heading">
          <h3> Complete Section </h3>
        </div>
        <p>
          Are you sure you would like to mark this section as complete?
          You will not be able to revise your answers later.
        </p>
      </div>
        <div className="button-area">
          <SubmitButton onClick={ onConfirm }> Mark as Complete </SubmitButton>
          <button className="button-primary button-outline button-second" onClick={ handleHide }> Cancel </button>
        </div>
    </div>
  )
}

CompleteSectionModal.propTypes = propTypes
CompleteSectionModal.defaultProps = defaultProps

export default compose(
  modal({ name: 'student-portal-complete-section' }),
)(CompleteSectionModal)