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

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/fixtures/apps.yaml

@@ -137,6 +137,9 @@ categories:
       - title: Manage My Device(s)
         url: https://desktop.pingone.com/boston/Selection?cmd=devices
         mfa_device_required: true
+      - title: Add a preferred/chosen name
+        url: /preferred-chosen-name
+        # target: _blank
 
   - title: Support Tools
     apps:

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/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 {

services-js/access-boston/src/client/preferred-chosen-name/components/AlertComponent.tsx

@@ -0,0 +1,65 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ReactNode } from 'react';
+
+interface AlertProps {
+  text: ReactNode;
+}
+
+/**
+ * AlertComponent to display a success message with a left-aligned icon and message text.
+ */
+export default function AlertComponent({ text }: AlertProps): JSX.Element {
+  return (
+    <div css={ALERT_CONTAINER_STYLING}>
+      <div css={ICON_CONTAINER_STYLING}>
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" css={ICON_STYLING}>
+          <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" fill="#00A91C"/>
+        </svg>
+      </div>
+      <div css={TEXT_CONTAINER_STYLING}>{text}</div>
+    </div>
+  );
+}
+
+const ALERT_CONTAINER_STYLING = css({
+  display: 'flex',
+  alignItems: 'center',
+  padding: '16px 40px 16px 30px',
+  backgroundColor: '#ecf3ec',
+  borderLeft: '10px solid #00a91c',
+  color: '#000000',
+  width: '100%',
+  lineHeight: '1.5rem',
+  borderRadius: '0px',
+
+  '@media (max-width: 600px)': {
+    alignItems: 'start',
+    padding: '10px'
+
+  },
+});
+
+const ICON_CONTAINER_STYLING = css({
+  marginRight: '16px',
+  display: 'flex',
+
+  '@media (max-width: 600px)': {
+    marginRight: '8px',
+    padding: '2px'
+  },
+});
+
+const ICON_STYLING = css({
+  width: '32px',
+  height: '32px',
+
+  '@media (max-width: 600px)': {
+    width: '20px',
+    height: '20px',
+  },
+});
+
+const TEXT_CONTAINER_STYLING = css({
+  flex: 1,
+});

services-js/access-boston/src/client/preferred-chosen-name/components/QuestionComponent.tsx

@@ -0,0 +1,162 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/core';
+
+import { MouseEvent, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  allowProceed?: boolean;
+  quitBtn?: boolean;
+  handleProceed?: (ev: MouseEvent) => void;
+  handleStepBack?: (ev: MouseEvent) => void;
+  handleReset?: (ev: MouseEvent) => void;
+  handleQuit?: (ev: MouseEvent) => void;
+  nextButtonText?: string;
+  prevBtnText?: string;
+  quitBtnText?: string;
+  extraButtons?: ReactNode;
+}
+
+/**
+ * Container component to provide layout for a single question screen,
+ * as well as “back”, “start over”, and “next question” buttons if their
+ * related handlers are passed in as props to this component.
+ */
+export default function QuestionComponent(props: Props): JSX.Element {
+  const {
+    children,
+    nextButtonText,
+    prevBtnText,
+    allowProceed,
+    handleProceed,
+    handleStepBack,
+    handleQuit,
+    quitBtn,
+    quitBtnText,
+    extraButtons
+  } = props;
+
+  return (
+    <div css={CONTAINER_STYLING}>
+      {children}
+
+      <div css={BUTTON_CONTAINER_STYLING}>
+        {handleStepBack && (
+          <button
+            type="button"
+            className="btn btn--b-sm btn-alt btn--w"
+            onClick={handleStepBack}
+          >
+            {prevBtnText || 'Go Back'}
+          </button>
+        )}
+
+        {extraButtons} {/* Renders Clear button next to Continue */}
+
+        {handleProceed && (
+          <button
+            type="button"
+            className="btn btn--b-sm"
+            onClick={handleProceed}
+            disabled={!allowProceed}
+          >
+            {nextButtonText || 'Continue'}
+          </button>
+        )}
+
+        {quitBtn && handleQuit && (
+          <div className="successView__Btn-wrapper">
+            <button
+              type="button"
+              className="btn btn--b-sm"
+              onClick={handleQuit}
+            >
+              {quitBtnText || 'Quit'}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const CONTAINER_STYLING = css({
+  display: 'flex',
+  flexDirection: 'column',
+  lineHeight: '1.5rem',
+  margin: 'auto',
+  width: '100%',
+
+  p: {
+    lineHeight: '2rem',
+  }
+});
+
+const BUTTON_CONTAINER_STYLING = css({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  gap: '8px',
+  width: '100%',
+  padding: '0 40px',
+  boxSizing: 'border-box',
+  marginBottom: '2rem',
+  overflow: 'hidden',
+
+  '.btn': {
+    fontSize: '22px',
+    fontFamily: 'Montserrat',
+    height: '60px',
+    padding: '12px 20px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+  },
+
+  '.btn-alt': {
+    color: '#005EA2',
+    background: 'white',
+    borderRadius: '4px',
+    border: '2px solid #005EA2',
+  },
+
+  '.successView__Btn-wrapper': {
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+
+    '.btn': {
+      width: '240px',
+    },
+
+    '@media (max-width: 600px)': {
+      '.btn': {
+        fontSize: "14px",
+        height: "40px",
+        width: '100%'
+      },
+      height: "50px"
+    }
+  },
+
+  // Mobile adjustments
+  '@media (max-width: 600px)': {
+    padding: '0 10px',
+    gap: '4px',
+    marginBottom: '10px',
+
+    // Adjusts buttons to share space equally on mobile and appear smaller
+    '& > .btn, & > .btn-alt': {
+      flex: 1,
+      width: '100%',
+      maxWidth: '100%',
+      height: '45px',
+      fontSize: '14px',
+      margin: '10px 0px',
+      boxSizing: 'border-box',
+    },
+  },
+});