webbenefitsdesignproductengineux v1.0.1

ProductEngineUX

A ProductEngine React-UI and utility library.

DOCUMENTATION TODOS:

• types
• callback functions
  • wire types to components/method params & return types
• cleanup, reformatting

Table of Content

• ProductEngineUX
  • Table of Content
  • Features
  • Install
  • env Variables
  • IE11 Compatibility
  • Callback Functions
    • onInitializeQuestions
    • onSaveAnswers
    • onRetrieveDocs
    • onSubmitApp
  • Testmode Install
    • ProductEngineUX
    • ProductEngineUX-package-test

Features

• 📦 Re-usable ProductEngine React components out of the box.
• ⚙️ ProductEngine utility functions.

TODO: // Update to new NPM package

Install

npm install @wbdcorp/productengineux

yarn add @wbdcorp/productengineux

env Variables

• REACT_APP_NODE_ENV // REQUIRED: (development | staging)

• REACT_APP_ENCRYPTION_KEY // REQUIRED {string}

• REACT_APP_LOCAL_URI // base url for endpoints (example: https://localhost:7999)

• REACT_APP_CONTEXT // (example: engine)

• REACT_APP_MULE_URI // (example: 'https://ut-b2b.cnoinc.com/ut-cno-wbd-eapi/api')

• REACT_APP_SOURCE_SYSTEM_ID // (header)
• REACT_APP_PARENT_MESSAGE_ID // (header) example: dsjakflksd
• REACT_APP_CLIENT_ID // (header)
• REACT_APP_CLIENT_SECRET // (header)

REACT_APP_NODE_ENV

development - middleware with logging, redux devtools, persists encrypted redux state into sessionStorage w/ rehydration on reload staging - development with all endpoints pointing to REACT_APP_MULE_URI production - no logging // inactive for now

IE11 Compatibility

Most functionality should work out-of-the-box. However, IE 11 does not allow users to open blob URL's by default.

Enable Blob URL's

This package displays PDF documents using generated JS Blob object URL's. These must be trusted explicitly, or IE11 will refuse to download and display them.

1. Navigate to Internet Options -> Security tab -> Trusted sites -> Sites

2. Add blob to the list of trusted sites.

Callback Functions

TODO: Remove section when inline-documentation is done for callback functions

onInitializeQuestions

onInitializeQuestions = () => ({
  //    config?, // Optional param for additional answers for additional control of questions
  product,
  stateAbbr,
  bootstrapObject, // JSON object containing census information
})

onSaveAnswers

answersArray: { reference: *, value: * } , ...

inputs: { product, stateAbbr }

mockOnSaveAnswers = (answerArray, inputs) => {
  const URI = process.env.REACT_APP_PRODUCT_ENGINE_URI
  const CONTEXT = process.env.REACT_APP_CONTEXT
  const { product, stateAbbr } = inputs
  const req = { answers: answerArray, product, state: stateAbbr }

  return this.fetchPOSTWithErrorHandling(`${URI}/${CONTEXT}/questions`, req)
}

parseJSON = (response) => {
  return new Promise((resolve) =>
    response.json().then((json) =>
      resolve({
        status: response.status,
        ok: response.ok,
        json,
      }),
    ),
  )
}

fetchPOSTWithErrorHandling = (uriPath, req) => {
  return new Promise((resolve, reject) => {
    fetch(uriPath, {
      method: 'POST',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
      body: JSON.stringify(req),
    })
      .then(this.parseJSON)
      .then((response) => {
        if (response.ok) {
          return resolve(response.json)
        }
        return reject(response.json)
      })
      .catch((error) => {
        // Network error
        return reject(error.message)
      })
  })
}

onRetrieveDocs

answersArray: { reference: *, value: * } , ...

inputs: { product, stateAbbr, signedDocs }

onRetrieveDocs = (answerArray, inputs) => {
  const URI = process.env.REACT_APP_PRODUCT_ENGINE_URI
  const CONTEXT = process.env.REACT_APP_CONTEXT

  const { product, stateAbbr, signedDocs } = inputs
  const req = {
    answers: answerArray,
    product,
    state: stateAbbr,
    applicantSignature: signedDocs,
  }

  return this.fetchPOSTWithErrorHandling(`${URI}/${CONTEXT}/documents`, req)
}

onSubmitApp

answersArray: { reference: *, value: * } , ...

forms: //TODO

inputs: { product, stateAbbr, signedDocs }

onSubmitApp = (answerArray, forms, inputs) => {
  const URI = process.env.REACT_APP_SUBMISSION_URI

  const { product, stateAbbr, isSigned } = inputs
  const req = {
    answers: answerArray,
    forms,
    product,
    state: stateAbbr,
    applicantSignature: isSigned,
  }

  return this.fetchPOSTWithErrorHandling(`${URI}`, req)
}

Testmode Install

ProductEngineUX

git clone git@bitbucket.org:omnisource/productengineux.git

cd productengineux

npm i

Link npm package to test locally -> creates package reference to project as @wbdcorp/productengineux

npm link

Build and watch productengineux

npm run watch

ProductEngineUX-package-test

git clone git@bitbucket.org:omnisource/productengineux-package-test.git

cd productengineux-package-test

npm i

Link to previously created reference to @wbdcorp/productengineux

npm link @wbdcorp/productengineux

Set up .env variables listed above

npm run start