[Dev] Create a frontend for the new Create APD page

[mirano-darren]

Describe the task here and link or add dependencies to any applicable issues...

We are implementing a new workflow for creating a new APD. This page will show when the "Create new" button on the APD dashboard is clicked. Refer to the design tickets and Figma for details of how it should look.

Design ticket(s) - #3687 Figma - https://www.figma.com/file/hJpKHKU6fz5J0Z7fisSwa2/eAPD-MMIS-2022?node-id=414%3A10804

Notes:

• Modifications to the new APD Overview page are out of the scope of this ticket.

Inline Validation Notes:

• Mirrors subform pattern. Validation appears on blur.

Test Cases: Validation:	Given	When	Then
APD Type field	on-blur	This field is required and cannot be blank. Should have inline validation with the error message: Select an APD Type
Is this APD an Update? field	on-blur	This field is required and cannot be blank. Should have inline validation with the error message: Indicate whether this APD is an update.
Medicaid Business Areas field	on-blur	This field is required and cannot be blank. Should have inline validation with the error message: Select at least one Medicaid Business Area.
create APD page	At least one field is left blank	Create an APD button should be unclickable, grayed out, and have a tooltip on hover. The tooltip should have the language: All fields are required to create an APD.
Is this APD an update? field	user selects "Yes this is an update"	Subsection should appear asking if the update is a Annual update or an As needed update. If left blank it should have the validation error message: Select an update type.
Medicaid Business Areas field	user selects "Other" as an option	A textbox should appear asking the user to document the other business area. If this field is left blank, it should have the validation error message: Provide an other Medicaid Business Area(s)

When creating a new APD:	Given	When	Then
APD Dashboard	user clicks the Create New button	Should redirect the user to the new create APD page
Create APD page	user chooses to create a HITECH APD	page should not include Medicaid Business Areas
Create APD page	user chooses to create an MMIS APD	page should include Medicaid Business Areas
A filled out create APD page, HITECH selected	user clicks the Create APD button	Should redirect to the normal HITECH APD builder; APD Overview
A filled out create APD page, MMIS selected	user clicks the Create APD button	Should redirect to the normal HITECH APD builder; APD Overview
create APD page	user clicks the Cancel button	Should close the page, redirect to the APD dashboard and no APD should be added to the dashboard.
APD Type field	user is choosing between HITECH or MMIS	Both selections should have a tooltip next to their name, triggered when hovered. HITECH tooltip: Health Information Technology for Economic and Clinical Health Implementation APD. MMIS tooltip: Medicaid Management Information System Implementation APD
Create new APD page	MMIS IAPD feature flag is turned off	MMIS IAPD should not be listed as an option in APD type
Create new APD page	MMIS IAPD feature flag is turned on	MMIS IAPD should be listed as an option in APD type

This task is done when...

• [ ] a HITECH/MMIS APD can be created with this new workflow

[akuas]

Updated Closing Notes as of September 20, 2022 Final Designs

1. The page is called “Create a New Advanced Planning Document (APD)” when you are creating the APD. The page is called “APD Overview,” once an APD is created and when you return to the page. It appears on top of the side nav and will be the first page folks see after creating an APD.
2. Validation in Create a New Advanced Planning Document required all fields to be complete before continuing like a subform. Validation in APD Overview behaves like other pages in the builder and will be triggered by the admin check.
3. State Priorities and Scope is the old MMIS APD Overview without FFY.
4. The page starts off with a progressive disclosure, meaning we will only show the “What type of APD are you creating?” field and branch following fields, according to their selection
5. What type of APD are you creating?
   1. Alert disappears once they have created the APD
   2. If users want to change their selection after creating an APD, they would have to start a new APD.
   3. Changing from the HITECH IAPD to MMIS IAPD field selection would change your view (available fields).
   4. Both options come with a tooltip. When you hover over the tooltip it will define HITECH IAPD and MMIS IAPD acroymn.
   5. This field is in its intermediate state. When MMIS PAPD, OAPD and E&E are available, we will break up the field by funding source (HITECH, MMIS & E&E) and APD type (planning, implementation, and operations).
   6. Selecting HITECH IAPD opens up the APD name, FFY, and Update Type fields.
   7. Selecting MMIS IAPD makes APD name, FFY, Is this APD an update (Update Type if you select yes) and Medicaid Business Areas available.
6. APD Name: Puts name on header like before when you create an APD and can be revised from the header or on this page after creating an APD
7. FFY: Moved from old APD Overview
   1. Validation is the same with the page level validation.
   2. Two FFY selected as a default. Typically, we don’t pre-select options but the APD and export breaks if you dont have FFY, so it’s important to keep a selection.
8. Is this an update: Available for MMIS only.
   1. Will be used to gather data on what types of APD folks are creating. ‘Yes’ option expands to provide ‘Update Type,’ which is required if you select yes for ‘Is this an update.’
9. Medicaid Business Area: The Medicaid MES Certification Repository will direct you to the CMS Certification GitHub: https://cmsgov.github.io/CMCS-DSG-DSS-Certification/ . This list is subject to change so we will need a way to keep it updated. Eligibility and Enrollment is removed from the list. We may bring it back when E&E is available. MES Business areas are like meta tags like APD updates, at the moment. For MVP, it will not trigger a change in help text and fields in the same way the Funding Source/APD type field will be. So, the business areas can be changed after creating a new APD. Also we don't need to add mes business areas for HITECH because it is automatically HIT.
10. Cancel will direct you back to the dashboard and delete progress of this form. (this is the same as the subforms). The ‘cancel’ button disappears in APD Overview (once you have created an APD and are returning to the page)
11. The Create an APD button is disabled until you complete the form. It will have a tooltip indicating that all fields are required to create an apd when hovered over in its disabled state.

@Sun-Mountain @mirano-darren @jeromeleecms @thetif @itsonlydio for awareness

[akuas]

@SGilliamA1M For awareness, this is the first dev ticket for Create New APD.

[SGilliamA1M]

Awesome, thanks Akua!

On Wed, Sep 21, 2022 at 1:36 PM Akua Amponsah @.***> wrote:

@SGilliamA1M https://github.com/SGilliamA1M For awareness, this is the first dev ticket for Create New APD.

— Reply to this email directly, view it on GitHub https://github.com/CMSgov/eAPD/issues/4209#issuecomment-1254020733, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3BCYYFWFOOEZ7LBQGQSQ2DV7NBRZANCNFSM54AJRVMQ . You are receiving this because you were mentioned.Message ID: @.***>

-- Sherry Gilliam Lead UX Designer (443) 373-1426 www.A1MSolutions.com http://www.a1msolutions.com/

[thetif]

update the APD model to have the following new fields

const apdSchema = new mongoose.Schema({
  ...,
  apdType: {
    type: String,
    enum: ["hitech", "mmis"],
    required: true,
  },
  ...,
  apdOverview: { // already exists
    ...,
    updateStatus: {
      isUpdateAPD: Boolean,
      annualUpdate: Boolean,
      asNeededUpdate: Boolean
    },
    medicaidBusinessAreas: {
      waiverSupportSystems: Boolean,
      assetVerificationSystem: Boolean,
      claimsProcessing: Boolean,
      decisionSupportSystem_dataWarehouse: Boolean,
      electronicVisitVerification: Boolean,
      encounterProcessingSystem_managedCareSystem: Boolean,
      financialManagement: Boolean,
      healthInformationExchange: Boolean,
      longTermServicesSupports: Boolean,
      memberManagement: Boolean,
      pharmacyBenefitManagement_pointOfSale: Boolean,
      programIntegrity: Boolean,
      providerManagement: Boolean,
      thirdPartyLiability: Boolean,
      other: Boolean,
      otherMedicaidBusinessAreas: String
    }
  },
  ...,
}

I'm using the long names for these fields in medicaid business areas, you can make them shorter, but not too short for clarity down the road.