qpp-style 2.1.13 → 2.2.0-sm.0

package/js/components/SessionDialogUI.jsx

@@ -1,199 +0,0 @@
-import React from 'react';
-import InfoModal from './InfoModal';
-import PropTypes from 'prop-types';
-import cookie from 'cookie';
-import jwtDecode from 'jwt-decode';
-import RefreshSession from '../session/refresh';
-import LogoutSession from '../session/logout';
-import fetchTtl from '../session/ttl';
-
-const fetchTtlIntervalMs = 60000;
-
-export default class SessionDialogUI extends React.Component {
-
-    /**
-     * Create a SessionDialogUI component.
-     * @param {object} props - Configuration options. See SessionDialog for more
-     */
-    constructor(props) {
-        super(props);
-
-        this.handleOpenModal = this.handleOpenModal.bind(this);
-        this.handleCloseModal = this.handleCloseModal.bind(this);
-        this.refreshSession = this.refreshSession.bind(this);
-        this.signOut = this.signOut.bind(this);
-        this.startTimer = this.startTimer.bind(this);
-        this.shouldShowDialog = this.shouldShowDialog.bind(this);
-        this.shouldSignOut = this.shouldSignOut.bind(this);
-        this.minutesUntil = this.minutesUntil.bind(this);
-        this.checkExpiry = this.checkExpiry.bind(this);
-        this.onInterval = this.onInterval.bind(this);
-
-        if (props.showImmediate === true) {
-            this.state = {
-                showModal: true
-            };
-        } else {
-            this.state = {
-                showModal: false
-            };
-
-            this.startTimer();
-        }
-    }
-
-    /**
-     * Extracts the token exp value as a JavaScript date.
-     * @param {Object} cookies - An object representation of the cookie store
-     * @returns {(date|null)} The token expiration date, if found
-     */
-    getTokenExpiry(cookies) {
-        let expiry = null;
-
-        if (cookies.hasOwnProperty('qpp_auth_token') && cookies.qpp_auth_token) {
-            // See https://tools.ietf.org/html/rfc7519
-            // `exp` is a NumericDate representing "seconds since the epoch"
-            // and it needs to be milliseconds to get a JavaScript date from it.
-            const { exp } = jwtDecode(cookies.qpp_auth_token);
-            expiry = new Date(exp * 1000);
-        }
-
-        return expiry;
-    }
-
-    checkExpiry(expiry) {
-        if (expiry) {
-            if (this.shouldShowDialog(expiry)) {
-                this.handleOpenModal();
-            } else if (this.shouldSignOut(expiry)) {
-                this.signOut();
-                clearInterval(this.warningInterval);
-            }
-        } else {
-            clearInterval(this.warningInterval);
-        }
-    }
-
-    onInterval() {
-        const cookies = cookie.parse(document.cookie);
-
-        if (cookies.hasOwnProperty('qpp_auth_token') && cookies.qpp_auth_token) {
-            fetchTtl(cookies.qpp_auth_token)
-                .then(this.checkExpiry)
-                .catch((error) => {
-                    this.signOut();
-                    clearInterval(this.warningInterval);
-                });
-        }
-    }
-
-    /**
-     * Checks whether the user is within a specified number of minutes before
-     * their session token expires. If so, show a warning dialog. If the
-     * expiration has been reached, sign the user out.
-     */
-    startTimer() {
-        clearInterval(this.warningInterval);
-
-        this.warningInterval = setInterval(this.onInterval, fetchTtlIntervalMs);
-    }
-
-    /**
-     * Returns whether the current time is within the timeout range of expiry.
-     * @param {date} expiry - Expiration date to check against
-     * @returns {boolean}
-     */
-    shouldShowDialog(expiry) {
-        return !this.state.showModal &&
-            this.minutesUntil(expiry) <= this.props.warningTimeout;
-    }
-
-    /**
-     * Returns whether the current time has reached the expiration date.
-     * @param {date} expiry - Expiration date to check against
-     * @returns {boolean}
-     */
-    shouldSignOut(expiry) {
-        return this.minutesUntil(expiry) <= 0;
-    }
-
-    /**
-     * Returns number of minutes until the expiration date.
-     * @param {date} expiry - Expiration date to check against
-     * @returns {number}
-     */
-    minutesUntil(expiry) {
-        return (expiry - new Date().getTime()) / 60000;
-    }
-
-    /**
-     * Sets the modal state to visible.
-     */
-    handleOpenModal() {
-        this.setState({
-            showModal: true
-        });
-    }
-
-    /**
-     * Sets the modal state to hidden.
-     */
-    handleCloseModal() {
-        this.setState({
-            showModal: false
-        });
-    }
-
-    /**
-     * Handles the user requesting their session be extended.
-     */
-    refreshSession() {
-        RefreshSession({
-            window,
-            onSuccess: () => {
-                this.startTimer();
-            }
-        });
-
-        this.handleCloseModal();
-    }
-
-    /**
-     * Handles the user requesting their session be ended.
-     */
-    signOut() {
-        LogoutSession(window);
-        this.handleCloseModal();
-    }
-
-    /**
-     * Renders a ReactModal component.
-     * See: https://reactcommunity.org/react-modal/
-     */
-    render() {
-        return (
-            <InfoModal
-                isOpen={this.state.showModal}
-                primaryAction="Keep me signed in"
-                primaryCallback={this.refreshSession}
-                secondaryAction="Sign me out now"
-                secondaryCallback={this.signOut}
-                onRequestClose={this.handleCloseModal}
-                closeXAction={this.handleCloseModal}
-                titleText="You will be signed out within two minutes"
-                bodyText={`You have been inactive for thirty minutes. For
-                your security, we will sign you out automatically.`} />
-        );
-    }
-
-}
-
-SessionDialogUI.propTypes = {
-    showImmediate: PropTypes.bool,
-    warningTimeout: PropTypes.number
-};
-
-SessionDialogUI.defaultProps = {
-    showImmediate: false,
-    warningTimeout: 2
-};

package/js/components/SideNav/Chart/ScoreChart.jsx

@@ -1,246 +0,0 @@
-import React from 'react';
-import { pie, arc } from 'd3-shape';
-import { select, event } from 'd3-selection';
-
-const WIDTH = 210;
-const HEIGHT = 210;
-const RADIUS = Math.min(WIDTH, HEIGHT) / 2;
-const GAP_VALUE = 2.5;
-const TITLE_MAPPING = {
-  quality: 'Quality Measures',
-  aci: 'Advancing Care Info',
-  ia: 'Improvement Activities'
-};
-
-export default class ScoreChart extends React.Component {
-  constructor (props) {
-    super(props);
-    this.draw = this.draw.bind(this);
-    this.toggleLegend = this.toggleLegend.bind(this);
-    this.state = {
-      legend: false
-    }
-  }
-
-  componentDidMount () {
-    const { chartData } = this.props;
-    if (chartData && chartData.finalScore) {
-      this.draw(chartData);
-    }
-  }
-
-  componentWillReceiveProps ({ chartData }) {
-    if (chartData && chartData.finalScore) {
-      this.draw(chartData);
-    }
-  }
-
-  redirectToCategory (submissionId, categoryId) {
-    // track explicitly chart legends
-    if (window.utag) {
-      window.utag.track('link', {
-          ga_event_category: 'SidebarNav',
-          ga_event_action: `GoTo${categoryId}`,
-          ga_event_label: categoryId});
-    }
-    window.location.href = `/user/submissions/${submissionId}/${categoryId}`;
-  }
-
-  draw (chartData) {
-    const scorePie = pie().sort(null);
-
-    // Removing invalid categories
-    const categories = chartData.categories.filter(({ maxContribution }) => !!maxContribution)
-
-    // Calculating the sum of valid categories in order to calculate ratios
-    const categorySum = categories
-      .map(({ maxContribution }) => maxContribution)
-      .reduce((sum, current) => sum + current);
-
-    if (!categorySum) {
-      return;
-    }
-
-    select('.score-chart')
-      .selectAll('*')
-      .remove();
-
-    const svg = select('.score-chart')
-      .attr('width', WIDTH)
-      .attr('height', HEIGHT);
-
-    const chartArc = arc()
-      .innerRadius(RADIUS - 1.5)
-      .outerRadius(RADIUS - 25);
-
-    // Preparing the data structure with ratios: [ FILLED, EMPTY, TRANSPARENT, FILLED, EMPTY, ... ]
-    let data;
-    if (categories.length === 0) {
-      data = []
-    } else if (categories.length === 1) {
-      const { value, maxContribution } = categories[0]
-      data = [ value || 0, maxContribution - value ]
-    } else {
-      data = categories
-        .map(({ value, maxContribution }) => [ value || 0, maxContribution - value, GAP_VALUE * (categorySum / 100) ])
-        .reduce((a, b) => a.concat(b), []);
-    }
-
-    svg.append('title')
-      .attr('id', 'titleID')
-      .text('Your submission score');
-
-    svg.append('desc')
-      .attr('id', 'descID')
-      .text(`${chartData.finalScore} out of 100`);
-
-    // Setting up the arcs
-    let arcs = svg.append('g')
-      .attr('class', 'arcs')
-      .attr('role', 'presentation')
-      .selectAll('g.arc')
-      .data(scorePie(data))
-      .enter()
-      .append('g')
-      .attr('class', (d, i) => {
-        let role;
-        if (i % 3 === 0) {
-          role = 'filled';
-        } else if (i % 3 === 1) {
-          role = 'empty'
-        } else {
-          role = 'transparent'
-        }
-        return `arc ${categories[parseInt(i / 3)].name} ${role}`
-      })
-      .attr('transform', `translate(${RADIUS}, ${RADIUS})`)
-      // For accessibility, we add keyboard access to the filled slices
-      .attr('tabindex', (d, i) => {
-        let tabindex = -1;
-        if (i % 3 === 0) {
-            tabindex = 0;
-        }
-        return tabindex;
-      })
-      // IE for for focusable svg elements
-      .attr('focusable', (d, i) => {
-        if (i % 3 === 0) {
-            return true;
-        }
-      })
-      // For accessibility, we add keyboard access to the filled slices
-      .on('keyup', (d, i) => {
-        const code = event.keyCode || event.which;
-        if (code === 13) {
-            const { submissionId } = chartData;
-            const { name } = categories[parseInt(i / 3)];
-            this.redirectToCategory(submissionId, name);
-        }
-      })
-      // On click - go to category page
-      .on('click', (d, i) => {
-        const { submissionId } = chartData;
-        const { name } = categories[parseInt(i / 3)];
-        this.redirectToCategory(submissionId, name);
-      });
-
-      // Add accessibility description
-      arcs.append('desc')
-        .text((d, i) => {
-            if (i % 3 === 0) {
-                const { name, value, maxContribution } = categories[parseInt(i / 3)];
-                return `${TITLE_MAPPING[name]} ${value} out of ${maxContribution}`;
-            }
-        });
-
-    arcs.append('path')
-      .attr('d', chartArc)
-      // On mouse over - show category tooltip
-      .on('mouseover', (d, i) => {
-        const { name, value, maxContribution } = categories[parseInt(i / 3)];
-        select('.chart-tooltip')
-          .style('opacity', 1)
-          .text(`${TITLE_MAPPING[name]} ${value}/${maxContribution}`);
-      })
-      // On mouse move - move category tooltip
-      .on('mousemove', () => {
-        select('.chart-tooltip')
-          .style('top', (event.clientY - HEIGHT + 10) + 'px')
-          .style('left', (event.clientX) + 'px');
-      })
-      // On mouse out - hide category tooltip
-      .on('mouseout', () => {
-        select('.chart-tooltip')
-          .style('opacity', 0);
-      });
-
-    // Adding title and subtitle
-    const text = svg.append('g')
-      .attr('text-anchor', 'middle')
-      .attr('transform', `translate(${WIDTH / 2}, ${HEIGHT / 2})`);
-
-    // Adding title - X%
-    text.append('text')
-      .attr('y', 4)
-      .attr('class', 'chart-title')
-      .text(chartData.finalScore);
-
-    // Adding subtitle - OUT OF 100
-    text.append('text')
-      .attr('y', 24)
-      .attr('class', 'chart-subtitle')
-      .text('OUT OF 100');
-  }
-
-  toggleLegend () {
-    this.setState({ legend: !this.state.legend });
-  }
-
-  render () {
-    const { categories, submissionId } = this.props.chartData;
-    let legendToggler;
-    let legend;
-
-    if (this.state.legend) {
-      legendToggler = (
-          <button className="open" type="button" aria-pressed="true">
-              Hide Legend
-              <svg className="right-icon rotated" aria-hidden="true" focusable="false">
-                  <use xlinkHref="#chevron-down"/>
-              </svg>
-          </button>
-      );
-      legend = categories.map(({ name, value, maxContribution }, index) => {
-        return (
-          <li key={name} className='legend-axis'>
-            <button onClick={() => this.redirectToCategory(submissionId, name)}>
-              <span className={`legend-axis-color ${name}`} />
-              &nbsp;
-              <span className='legend-axis-title'>{TITLE_MAPPING[name]}</span>
-              &nbsp;
-              <span className='legend-axis-value'>{`${value}/${maxContribution}`}</span>
-            </button>
-          </li>
-        );
-      });
-    } else {
-      legendToggler = (
-        <button type="button" aria-pressed="false">
-            Show Legend
-            <svg className="right-icon" aria-hidden="true" focusable="false">
-                <use xlinkHref="#chevron-down"/>
-            </svg>
-        </button>
-      )
-    }
-
-    return (
-      <div className='chart'>
-        <svg className='score-chart' role='img' aria-labelledby='titleID descID' focusable="false" />
-        <div className='chart-tooltip off' />
-        <div className='chart-legend-toggler' onClick={this.toggleLegend}>{legendToggler}</div>
-        <ul className='chart-legend'>{legend}</ul>
-      </div>
-    );
-  }
-}

package/js/components/SideNav/Chart/__tests__/ScoreChart.test.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json'
-import { default as ScoreChart } from "../ScoreChart";
-
-const CHART_DATA = {
-    finalScore: 50,
-    submissionId: 'x',
-    categories: [
-        { name: 'quality', value: 30, maxContribution: 60 },
-        { name: 'aci', value: 15, maxContribution: 30 },
-        { name: 'ia', value: 5, maxContribution: 10 }
-    ]
-};
-
-describe('ScoreChart component', () => {
-    const wrapper = mount(<ScoreChart chartData={CHART_DATA} />);
-
-    it('should match snapshot', () => {
-        const tree = shallowToJson(wrapper);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('should render svg', () => {
-        const target = wrapper.find('svg');
-        expect(target).toHaveLength(1);
-    });
-});

package/js/components/SideNav/Chart/__tests__/__snapshots__/ScoreChart.test.js.snap

@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScoreChart component renders final score 1`] = `
-<ScoreChart
-  chartData={
-    Object {
-      "categories": Array [
-        Object {
-          "maxContribution": 60,
-          "name": "quality",
-          "value": 30,
-        },
-        Object {
-          "maxContribution": 30,
-          "name": "aci",
-          "value": 15,
-        },
-        Object {
-          "maxContribution": 10,
-          "name": "ia",
-          "value": 5,
-        },
-      ],
-      "finalScore": 50,
-      "submissionId": "x",
-    }
-  }
-/>
-`;
-
-exports[`ScoreChart component should match snapshot 1`] = `
-<ScoreChart
-  chartData={
-    Object {
-      "categories": Array [
-        Object {
-          "maxContribution": 60,
-          "name": "quality",
-          "value": 30,
-        },
-        Object {
-          "maxContribution": 30,
-          "name": "aci",
-          "value": 15,
-        },
-        Object {
-          "maxContribution": 10,
-          "name": "ia",
-          "value": 5,
-        },
-      ],
-      "finalScore": 50,
-      "submissionId": "x",
-    }
-  }
-/>
-`;

package/js/components/SideNav/Chart/index.js

@@ -1 +0,0 @@
-export { default as ScoreChart } from './ScoreChart';

package/js/components/SideNav/Content/CmsContent.jsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import axios from 'axios';
-import cookie from 'cookie';
-import { NavLinkContainer, NavLinkBack, NavLinkDrawer, NavLinkInline, CmsReportLink } from '../Links';
-import { PracticeDetails } from '../Details';
-
-const CmsContent = ({ isExpanded, config }) => {
-    const linkClass = isExpanded ? "link-inline" : "link-collapsed";
-
-    return (
-        <div className="sidebar-content alt-style">
-            {isExpanded &&
-                <div>
-                    <div className="alt-style-header">
-                        <NavLinkBack
-                            icon="chevron-left"
-                            url="/user/dashboard"
-                            label="Account Dashboard"
-                            showLabel={isExpanded} />
-                        <hr />
-                        <PracticeDetails practiceName={config.practiceName} practiceTin={config.practiceTin} />
-                    </div>
-                    <div className="cms-header">
-                        <p className="quality-title">Quality Data Reporting</p>
-                        <p className="quality-subtitle">CMS Web Interface</p>
-                    </div>
-                    <hr />
-                </div>
-            }
-            <NavLinkContainer
-                className="alt-style-nav"
-                listOfLinks={[
-                    <NavLinkInline
-                        icon="dashboard"
-                        className={`${linkClass} light`}
-                        url={config.urls.viewProgress}
-                        label="View Progress"
-                        showLabel={isExpanded}
-                    />,
-                    <CmsReportLink
-                        isExpanded={isExpanded}
-                        rightIcon="chevron-down"
-                        leftIcon="report-data"
-                        url={config.urls.reportData}
-                        className={`${linkClass} light`}
-                        label="Report Data"
-                        disabled={config.isSubmissionWindowClosed}
-                        days={config.dueInDays}
-                        measures={config.measuresComplete}
-                        isTrialPeriod={config.isTrialPeriod}
-                        trialPeriodEnd={config.trialPeriodEnd}
-                    />,
-                    <NavLinkInline
-                        icon="details"
-                        className={`${linkClass} light`}
-                        url={config.urls.viewReports}
-                        label="View Reports"
-                        showLabel={isExpanded}
-                    />,
-                    <NavLinkDrawer
-                        isExpanded={isExpanded}
-                        rightIcon="chevron-down"
-                        leftIcon="clinicians"
-                        className={`${linkClass} light`}
-                        label="Manage Group"
-                        listOfLinks={[
-                            { url: config.urls.manageClinics, label: "Manage Clinics" },
-                            { url: config.urls.manageProviders, label: "Manage Providers" }
-                        ]}
-                        disabled={config.isSubmissionWindowClosed}
-                    />,
-                    <NavLinkInline
-                        icon="help-support"
-                        className={`${linkClass} light one-line`}
-                        url={config.urls.faq}
-                        label="Frequently Asked Questions"
-                        showLabel={isExpanded}
-                    />
-                ]}
-            />
-        </div>
-    );
-}
-
-export default CmsContent;

package/js/components/SideNav/Content/FeedbackContent.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { NavLinkContainer, NavLinkBack, NavLinkInline, NavLinkDrawer } from '../Links';
-import { PracticeDetails } from '../Details';
-
-const FeedbackContent = ({
-    isExpanded,
-    config: {
-        openDrawersByDefault,
-        practiceId,
-        practiceName,
-        practiceTin,
-        individualNpi,
-        listOfPractices,
-        listOfOrganizations,
-        linkActiveFunc
-    } = {}
-}) => {
-    const linkClass = isExpanded ? "link-inline" : "link-collapsed";
-
-    return (
-        <div className="sidebar-content">
-            {isExpanded &&
-                <div>
-                    <NavLinkBack
-                        icon="chevron-left"
-                        url="/user/dashboard"
-                        label="Account Dashboard"
-                        showLabel={true} />
-                    <hr />
-                    <PracticeDetails
-                        practiceName={practiceName}
-                        practiceTin={practiceTin}
-                        listOfPractices={listOfPractices}
-                        listOfOrganizations={listOfOrganizations}
-                    />
-                    <hr />
-                </div>
-            }
-            <NavLinkContainer
-                listOfLinks={[
-                    <NavLinkInline
-                        icon="clinicians"
-                        className={linkClass}
-                        url={`/user/dashboard/practice/${practiceId}/individual`}
-                        label="Connected Clinicians"
-                        showLabel={isExpanded} />,
-                    <NavLinkInline
-                        icon="group-reporting"
-                        className={linkClass}
-                        url={`/user/dashboard/practice/${practiceId}/group`}
-                        label="Group Reporting"
-                        showLabel={isExpanded} />,
-                    <NavLinkDrawer
-                        isExpanded={isExpanded}
-                        openByDefault={openDrawersByDefault}
-                        rightIcon="chevron-down"
-                        leftIcon="star-icon"
-                        className={linkClass}
-                        label="Performance Feedback"
-                        linkActiveFunc={linkActiveFunc}
-                        listOfLinks={[
-                            { url: `/user/submissions/feedback/${practiceId}/${individualNpi}`, label: "Overview" },
-                            { url: `/user/submissions/feedback/${practiceId}/${individualNpi}/quality`, label: "Quality" },
-                            { url: `/user/submissions/feedback/${practiceId}/${individualNpi}/aci`, label: "Advancing Care Information" },
-                            { url: `/user/submissions/feedback/${practiceId}/${individualNpi}/ia`, label: "Improvement Activities" },
-                            { url: `/user/submissions/feedback/${practiceId}/${individualNpi}/cost`, label: "Cost" },
-                            { url: `/user/submissions/feedback/${practiceId}/${individualNpi}/care`, label: "Care Coordination" },
-                        ]}
-                    />
-                ]}
-            />
-        </div>
-    );
-};
-
-export default FeedbackContent;