[EPIC] DIG-5136: Preferred/Chosen Name and Gender Identity for COB Em…

…ployees (#1026)

* DIG-5136: Preferred/Chosen Name and Gender Identity for COB Employees

* DIG-5226: Preferred/Chosen Name Frontend to Backend Workflow (#1027)

* DIG-5226: Preferred/Chosen Name front end to back end workflow

* DIG-5226: Basic App Setup

* DIG-5226: Basic App Setup - successView

* DIG-5226: Basic App Setup - new QuestionComponent

* DIG-5226: Basic App Setup - Setup all views + buttons

* DIG-5226: Basic App Setup - Storybook stories Added

* DIG-5136: Preferred/Chosen Name - remove storybook file

* DIG-5324: Success Screen (#1029)

* DIG-5324: Success Screen

* Update SamlAuthFake.ts

* Completed Success Screen PC view mockup

* Completed Success Screen PC view mockup

* Success Screen PC View Cleanup, Mobile View Impl

* fixed row overflow with word break wrap

* EPIC--DIG-5136: Update Snapshots

* DIG-5318: Added Welcome Screen UI Impl & Built Screenshots (#1030)

* DIG-5320: Chosen Name Screen (NEW)-COB Employees/Contractors (#1031)

* PC & Mobile View

* Fixed Mobile Styling Consistency

* DIG-5321: Confirmation Screen PC & Mobile View (#1032)

* DIG-5136: Snapshot Update

* DIG-5320: (API) Facades (#1028)

* DIG-5320: Chosen Name Screen - API Fixtures

* DIG-5320: Chosen Name Screen - Started Server Handler

* DIG-5320: Chosen Name Screen - Continue Endpoint Setup

* DIG-5320: Chosen Name Screen - Testing API

* DIG-5136: Reviewed Enhancements 11.12 (#1034)

* DIG-5136: Integrate API with UI (#1033)

* DIG-5136: Integrate API with UI

* DIG-5136: Integrate API with UI - Changes to UI and Storybook

* DIG-5136: wip#7 - upped server timeout 60s

* DIG-5413: QA Feedback (#1035)

* DIG-5413: Add a spinner for wait time on Chosen Name workflow

* DIG-5484: BPD Exclusion for Chosen name workflow (#1037)

* DIG-5413v2: QA Feedback (#1038)

* DIG-5136: Preferred/Chosen Name - fix file paths/names

---------

Co-authored-by: Kane Xu <[email protected]>

services-js/access-boston/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+## access-boston/v2024.5 (2024-10-11)
+
+### Features
+
+- Create new workflow for `Preferred/Chosen Name and Gender Identity` for COB Employees
+
+### Core
+- DIG-5226: Preferred/Chosen Name front end to back end workflow
+
+### Doc
+- 
+
+### Misc
+- 
+
+---

services-js/access-boston/Dockerfile

@@ -1,10 +1,10 @@
 # syntax=docker/dockerfile:1
-FROM node:14.19.1-alpine as build_phase
+FROM node:14.19.1-alpine AS build_phase
 
 # ARG S3_ENV_PATH='s3://cob-digital-apps-staging-config/access-boston/test'
 
 ENV WORKSPACE=access-boston
-ENV NODE_ENV development
+ENV NODE_ENV=development
 
 WORKDIR /app
 
@@ -38,11 +38,11 @@ WORKDIR /app/services-js/$WORKSPACE
 RUN yarn install --ignore-scripts
 
 # syntax=docker/dockerfile:1
-FROM node:14.19.1-alpine as deploy_phase
+FROM node:14.19.1-alpine AS deploy_phase
 
-ENV WORKSPACE access-boston
-ENV NODE_ENV development
-ENV USE_SSL true
+ENV WORKSPACE=access-boston
+ENV NODE_ENV=development
+ENV USE_SSL=true
 
 COPY --from=build_phase /app /app
 
@@ -77,7 +77,7 @@ RUN --mount=type=secret,id=aws,target=/root/.aws/credentials \
 
 EXPOSE 3000
 
-ENV NODE_ENV production
+ENV NODE_ENV=production
 
 ENTRYPOINT ["/app/scripts/service-entrypoint.sh"]
 CMD ["yarn", "start"]

services-js/access-boston/fixtures/apps.yaml

@@ -103,6 +103,19 @@ categories:
         groups:
           - SG_AB_CONFIRMID
 
+  - title: Account Settings
+    apps:
+      - title: Update Chosen Name
+        url: /preferred-chosen-name
+        # target: _blank
+        exclusions:
+          - BPD
+      - title: Change My Password
+        url: /change-password
+      - title: Manage My Device(s)
+        url: https://desktop.pingone.com/boston/Selection?cmd=devices
+        mfa_device_required: true
+
   - title: Forms / Links
     apps:
       - title: Create Sponsored Account
@@ -130,14 +143,6 @@ categories:
         groups:
           - SG_AB_FN_LIASONS_USERS
 
-  - title: Account Tools
-    apps:
-      - title: Change My Password
-        url: /change-password
-      - title: Manage My Device(s)
-        url: https://desktop.pingone.com/boston/Selection?cmd=devices
-        mfa_device_required: true
-
   - title: Support Tools
     apps:
       - title: Identity Verification

services-js/access-boston/fixtures/identityiq/LaunchWorkflow-GenerateUniqueEmail-success.json

@@ -0,0 +1,20 @@
+{
+  "status": null,
+  "requestID": "0af16f7492941b50819302bbe6173d52",
+  "warnings": null,
+  "errors": null,
+  "retryWait": 0,
+  "metaData": null,
+  "attributes": {
+    "result": {
+      "DisplayName": "Manual WebTesting",
+      "newEmail": "[email protected]",
+      "error": ""
+    },
+    "result1": "Venky"
+  },
+  "complete": false,
+  "success": false,
+  "retry": false,
+  "failure": false
+}

services-js/access-boston/fixtures/preferred-chosen-name/test/COB-Workflow-GenerateUniqueEmail/request/40000093.json

@@ -0,0 +1,7 @@
+{
+  "workflowArgs": {
+    "identityName": "40000093",
+    "preferredFirstName": "Manuelo",
+    "preferredLastName": "WebTest"
+  }
+}

services-js/access-boston/fixtures/preferred-chosen-name/test/COB-Workflow-GenerateUniqueEmail/response/40000093.json

@@ -0,0 +1,20 @@
+{
+  "status": null,
+  "requestID": "0af16f5692941e0d8192f7f62dd80335",
+  "warnings": null,
+  "errors": null,
+  "retryWait": 0,
+  "metaData": null,
+  "attributes": {
+    "result": {
+      "DisplayName": "Manuelo WebTest",
+      "newEmail": "[email protected]",
+      "error": ""
+    },
+    "result1": "Venky"
+  },
+  "retry": false,
+  "failure": false,
+  "complete": false,
+  "success": false
+}

services-js/access-boston/fixtures/preferred-chosen-name/test/COB-Workflow-PreferredNames/request/40000093.json

@@ -0,0 +1,8 @@
+{
+  "workflowArgs": {
+    "identityName": "40000093",
+    "preferredFirstName": "Manuelo",
+    "preferredLastName": "WebTest",
+    "email": "[email protected]"
+  }
+}

services-js/access-boston/fixtures/preferred-chosen-name/test/COB-Workflow-PreferredNames/response/40000093.json

@@ -0,0 +1,15 @@
+{
+  "status": null,
+  "requestID": "0af16f5692941e0d8192bf2ae1dc539c",
+  "warnings": null,
+  "errors": null,
+  "retryWait": 0,
+  "metaData": null,
+  "attributes": {
+    "status": "Success. Updated Attributes in IIQ"
+  },
+  "retry": false,
+  "failure": false,
+  "complete": false,
+  "success": false
+}

services-js/access-boston/src/client/common/AccessBostonHeader.stories.tsx

@@ -15,6 +15,7 @@ const ACCOUNT: Account = {
   mfaRequiredDate: null,
   groups: [''],
   email: '',
+  cobAgency: 'CH',
 };
 
 storiesOf('AccessBostonHeader', module).add('default', () => (

services-js/access-boston/src/client/common/AppWrapper.stories.tsx

@@ -17,6 +17,7 @@ const ACCOUNT: Account = {
   mfaRequiredDate: null,
   groups: [''],
   email: '',
+  cobAgency: 'CH',
 };
 
 storiesOf('Common/AppWrapper', module).add('default', () => (

services-js/access-boston/src/client/common/Spinner.tsx

@@ -0,0 +1,77 @@
+/** @jsx jsx */
+
+import { css, jsx, keyframes } from '@emotion/core';
+
+/**
+ * “Loading” spinner.
+ *
+ * @param {string} size // CSS font-sizes: `EM` | `REM` `px`
+ */
+export const Spinner = ({ size }) => {
+  return (
+    <div css={SPINNER_STYLING} style={{ width: size }}>
+      <svg
+        className="spinner"
+        viewBox="0 0 66 66"
+        aria-hidden="true"
+        focusable="false"
+        height={size}
+        width={size}
+      >
+        <circle
+          className="path"
+          fill="none"
+          strokeWidth="6"
+          strokeLinecap="round"
+          cx="33"
+          cy="33"
+          r="30"
+        />
+      </svg>
+    </div>
+  );
+};
+
+const DURATION = '1.4s';
+const OFFSET = '187px';
+
+const SPIN_KEYFRAMES = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(270deg);
+  }
+`;
+
+const DASH_KEYFRAMES = keyframes`
+  0% {
+    stroke-dashoffset: ${OFFSET};
+}
+
+  50% {
+    stroke-dashoffset: calc(${OFFSET} / 4);
+    transform: rotate(135deg);
+}
+
+  100% {
+    stroke-dashoffset: ${OFFSET};
+    transform: rotate(450deg);
+  }
+`;
+
+const SPINNER_STYLING = css({
+  '& > svg': {
+    animation: `${SPIN_KEYFRAMES} ${DURATION} linear infinite`,
+  },
+
+  '& .path': {
+    stroke: 'currentColor',
+    strokeDasharray: OFFSET,
+    strokeDashoffset: 0,
+    transformOrigin: 'center',
+
+    animation: `${DASH_KEYFRAMES} ${DURATION} ease-in-out infinite`,
+  },
+});

services-js/access-boston/src/client/graphql/fetch-account-and-apps.ts

@@ -22,6 +22,7 @@ const QUERY = gql`
       mfaRequiredDate
       groups
       email
+      cobAgency
     }
 
     notice {

services-js/access-boston/src/client/graphql/fetch-account.ts

@@ -16,6 +16,7 @@ const QUERY = gql`
       mfaRequiredDate
       groups
       email
+      cobAgency
     }
   }
 `;

services-js/access-boston/src/client/graphql/queries.ts

@@ -68,6 +68,7 @@ export interface FetchAccountAndApps_account {
   mfaRequiredDate: string | null;
   groups: string[] | null;
   email: string;
+  cobAgency: string | null;
 }
 
 export interface FetchAccountAndApps_notice {
@@ -121,6 +122,7 @@ export interface FetchAccount_account {
   mfaRequiredDate: string | null;
   groups: string[] | null;
   email: string;
+  cobAgency: string | null;
 }
 
 export interface FetchAccount {