Merge pull request #1022 from CityOfBoston/DIG-4670B

DIG-4670: (BUG) Registration Workflow
CityOfBoston · Aug 7, 2024 · 031e84b · 031e84b
2 parents 1ea719d + 4417545
commit 031e84b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 14 deletions.
diff --git a/services-js/access-boston/src/integration/register-device.testcafe.ts b/services-js/access-boston/src/integration/register-device.testcafe.ts
@@ -83,7 +83,8 @@ test.only('Device registration', async t => {
 
   const donePage = new PageModel();
   await t
-    .expect(donePage.sectionHeader.withText('YOU’RE ALL SET!').exists)
+    // .expect(donePage.sectionHeader.withText('YOU’RE ALL SET!').exists)
+    .expect(donePage.sectionHeader.withText('JUST A MOMENT!').exists)
     .ok('On done page');
 
   // Now we go home to make sure that the session was destroyed. This should

diff --git a/services-js/access-boston/src/pages/done.tsx b/services-js/access-boston/src/pages/done.tsx
@@ -1,12 +1,44 @@
 import React from 'react';
+// import React, {useState, useRef, useEffect } from 'react';
 import Head from 'next/head';
 
 import { SectionHeader, PUBLIC_CSS_URL } from '@cityofboston/react-fleet';
 
 import AppWrapper from '../client/common/AppWrapper';
 
-export default class DonePage extends React.Component {
+interface Props {}
+interface State {
+  acctFetched: boolean;
+}
+
+export default class DonePage extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { acctFetched: false };
+  }
+
+  async componentDidMount() {
+    // TODO: DIG-4670: (BUG) Registration Workflow
+    // THIS IS PACK TO THIS BUG, PROPER FIX NEEDS TO HAPPEN ON
+    // THE SECURITY TEAMS Servers ...
+    // Error = User CRUD update is slow to be available on the endpoint (api)
+    const delay = async (ms: number) => {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    };
+
+    await delay(13000);
+    this.setState({ acctFetched: true });
+  }
+
   render() {
+    const { acctFetched } = this.state;
+
+    const headerTxt = acctFetched ? 'You’re all set!' : 'Just a moment!';
+    const loginTxt = acctFetched
+      ? `Log in now to
+              continue.`
+      : `You can use the button below to Log in a moment.`;
+
     return (
       <>
         <Head>
@@ -16,17 +48,22 @@ export default class DonePage extends React.Component {
 
         <AppWrapper>
           <div className="b b-c b-c--hsm">
-            <SectionHeader title="You’re all set!" />
+            <SectionHeader title={headerTxt} />
 
             <div className="t--intro m-v500">
-              You’re now set up with your Access Boston account. Log in now to
-              continue.
+              You’re now set up with your Access Boston account. {loginTxt}
             </div>
 
             <div className="ta-r">
-              <a href="/" className="btn">
-                Log In
-              </a>
+              {acctFetched ? (
+                <a href="/" className="btn">
+                  Log In
+                </a>
+              ) : (
+                <button className={`btn`} aria-disabled disabled>
+                  Log In
+                </button>
+              )}
             </div>
           </div>
         </AppWrapper>

diff --git a/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap b/services-js/access-boston/src/stories/__snapshots__/Storyshots.test.ts.snap
@@ -4168,25 +4168,27 @@ exports[`Storyshots DonePage default 1`] = `
       >
         <h2
           className="sh-title"
-          id="sh-2018125994"
+          id="sh-203550349"
         >
-          You’re all set!
+          Just a moment!
         </h2>
       </div>
       <div
         className="t--intro m-v500"
       >
-        You’re now set up with your Access Boston account. Log in now to continue.
+        You’re now set up with your Access Boston account. 
+        You can use the button below to Log in a moment.
       </div>
       <div
         className="ta-r"
       >
-        <a
+        <button
+          aria-disabled={true}
           className="btn"
-          href="/"
+          disabled={true}
         >
           Log In
-        </a>
+        </button>
       </div>
     </div>
   </main>