HealthcareShared

This library was generated with Angular CLI version 8.0.3.

Code scaffolding

Run ng generate component component-name --project healthcare to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project healthcare.

Note: Don't forget to add --project healthcare or else it will be added to the default project in your angular.json file.

Build

Run ng build healthcare to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build healthcare, go to the dist folder cd dist/healthcare and run npm publish.

Running unit tests

Run ng test healthcare to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Healthcare Verbiage

To use translation keys present within the Healthcare project, you must have these keys present in your project code.

The current set of translation keys is listed below, in english and spanish. Using these translation keys allows for text to not be sent as configured input objects, but instead referenced from the HTML directly.

These do not need to be present if the associated HTML is not used in the given application.

TODO - In the future, determine a way to export the sample translation files so they can be used directly when integrated with a new application.

  "sof-healthcare": {
    "contact-menu": {
      "chat": "Open Chat",
      "close": "Close Contact Menu",
      "open": "Open Contact Menu"
    },
    "header": {
      "font": "Click to change font size"
    }
  },
    "footer": {
          "telemarketerIcon-alt": "Telemarketer Contact Me Icon"
    }

{
  "sof-healthcare": {
    "contact-menu": {
      "chat": "Conversación abierta",
      "close": "Cerrar Menú Contacto",
      "open": "Abrir menú de contacto"
    },
    "header": {
      "font": "Haga clic para cambiar el tamaño de fuente"
    }
  }
}

Healthcare Footer

<sof-healthcare-footer></sof-healthcare-footer> is a site map that goes into the footer.

Healthcare Footer Pre-requisites

Softheon Armature must be included in the package.json

Healthcare Footer Setup Overview

1. npm install
2. Import the armature Module into your app.module.ts 'imports'.
3. Add Healthcare Footer component sof-healthcare-footer to HTML component.
4. Configure Healthcare Footer component settings in the TS
   1. [showDisclaimer] - allows you to choose whether or not to include the disclaimer.
   2. [showSiteMap] - allows you to choose whether or not to include the site map.
   3. [showDisclosure] - allows you to choose whether or not to include the disclosure.
   4. [telemarketerIconUrl] - the telemarketerIcon url, if not provided it would not show up.
   5. [disclaimerTexts] - a list of text and styleClass pairs to display the texts inside the disclaimer box. The styleClass is optional.
   6. [disclosureTexts] - a list of text and styleClass pairs to display the texts inside the disclosure box. The styleClass is optional.
   7. [secondaryDisclosureTexts] - a list of text and styleClass pairs to display the texts inside the secondary disclosure box. The styleClass is optional.
   8. [siteMapComponentConfig] - the armature site map config - see armature documentation for more info on how to configure it.
   9. [stateCode] - the state code text - will only show if provided.
   10. [stateDropdownTexts] - should be 2 keys, One for the leading text before the dropdown, and the other for the mat-label of the dropdown.
   11. [showStateDropdown] - allows you to choose whether or not to include the state drop down.
   12. [currentSelectedState] - the state that should be shown in the dropdown as currently selected.
5. Output Events
   1. [stateChangeEvent] - emits the value of the user selected state from the dropdown.

Site Map Module Setup

Module.ts:

import { HealthcareModule } from 'projects/healthcare/src/public-api';

...

@NgModule({
    imports: [
        ...
        HealthcareModule
        ...
    ],
    ...
})

Healthcare Footer Typescript Component Setup

Import the necessary models from the npm package and configure the Healthcare Footer component inputs in your Angular typescript component. We recommend you do this ngOnInit().

Configure the Healthcare Footer Component Site Map configs. Below shows an example of how to setup the configs for the disclaimer, disclosure and the secondary disclosure. Refer to the Armature Site Map documentation to setup the Site Map.

  public disclaimerTexts: Array<FooterText> = [
    {
      text: 'demo.large-text',
      styleClass: 'text-blue'
    }
  ];

  public disclosureTexts: Array<FooterText> = [
    {
      text: 'demo.large-text'
    }
  ];

  public secondaryDisclosureTexts: Array<FooterText> = [
    {
      text: 'demo.large-text'
    }
  ];

  public stateDropdownTexts: Array<FooterText> = [
    {
      text: 'demo.large-text'
    }
  ];

Healthcare Footer HTML Setup

The following is an example of how to setup the Healthcare Footer

<sof-healthcare-footer [disclaimerTexts]="disclaimerTexts"
                [disclosureTexts]="disclosureTexts"
                [secondaryDisclosureTexts]="secondaryDisclosureTexts"
                [telemarketerIconUrl]=telemarketerIcon
                [siteMapComponentConfig]=siteMapComponentConfig
                [stateCode]="'demo.state-code' | translate"
                [showStateDropdown]="true"
                [stateDropdownTexts]="stateDropdownTexts"
                [currentSelectedState]="NY"
                (stateChangeEvent)="stateChanged($event)">
    <ng-container sof-healthcare-footer-center>
    </ng-container>
    <ng-container sof-healthcare-footer-disclaimer> 
        <p [innerHtml]="'demo.large-text' | translate">
        </p>
    </ng-container>
</sof-healthcare-footer>

Healthcare Footer Custom Components

It is also possible to have additional customize component in each of the sections by using ng-content.

Below is a table of each ng-content and where they reside

| Content Name | Location | | ------------------------------------------ | ------------------------------------------ | | sof-healthcare-footer-disclaimer | Below the text in disclaimer box | | sof-healthcare-footer-center | Below the site map | | sof-healthcare-footer-scroll-box | Below the text in disclosure scroll box | | sof-healthcare-footer-secondary-disclosure | Below the text in secondary disclosure box | | sof-healthcare-footer-mid-bottom | Below the secondary disclosure box | | sof-healthcare-footer-bottom | Below the state code |

PCP Selection Tool

"<sof-healthcare-pcp-selection-tool>" is a component with the function to search for PCP(Primary Care Provider).

Usage

To utilize the PCP selection tool component, you need to install "@softheon/healthcare" library, and install the dependency package, especially the "@angular/google-maps" and "@googlemaps/js-api-loader" package which are optional when install "@softheon/healthcare" library.

After install the required dependencies, then you could import the desired "PcpSelectionToolModule" from the '@softheon/healthcare/pcp-selection-tool' entry point.(NOTE: here the PCP selection tool module is at a sub entry point which is different from "@softheon/healthcare").

After the above steps, you are good to utilize the PCP selection tool, either using the "<sof-healthcare-pcp-selection-tool>" template tag or directly calling the "PCPSelectionToolComponent".

Below is a typecal implementation example of utilize the PCP selection tool embeded in the Angular Material "MatBottomSheet" container. Suppose the component named "pcp-selection.component"

Template code in "pcp-selection.component.html":

<div class="content-container">
    <h1 class="merriweather">{{'pcp-selection.title' | translate}}</h1>
    <p class="body1" [innerHTML]="'pcp-selection.description1' | translate"></p>
    <button id="btnPCPSelection" class="sof-flat-button text-to-upper-case"
        mat-flat-button color="primary" (click)="selectPCP()">
        {{'pcp-selection.button-text' | translate}}
    </button>
</div>

Typescript code in "pcp-selection.component.ts":

import { Component } from '@angular/core';
import { MatBottomSheet } from '@angular/material/bottom-sheet';
import { County } from '@softheon/healthcare';
import { PCPSelectionData, SofPCPSelectionComponent } from '@softheon/armature-pcp-tool';

@Component({
  selector: 'app-pcp-selection',
  templateUrl: './pcp-selection.component.html',
  styleUrls: ['./pcp-selection.component.scss']
})
export class PCPSelectionComponent {
  constructor(private matBottomSheet: MatBottomSheet) {}
  public selectPCP() {
    const mockMemberAddress = {
      street1: "900 Northwest 17th Street",
      street2: "",
      city: "Miami",
      county: {
        state: "FL",
        zipCode: "33130"
      } as County
    };
    const pcpSelectionData = {
      googleMapApiKey: "YOUR GOOGLE MAP API KEY",
      isProviderNameRequired: true,
      distanceOptions: [5, 10, 25, 50, 100],
      pcpSpecialtyAllTextKey: "pcp-selection.bottom-sheet.pcpSpecialtyAllText",
      pcpSpecialtyOptions: ["Family Practice", "General Practice", 
        "Internal Medicine", "Nurse Practitioner", "Physician Assistant", "Pediatricians"],
      markerAmountLimit: 3,
      enableGoogleMap: true,
      planId: "92120FL0090004-00",
      relationship: "SELF",
      memberName: "James Holden",
      residentialAddress: mockMemberAddress,
      genderPronounsMapping: [
      {
        gender:"M",
        pronounTextKey: "pcp-select.bottom-sheet.heHimPronounsText"
      },
      {
        gender: "F",
        pronounTextKey: "pcp-select.bottom-sheet.sheHerPronounsText"
      }
    ],
      preHeaderTextKey: 'pcp-selection.bottom-sheet.preHeaderText',
      headerTextKey: 'pcp-selection.bottom-sheet.headerText',
      providerNameLabelTextKey: 'pcp-selection.bottom-sheet.providerNameLabelText',
      specialtyLabelTextKey: 'pcp-selection.bottom-sheet.specialtyLabelText',
      distanceLabelTextKey: 'pcp-selection.bottom-sheet.distanceLabelText',
      noSearchResultMessageTextKey: 'pcp-selection.bottom-sheet.noSearchResultMessageText',
      searchResultSummaryTextKey: 'pcp-selection.bottom-sheet.searchResultSummaryText',
      cancelButtonTextKey: 'pcp-selection.bottom-sheet.cancelButtonText',
      searchButtonTextKey: 'pcp-selection.bottom-sheet.searchButtonText',
      selectButtonTextKey: 'pcp-selection.bottom-sheet.selectButtonText',
      newPatientsTextKey: 'pcp-selection.bottom-sheet.newPatientsText',
      existingPatientsOnlyTextKey: 'pcp-selection.bottom-sheet.existingPatientsOnlyText',
      existingPatientTooltipTextKey: 'pcp-selection.bottom-sheet.existingPatientTooltipText',
      isExistingPatientAssertTextKey: 'pcp-selection.bottom-sheet.isExistingPatientAssertText',
      languageSubtitleTextKey: 'pcp-select.bottom-sheet.languageSubtitleText'
  } as PCPSelectionData;
    
    let bottomSheetRef = this.matBottomSheet.open(SofPCPSelectionComponent, {
      data: pcpSelectionData
    });
    bottomSheetRef.afterDismissed().subscribe(
      (res) => {
        alert("Selection Complete: See returned result in console log.");
        console.log(res);
      }
  )
  }
}

For the above "genderPronounsMapping" config, it could be implement in the config service of the application that utilize this PCP tool component.

The sample language verbiage could be as follow.

{
  "pcp-selection": {
    "description1": "The Armature styling is based on the design guide located here <a target=\"blank\" href=\"https://www.figma.com/file/hkty13Kk2VquUBlTb9C9uf/Consumer-Shopping-%5b%E2%9C%8F%EF%B8%8F-WORKING-FILE%5d?type=design&node-id=5775%3A112270&mode=design&t=1Lsu1ub7CYx4jzhP-1\">Softheon Design Guide - PCP Selection Dialog</a>.",
    "title": "PCP Selection Dialog",
    "button-text": "PCP Selection",
    "bottom-sheet": {
      "preHeaderText": "Select a Primary Care Provider",
      "headerText": "Select a provider for {{memberName}}",
      "providerNameLabelText": "Provider Name",
      "specialtyLabelText": "Specialty",
      "distanceLabelText": "Distance (miles)",
      "noSearchResultMessageText": "No results matching those search terms were found.",
      "searchResultSummaryText": "Showing ({{displayResultCount}}) results {{distance}} miles from {{searchAddress}}.",
      "cancelButtonText": "CANCEL",
      "searchButtonText": "SEARCH",
      "selectButtonText": "SELECT",
      "newPatientsText": "New Patients",
      "existingPatientsOnlyText": "Existing patients only",
      "existingPatientTooltipText": "This provider only accept patients that are currently enrolled.",
      "isExistingPatientAssertText": "I am an existing patient.",
      "sheHerPronounsText": "(She/Her)",
      "heHimPronounsText": "(He/Him)",
      "languageSubtitleText": "Languages",
      "pcpSpecialtyAllText": "All"
    }
  },
}

The styles can be add to "pcp-selection.component.scss" file. The possible sample style for the bottom sheet could be as below.

/** Custom Bottom Sheet Styles */
.mat-bottom-sheet-container {
  min-width: 100vw !important;
  max-height: 90vh !important;
  border-radius: 20px 20px 0px 6px !important;
}

The above component used the Angular Material MatBottomSheet component, so don't forget to import the "MatBottomSheetModule" in your app module.