Skip to content

Commit

Permalink
[EASI-2838] Help article: 2-pager meeting (#653)
Browse files Browse the repository at this point in the history
* Two Pager Meeting Component and Route init

* add TwoPageMeeting component to get started page

* wip

* Add all the copy

* implementing tne copy

* implementing tne copy

* work

* add the additional resouces copy

* more work

* fix styling and spcaing

* first attempt failed

* Add relatedarticle copmopnt

* ADd a ult function'

* DRYing the links

* adjust classnames and margin/padding for the relatedarticle componet

* adjust classnames and margin/padding for the relatedarticle component

* update snaps

* Add snapshot test

* removed PageHeading for regular heading

* update snaps

* fix italics spacing

* update snaps
  • Loading branch information
garyjzhao authored Jul 31, 2023
1 parent aa8875d commit 4dedc19
Show file tree
Hide file tree
Showing 12 changed files with 1,303 additions and 24 deletions.
67 changes: 58 additions & 9 deletions src/components/RelatedArticles/__snapshots__/index.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,14 @@
exports[`RelatedArticle matches the snapshot 1`] = `
<DocumentFragment>
<div
class="bg-primary-lighter margin-bottom-neg-7"
class="bg-primary-lighter"
>
<main
class="mint-main-content grid-container padding-y-2"
id="main-content"
role="main"
tabindex="-1"
<div
class="grid-container padding-top-4 padding-bottom-10"
data-testid="gridContainer"
>
<h2
class="margin-bottom-1"
class="margin-top-0 margin-bottom-1"
>
Related help articles
</h2>
Expand All @@ -22,7 +20,7 @@ exports[`RelatedArticle matches the snapshot 1`] = `
Below are some additional help articles that you may find useful.
</dt>
<ul
class="usa-card-group margin-y-2"
class="usa-card-group"
data-testid="CardGroup"
>
<li
Expand Down Expand Up @@ -76,8 +74,59 @@ exports[`RelatedArticle matches the snapshot 1`] = `
</div>
</div>
</li>
<li
class="usa-card desktop:grid-col-4 article article-card--isLink"
data-testid="article-card"
>
<div
class="usa-card__container radius-md shadow-2 minh-mobile padding-3"
>
<header
class="usa-card__header padding-0"
data-testid="CardHeader"
>
<h3
class="line-height-body-4 margin-bottom-1"
>
How to have a successful 2-pager meeting
</h3>
</header>
<a
class="usa-link width-fit-content display-block "
href="/help-and-knowledge/getting-started"
>
<span
aria-label="Articles under the Getting started category"
class="mint-tag article__tag bg-primary-lighter text-primary text-no-uppercase text-bold font-body-sm"
data-testid="tag"
>
Getting started
</span>
</a>
<div
class="usa-card__body padding-x-0 article__body"
data-testid="CardBody"
>
<p>
Use this article to ensure you’re fully prepared for your 2-page concept review meeting with CMMI Front Office (FO).
</p>
</div>
<div
class="usa-card__footer padding-x-0 padding-top-2 padding-bottom-0"
data-testid="CardFooter"
>
<button
aria-label="Read How to have a successful 2-pager meeting article"
class="usa-button usa-button--outline"
type="button"
>
Read
</button>
</div>
</div>
</li>
</ul>
</main>
</div>
</div>
</DocumentFragment>
`;
21 changes: 13 additions & 8 deletions src/components/RelatedArticles/index.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { CardGroup } from '@trussworks/react-uswds';
import { Link } from 'react-router-dom';
import { CardGroup, GridContainer } from '@trussworks/react-uswds';
import classnames from 'classnames';

import ArticleCard from 'components/ArticleCard';
import MainContent from 'components/MainContent';
import helpAndKnowledgeArticles from 'views/HelpAndKnowledge/Articles';

type RelatedArticlesProps = {
className?: string;
currentArticle: string;
viewAllLink?: boolean;
};

const RelatedArticles = ({
className,
currentArticle
currentArticle,
viewAllLink
}: RelatedArticlesProps) => {
const { t } = useTranslation('helpAndKnowledge');

Expand All @@ -23,16 +25,19 @@ const RelatedArticles = ({
.slice(0, 3);

return (
<div className="bg-primary-lighter margin-bottom-neg-7">
<MainContent className="grid-container padding-y-2">
<h2 className="margin-bottom-1">{t('relatedHelp')}</h2>
<div className="bg-primary-lighter">
<GridContainer className="padding-top-4 padding-bottom-10">
<h2 className="margin-top-0 margin-bottom-1">{t('relatedHelp')}</h2>
<dt className="margin-bottom-4">{t('relatedDescription')}</dt>
<CardGroup className={classnames('margin-y-2', className)}>
<CardGroup className={classnames(className)}>
{selectedArticles.map(article => (
<ArticleCard key={article.route} {...article} isLink />
))}
</CardGroup>
</MainContent>
{viewAllLink && (
<Link to="/help-and-knowledge">{t('viewAllRelated')}</Link>
)}
</GridContainer>
</div>
);
};
Expand Down
131 changes: 131 additions & 0 deletions src/i18n/en-US/helpAndKnowledge/Articles/twoPageMeeting.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
const twoPageMeeting = {
title: 'How to have a successful 2-pager meeting',
description:
'Use this article to ensure you’re fully prepared for your 2-page concept review meeting with CMMI Front Office (FO).',
summaryBox: {
title: 'Recommendations',
listItem: {
draft: 'Draft your 2-page concept paper',
start: 'Start thinking about additional resources',
review: 'The review meeting'
}
},
conceptPaper: {
introParagraph:
'A 2-page overview of a model concept may or may not include all of the elements listed below. The following is intended as a guide. Teams can focus on the most relevant and impactful information to decide if a model concept should move to the next development phase.',
stepOne: {
heading: '1. Proposed model overview and goals',
items: [
'Briefly describe the need for the model, including the challenges the target population faces',
'Describe the preliminary theory of change for the model',
'Provide background or context on if the proposed model has been tested before or is a follow-on model, incorporates learnings from external stakeholders, and/or where the concept originated (e.g., private sector, academia, state or regional efforts)'
]
},
stepTwo: {
heading: '2. High-level description of model elements',
item:
'Provide a high-level overview of key model design elements including target population, payment approach, and quality/performance measurement'
},
stepThree: {
heading:
'3. Preliminary analysis of the proposed model relative to selection criteria',
italics:
'Not all of these may be answerable early in model development/consideration',
alignment: {
bold: 'Alignment: ',
text:
'Describe how the model would advance one (or more) of the strategy refresh pillars, including, as relevant, how it will support strategy refresh drivers at a high level:',
numberedList: [
'Drive accountable care',
'Advance health equity',
'Support Innovation ',
'Address affordability ',
'Partner to achieve system transformation'
]
},
impact: {
bold: 'Impact: ',
text: 'Potential for the model to impact the following dimensions:',
list: [
'Participation – number of providers, beneficiaries, Medicare and Medicaid spending',
'Transformation – cost reduction, quality and outcomes improvements, advancements in equity and reduction in disparities, and delivery system change'
]
},
feasibility: {
bold: 'Feasibility: ',
text:
'Consider the likelihood of successful execution of the model including initial operational or feasibility limitations, and potential for scaling'
},
innovation: {
bold: 'Innovation: ',
text:
'The model provides innovation in a particular dimension – payment approach, provider type, patient population, mechanisms of transformation'
},
stakeholders: {
bold: 'Stakeholders: ',
text:
'Include a brief description of any stakeholder engagement in the model concept'
}
},
exampleSummaryBox: {
heading: 'Example 2-pagers',
text:
'While all models are different, and therefore the content within a 2-pager will vary drastically, it might be helpful to see examples of what other teams have put together for their models in the past.',
list: {
one: 'AHEAD 2-pager',
two: 'Enhancing Oncology Model 2-pager',
three: 'Innovation in Behavioral Health 2-pager',
four: 'Making Care Primary 2-pager'
},
footer: 'To view the links above, you will need access to the ',
footerLink: 'Model Resources area of SharePoint.'
}
},
additionalResources: {
intro:
'This early in the process, it can be hard for model teams to know exactly what they’ll need regarding contractor support during the model concept and design phase. Not sure where to start? Below are some things to consider.',
subheading: 'Things to consider',
list: [
'Do you need an in-house expert on data? ',
'Do you need help crunching numbers? ',
'Do you need analytics support?',
'Do you need help drafting the Innovation Center Investment Proposal (ICIP) or other documents? ',
'Do you need literature review support? ',
'Do you need rule-writing support?',
'Do you need a clinical specialist? ',
'Do you need help on a specific aspect of your model? '
],
paragraph: [
'If the answer is yes to one or more of these questions, your model would likely benefit from utilizing a pipeline contractor. CMMI generally has 2 pipeline contractors available (currently MITRE and ARDS have pipeline contracts with CMMI) that can assist model teams with various needs leading up to clearance. It’s important to note, model teams need to get approval from CMMI FO to utilize one of these contractors.',
'While it is fine to use pipeline support for 2-pager and 6-pager work and for developing ICIP content, after the ICIP clears, model teams can no longer use pipeline funding. It can take a few months to get implementation contractor support, so plan accordingly. Model teams should work with the Division of Central Contracts Services (DCCS), the Division of Systems Support, Operation & Security (DSSOS), and the Office of Acquisition and Grants Management (OAGM) for assistance with contracting needs.'
]
},
reviewMeeting: {
intro:
'After division and group leadership have reviewed and approved the 2-pager and the review meeting with CMMI FO is on the books, you may wonder, ',
italicsNowWhat: 'now what?',
subheading: {
tip: {
text: 'Tips for the meeting',
list: [
'Before the meeting, attach your 2-page concept paper to the calendar invite for your meeting with CMMI FO. We also recommend uploading your concept paper to your Model Plan within MINT.',
'Come prepared to discuss your model concept.',
'If you think you’ll need a pipeline contractor, flag this during the meeting. CMMI FO may have a preference for which contractor to use and will ultimately need to approve the request.'
]
},
outcomes: {
text: 'Possible outcomes',
paragraph: [
'Since the 2-pager meeting is still pretty high level in terms of model design, CMMI FO may have suggestions for the team to iterate on. In this case, model teams may be asked to come back for another 2-pager review after they’ve had time to ideate and address their considerations. Some concepts require multiple rounds of iteration, so don’t be discouraged if your concept isn’t approved the first time around.',
'If during the meeting CMMI FO decides the model concept is feasible, they will approve the 2-pager. Model teams will then work on ironing out additional details of their model design that will go into their 6-page concept paper. If you haven’t already started filling out a Model Plan within MINT, this would be a great time to do that. Many of the details that will go into the 6-pager concept paper are a part of the Model Plan.'
]
}
}
},
footerSummaryBox: {
title: 'Need help?',
body: 'Contact the MINT team at <1>[email protected]</1>'
}
};

export default twoPageMeeting;
7 changes: 4 additions & 3 deletions src/i18n/en-US/helpAndKnowledge/helpAndKnowledge.ts
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ const solutions: SolutionTType = {
description: `Centralized Data Exchange (CDX) is a part of the <link1>Innovation Support Platform (ISP)</link1> Suite of tools for non-ACO models; it enables CMMI-to-Participant Interoperability and application integration with other CMS systems. The Centralized Data Exchange (CDX) serves as an IT capability that enables the Innovation Center (IC) models to send and receive data with internal and external model participants using Application Programming Interfaces (APIs). It provides an improved ability to send and receive ad hoc files with internal and external users that takes advantage of modern, cloud-based technologies with one centralized file exchange.
CDX is to exchange files between authorized users. This is implemented through the concept of a shared drive where authorized users can upload files and give access to those files to other authorized users. All users have a Home folder containing a list of all the files and folders to which they have access. The home folder is the Users "default/root" folder and contains all the files and folders to which the current user has access.
The business function of CDX is a centralized data exchange to enable interoperability and provide center-wide data collection capabilities across CMMI. The exchange solution supports sending the right data, at the right time, sending the right amount, and referencing the right participants.`,
links: [
{
Expand Down Expand Up @@ -725,10 +725,10 @@ Specific to CMMI, HIGLAS has two integrated points:`,
},
healthDataReporting: {
about: {
description: `Health Data Reporting (HDR) is part of the <link1>Innovation Support Platform (ISP)</link1> Suite of tools for non-ACO models; it is a configurable, Innovation Center-wide solution that supports the collection and validation of health-related data for analysis by CMMI models.
description: `Health Data Reporting (HDR) is part of the <link1>Innovation Support Platform (ISP)</link1> Suite of tools for non-ACO models; it is a configurable, Innovation Center-wide solution that supports the collection and validation of health-related data for analysis by CMMI models.
HDR leverages CMS’ Enterprise Portal and CMMI’s IC Portlet Services for secure access and a standardized look and feel.
HDR’s Configuration Management allows model teams to define and modify performance and submission periods, change data elements to be collected across performance periods, and manage and monitor submissions.`,
links: [
{
Expand Down Expand Up @@ -1817,6 +1817,7 @@ const helpAndKnowledge = {
relatedHelp: 'Related help articles',
relatedDescription:
'Below are some additional help articles that you may find useful.',
viewAllRelated: 'View all help articles',
operationalSolutions: 'Operational solutions',
operationalSolutionsInfo:
'Learn about the CMS systems, data sources, IT tools, and other services that are available to assist with your Model Plans.',
Expand Down
2 changes: 2 additions & 0 deletions src/i18n/en-US/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import subtasks from './draftModelPlan/subtasks';
import getAccess from './helpAndKnowledge/Articles/getAccess';
import modelPlanOverview from './helpAndKnowledge/Articles/modelPlanOverview';
import sampleModelPlan from './helpAndKnowledge/Articles/sampleModelPlan';
import twoPageMeeting from './helpAndKnowledge/Articles/twoPageMeeting';
import helpAndKnowledge from './helpAndKnowledge/helpAndKnowledge';
import modelPlan from './modelPlan/plan';
import { planBasics, planBasicsMisc } from './modelPlan/planBasics';
Expand Down Expand Up @@ -78,6 +79,7 @@ const enUS = {
privacyPolicy,
readOnlyModelPlan,
sampleModelPlan,
twoPageMeeting,
subtasks,
tableAndPagination,
termsAndConditions
Expand Down
Loading

0 comments on commit 4dedc19

Please sign in to comment.