Initial "More info" content (#148)

* initial site access page

* Default nodes use help field passed instead of node ID

* what-is-epa-id.html file

* how to regsiter page

* manifest statuses page

* increment package version

package.json

@@ -1,7 +1,7 @@
 {
   "name": "the-manifest-game",
   "private": true,
-  "version": "0.9.2",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

public/default.json

@@ -7,14 +7,15 @@
         "label": "Are you registered?",
         "yesId": "doYouHaveSiteId",
         "noId": "goRegister",
-        "help": "root.html"
+        "help": "register.html"
       }
     },
     {
       "id": "goRegister",
       "data": {
         "label": "Time to Register in RCRAInfo!",
-        "children": []
+        "children": [],
+        "help": "register.html"
       }
     },
     {
@@ -23,7 +24,8 @@
       "data": {
         "label": "Do you have your site's EPA ID?",
         "yesId": "doHavePreparer",
-        "noId": "areYouVSQG"
+        "noId": "areYouVSQG",
+        "help": "what-is-epa-id.html"
       }
     },
     {
@@ -38,7 +40,8 @@
     {
       "id": "iAmVSQG",
       "data": {
-        "label": "You may not have an EPA ID. You may still use the Hybrid manifest option."
+        "label": "You may not have an EPA ID. You may still use the Hybrid manifest option.",
+        "help": "what-is-epa-id.html"
       }
     },
     {
@@ -53,13 +56,15 @@
       "data": {
         "label": "Do you have a preparer level access?",
         "yesId": "isManifestDrafted",
-        "noId": "requestPreparerAccess"
+        "noId": "requestPreparerAccess",
+        "help": "site-access.html"
       }
     },
     {
       "id": "requestPreparerAccess",
       "data": {
-        "label": "Request preparer access."
+        "label": "Request preparer access.",
+        "help": "site-access.html"
       }
     },
     {
@@ -68,13 +73,15 @@
       "data": {
         "label": "Is the manifest drafted?",
         "yesId": "areYouTSDF",
-        "noId": "draftManifest"
+        "noId": "draftManifest",
+        "help": "statuses.html"
       }
     },
     {
       "id": "draftManifest",
       "data": {
-        "label": "Draft the manifest."
+        "label": "Draft the manifest.",
+        "help": "statuses.html"
       }
     },
     {
@@ -92,13 +99,15 @@
       "data": {
         "label": "Is the manifest scheduled?",
         "yesId": "isManifestReadyForSign",
-        "noId": "scheduleManifest"
+        "noId": "scheduleManifest",
+        "help": "statuses.html"
       }
     },
     {
       "id": "scheduleManifest",
       "data": {
-        "label": "Only the TSDF can set the manifest 'Scheduled'."
+        "label": "Only the TSDF can set the manifest 'Scheduled'.",
+        "help": "statuses.html"
       }
     },
     {
@@ -107,7 +116,8 @@
       "data": {
         "label": "Is the manifest ready for signature?",
         "yesId": "signAndSubmit",
-        "noId": "ensureManifestReady"
+        "noId": "ensureManifestReady",
+        "help": "statuses.html"
       }
     },
     {
@@ -119,13 +129,8 @@
     {
       "id": "signAndSubmit",
       "data": {
-        "label": "Sign the manifest and submit for invoicing."
-      }
-    },
-    {
-      "id": "test",
-      "data": {
-        "label": "Test"
+        "label": "Sign the manifest and submit for invoicing.",
+        "help": "statuses.html"
       }
     },
     {
@@ -143,7 +148,8 @@
       "data": {
         "label": "Is the manifest scheduled?",
         "yesId": "readyForGeneratorSign",
-        "noId": "haveTsdfSetToScheduled"
+        "noId": "haveTsdfSetToScheduled",
+        "help": "statuses.html"
       }
     },
     {
@@ -158,7 +164,8 @@
     {
       "id": "scheduleManifestNonTsdf",
       "data": {
-        "label": "Once a manifest is set to scheduled, it's ready for the Generator's signature, then the initial transporters."
+        "label": "Once a manifest is set to scheduled, it's ready for the Generator's signature, then the initial transporters.",
+        "help": "statuses.html"
       }
     },
     {
@@ -176,7 +183,8 @@
     {
       "id": "haveTsdfSetToScheduled",
       "data": {
-        "label": "The TSDF needs to set the manifest to 'Scheduled' before the Generator can sign."
+        "label": "The TSDF needs to set the manifest to 'Scheduled' before the Generator can sign.",
+        "help": "statuses.html"
       }
     },
     {

public/help/guide.html

@@ -1,42 +1,38 @@
 <h2 class="text-2xl font-semibold text-black">Getting Started</h2>
-<div class="p-2 flex flex-col space-y-4">
-  <p class="text-left text-gray-900">Welcome to <b class="font-bold">The
-    Manifest Game</b>, an interactive decision tree to help you
+<div class="flex flex-col space-y-4 p-2">
+  <p class="text-left text-gray-900">
+    Welcome to <b class="font-bold">The Manifest Game</b>, an interactive decision tree to help you
     use the U.S. EPA's hazardous waste tracking system known as
-    <a
-      class="text-blue-700 underline hover:text-blue-900"
-      href="https://epa.gov/e-manifest">e-Manifest</a>.
+    <a class="text-blue-700 underline hover:text-blue-900" href="https://epa.gov/e-manifest"
+      >e-Manifest</a
+    >.
   </p>
   <p class="text-gray-900">
-    Start by answering the "Yes" or "No" questions in the boxes. As you answer
-    questions, new questions will appear based on your previous answers.
+    Start by answering the "Yes" or "No" questions in the boxes. As you answer questions, new
+    questions will appear based on your previous answers.
   </p>
   <p class="text-gray-900">
-    If you are unsure about a question, click the question mark in the question
-    box to learn more.
+    If you are unsure about a question, click the question mark in the question box to learn more.
   </p>
   <h3 class="text-xl font-bold text-black">Navigate</h3>
   <p class="text-gray-900">
-    You can move around the page by clicking and dragging anywhere on the page.
-    You can also zoom in and out by using the scroll wheel on your mouse or
-    pinching on a touch screen.
+    You can move around the page by clicking and dragging anywhere on the page. You can also zoom in
+    and out by using the scroll wheel on your mouse or pinching on a touch screen.
   </p>
   <h4 class="text-lg font-bold text-black">Mini Map</h4>
   <p class="text-gray-900">
-    The mini map in the bottom right corner shows you where you are on the
-    decision tree. You can click the mini map to quickly navigate to
-    different parts of the decision tree, and scroll to zoom in and out.
+    The mini map in the bottom right corner shows you where you are on the decision tree. You can
+    click the mini map to quickly navigate to different parts of the decision tree, and scroll to
+    zoom in and out.
   </p>
   <h4 class="text-lg font-bold text-black">Change the Layout</h4>
   <p class="text-gray-900">
-    You can change the layout of the decision tree from horizontal to vertical
-    by clicking the "Layout" button to help you visualize the decision tree in
-    different ways.
+    You can change the layout of the decision tree from horizontal to vertical by clicking the
+    "Layout" button to help you visualize the decision tree in different ways.
   </p>
   <h3 class="text-xl font-bold text-black">Share Your Decisions</h3>
   <p class="text-gray-900">
-    Once you have completed the decision tree, you can share your decisions with
-    others by clicking the "Share" button. This will generate a unique URL
-    you can share with others.
+    Once you have completed the decision tree, you can share your decisions with others by clicking
+    the "Share" button. This will generate a unique URL you can share with others.
   </p>
 </div>

public/help/register.html

@@ -0,0 +1,42 @@
+<h2 class="text-xl font-semibold">How to Register for the e-Manifest System</h2>
+<div class="flex max-w-prose flex-col space-y-4 p-2 [&>p]:text-slate-800">
+  <p class="max-w-prose">
+    You can access e-Manifest, myRCRAid, the Waste Import Export Tracking System (WIETS), Biennial
+    Report (BR), Annual Report (AR) and information on hazardous waste handlers through the RCRAInfo
+    industry application.
+  </p>
+  <p class="max-w-prose">
+    To get started, you need to complete the following steps to create a user account in RCRAInfo:
+  </p>
+  <ol class="list-outside list-decimal space-y-3 pl-[revert] text-slate-800">
+    <li>
+      Visit
+      <a href="https://rcrainfo.epa.gov" class="text-blue-500 underline visited:text-purple-700"
+        >RCRAInfo</a
+      >.
+    </li>
+    <li>
+      Click
+      <span class="rounded bg-rcraBlue px-2 py-1 text-white" aria-label="mock register link">
+        Register
+      </span>
+    </li>
+    <li>
+      Select
+      <span class="rounded bg-rcraBlue px-2 py-1 text-white" aria-label="industry register button"
+        >Industry User Registration
+      </span>
+    </li>
+    <li>Provide accurate information about yourself, such as your legal name.</li>
+  </ol>
+  <p>
+    The newly created account will start without access to your sites; you will need to request
+    access to your sites. For detailed instructions, visit the
+    <a
+      href="https://www.epa.gov/e-manifest/e-manifest-user-registration"
+      class="text-blue-500 underline visited:text-purple-700"
+    >
+      e-Manifest how to register page.
+    </a>
+  </p>
+</div>

public/help/root.html

@@ -1,16 +1,13 @@
-<div class="p-2 flex flex-col space-y-4">
-  <p class="text-left text-lg text-slate-700">Welcome to <i>The Manifest
-    Game</i>, an interactive decision tree to help you
-    make decisions when using the United Stated Environmental Protection
-    Agency's e-Manifest system to track waste.
+<div class="flex flex-col space-y-4 p-2">
+  <p class="text-left text-lg text-slate-800">
+    Welcome to <i>The Manifest Game</i>, an interactive decision tree to help you make decisions
+    when using the United Stated Environmental Protection Agency's e-Manifest system to track waste.
   </p>
-  <p class="text-left text-lg text-slate-700">
-    For additional information, please visit the <a
-    class="text-blue-700 underline hover:text-blue-900"
-    href="https://epa.gov/e-manifest">e-Manifest
-    homepage</a> on <a class="text-blue-700 underline hover:text-blue-900"
-                       href="https://epa.gov">
-    epa.gov
-  </a>.
+  <p class="text-left text-lg text-slate-800">
+    For additional information, please visit the
+    <a class="text-blue-700 underline hover:text-blue-900" href="https://epa.gov/e-manifest"
+      >e-Manifest homepage</a
+    >
+    on <a class="text-blue-700 underline hover:text-blue-900" href="https://epa.gov"> epa.gov </a>.
   </p>
 </div>

public/help/site-access.html

@@ -0,0 +1,84 @@
+<div class="flex max-w-prose flex-col space-y-4 p-2 [&>p]:text-slate-800">
+  <h2 class="text-xl font-semibold">How to Request Site Access in EPA's RCRAInfo System</h2>
+  <div class="space-y-4 p-2">
+    <p class="text-left">
+      After you register, you will need to request access to your site(s). Requests are reviewed by
+      state and EPA regulators; your request should be reviewed within 48 hours. If your request is
+      not reviewed within a reasonable timeframe, you can find contact information for state and EPA
+      regulators in RCRAInfo.
+    </p>
+    <p class="text-left">
+      RCRAInfo offers various levels of access and multiple modules that the user can utilize for a
+      given site. The roles in RCRAInfo are hierarchical, with each role encompassing the
+      permissions of the lower roles plus additional permissions. The roles include Viewer,
+      Preparer, and Certifier. Each user can hold one of these roles for each module for a site. The
+      Site Manager role is equivalent to having the Certifier role for all modules for a site. A
+      Site Manager also has the authority to approve other users for that site.
+    </p>
+  </div>
+  <h3 class="text-lg font-semibold">To obtain access to your site:</h3>
+  <div>
+    <ol class="list-outside list-decimal pl-[revert]">
+      <li>
+        <h4 class="font-semibold">Log In to RCRAInfo:</h4>
+        <div>
+          <p>
+            Visit
+            <a class="text-blue-600 visited:text-purple-600" href="https://rcrainfo.epa.gov"
+              >rcrainfo.epa.gov</a
+            >
+            and log in.
+          </p>
+          <p>Navigate to the “My Sites” tab</p>
+        </div>
+      </li>
+      <li>
+        <h4 class="font-semibold">Search for your site</h4>
+        <p>
+          Click the
+          <button class="rounded bg-rcraBlue p-1 font-bold text-white">Select Existing Site</button>
+          button and search for your site using the address or EPA ID number, if known.
+        </p>
+      </li>
+      <li>
+        <h4 class="font-semibold">Select Permission Levels:</h4>
+        <p>
+          You can select one of the below roles for each module. For the e-Manifest module, the
+          roles translate to the following permissions:
+        </p>
+        <ul class="list-outside list-disc pl-[revert]">
+          <li><strong class="text-rcraBlue">Viewer:</strong> View manifests and data.</li>
+          <li>
+            <strong class="text-rcraBlue">Preparer:</strong> Create, edit, and sign electronic
+            manifests.
+          </li>
+          <li><strong class="text-rcraBlue">Certifier:</strong> Correct and submit manifests.</li>
+        </ul>
+        <p class="max-w-prose text-slate-800">
+          In addition, you can set <strong class="text-rcraBlue">Site Management</strong> to
+          <i>active</i>
+          which will give you the Certifier role for all modules, and allow you to approve users,
+          manage user permissions and electronic signature agreements, and manage application
+          programming interface (API) credentials.
+        </p>
+      </li>
+      <li>
+        <h4 class="font-semibold">Submit the Request:</h4>
+        <p>
+          If the site already has a previous Site Manager(s), your request will be directed to them.
+          If the site does not already have a Site Manager, your request will be sent to your RCRA
+          Authorized state regulatory agency or the US EPA.
+        </p>
+      </li>
+      <li>
+        <h4 class="font-semibold">Await Approval:</h4>
+        <p>To expedite the process, make sure you registered with your work email address.</p>
+        <p>
+          If you are not approved within 48 hours, log in to RCRAInfo, and click the
+          <span class="text-blue-500">pending</span> link to bring up a list of users who are
+          authorized to approve your request and contact them.
+        </p>
+      </li>
+    </ol>
+  </div>
+</div>