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>