Storefront - Enterprise Installation and Setup

Installation

Install Storefront - Enterprise and redux state container using either npm or yarn.

npm

npm i --save @boldpenguin/sdk-{auth,core,http,redux,requests,types,utility,web-components,websockets} redux

yarn

yarn add @boldpenguin/sdk-{auth,core,http,redux,requests,types,utility,web-components,websockets} redux

Prerequisites

• clientId
  • Your account team will provide you with a unique Client ID per Bold Penguin environment.
• googleApiToken
  • Your Google API key for use with street view.
  • This is used to assist in populating address information.

You will need to define these properties to connect to the Bold Penguin backend. You can do this by including them during initialization, or by placing them in environment.ts, .environment, or the equivalent file for your framework.

Example

export const environment = {
  production: false,
  clientId: "my-app-id",
  googleApiToken: "ABCxxxx123xXxabc99999abcXXXXXXXXXXM7WEE",
};

Framework Integration

Include the Custom Elements in your Framework

The steps for including the custom elements will vary based on your framework. You can follow the examples below for Angular and React. For other frameworks, or to use the components without a framework, you can find more examples in the Stencil.js documentation. ​

// src/declarations.d.ts

declare namespace JSX {
  interface IntrinsicElements {
    "bp-sdk-root": any;
    "bp-sdk-question-set-navigation-container": any;
    "bp-sdk-question-set-container": any;
    "bp-sdk-quote-request-container": any;
    "bp-sdk-message-container": any;
    "bp-sdk-analytics-container": any;
  }
}

// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Load Polyfills and Web Components

Storefront - Enterprise includes a main function that you use to load the components in the collection.

// src/index.js
​
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { applyPolyfills, defineCustomElements } from '@boldpenguin/sdk-web-components/dist/loader';
​
applyPolyfills().then(() => {
  defineCustomElements().then(() => {
    import('@boldpenguin/sdk-core').then(() => {
      ReactDOM.render(
        <React.StrictMode>
          <header className="navbar navbar-dark bg-dark">
            <h1 className="navbar-brand">Storefront - Enterprise</h1>
          </header>
          <App />
        </React.StrictMode>,
        document.getElementById('root')
      );
    });
  });
});

// src/main.ts
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
import {
  applyPolyfills,
  defineCustomElements,
} from "@boldpenguin/sdk-web-components/dist/loader";
if (environment.production) {
  enableProdMode();
}
applyPolyfills().then(() => {
  defineCustomElements(window);
  platformBrowserDynamic().bootstrapModule(AppModule);
});

Initialization

Once loaded, you will need to initialize Storefront - Enterprise and establish the websocket connections to the Bold Penguin backend. Note that initialization of the window object must complete before using any of the underlying web components. These two steps can consume the environment information you defined above or you can supply the prerequisite information directly.

Bold Penguin supports connection to the following pre-defined backend environments:

• alpha
• beta
• prod

To initialize Storefront - Enterprise:

import { init } from "@boldpenguin/sdk-core";
init({
  clientId: environment.clientId,
  env: environment.environmentFlag,
  googleApiToken: environment.googleApiToken,
});

Initialization Options

Option Parameter	Description	Optional?	Default	Allowed
clientId	Storefront - Enterprise API Key	No
env	Bold Penguin backend environment	Yes	prod	alpha, beta, prod
googleApiToken	API token if you would like to use google places autocomplete	Yes	None (autocomplete will be disabled)
options	Web components configuration	Yes	See below
analytics	Analytics configuration	Yes	Analytics disabled by default	See Storefront - Enterprise Analytics

Web components options

You can optionally pass an object of the following shape while initializing Storefront - Enterprise. If you don't, the default options will be used:

import { QuoteRequestRequestTypes } from "@boldpenguin/sdk-types";
import { init } from "@boldpenguin/sdk-core";

const customComponentsOptions = {
  enableQuestionSetNavigation: true,
  enableOfflineQuotes: false,
  quoteStatusFilter: [QuoteRequestRequestTypes.completed],
};

init({
  clientId: environment.clientId,
  env: environment.environmentFlag,
  googleApiToken: environment.googleApiToken,
  options: customComponentsOptions,
});

Default web component options

Component Options	Description	Default
enableQuestionSetNavigation	Enables the ability to navigate using the <bp-sdk-question-set-navigation>	true
enableOfflineQuotes	Storefront - Enterprise will fetch offline carriers that have an appetite for the current application form	false
quoteStatusFilter	An array of statuses of quotes returned from the backend that the front-end should display (see Quote Request Types for valid options)	[QuoteRequestRequestTypes.completed]

HTML

Minimum elements

These are the minimum elements required to load Storefront - Enterprise. You must layer additional elements to create and load application forms or provide other functionality.​

<bp-sdk-root>
  <bp-sdk-message-container />
  <bp-sdk-question-set-navigation-container />
  <bp-sdk-question-set-container />
  <bp-sdk-quote-request-container />
</bp-sdk-root>

Name	Functionality
bp-sdk-root	Registers bp-sdk-core and hosts redux instance
bp-sdk-message-container	Displays alerts and information related to the application form
bp-sdk-question-set-navigation-container	Facilitates navigation of application form
bp-sdk-question-set-container	Displays active question set
bp-sdk-quote-request-container	Displays quote results

​

Example

  <div>
    <bp-sdk-root>
      <bp-sdk-analytics-container>
        <bp-sdk-message-container>
        <div>
          <div>
            <aside>
              <bp-sdk-question-set-navigation-container />
            </aside>
            <main>
              <section >
                <bp-sdk-question-set-container />
              </section>
              <section>
                <bp-sdk-quote-request-container />
              </section>
            </main>
          </div>
        </div>
      </bp-sdk-analytics-container>
    </bp-sdk-root>
  </div>

From here you can layer in controls to create and load forms or other components as necessary.

<div>
  <label for="app-form-id">App Form ID:</label>
  <input
    type="text"
    id="app-form-id"
    name="app-form-id"
    [ngModel]="appFormId"
    (ngModelChange)="updateAppForm($event)"
  />
</div>
<div>
  <button type="button" (click)="handleAppFormLoad()">Load App Form</button>
  <button type="button" (click)="newAppForm()">New App Form</button>
</div>