Ccm-react-components-qa NPM

CCM React Components

Production

Overview
Demo
Installation
Components Included

Overview

This library houses a series of React components utilized throughout the suite of our CCM products. The inspiration behind this component library is to promote UX consistency across our products.

Demo

Demo Library

Installation

npm install ccm-react-components

CCM Address Component

<CCMAddress />

Details
Demo
Basic Usage
Props

Details

This component has been built to normalize how we collect addresses throughout all of CCM's products built using React.

Demo

CCM Address Demo

Basic Usage

  import { CCMAddress } from 'ccm-react-components';

  const CCMAddressDemo = () => (
    <CCMAddress
      // Required Props
      muleApiUrl={"https://address-api"}
      muleClientId={"abc123"}
      muleClientSecret={"a1b2c3d4e5"}
      onAddressCollected={
        (address) => this.onAddressCollected(address)
      }
      onAddressInvalidated={
        () => this.onAddressInvalidated()
      }
      // Optional Props
      address={{
        line1:                '123 Fake St',
        city:                 'Fakesville',
        state:                'FL',
        zip:                  '12345'
        latitude:             '43.645074',
        longitude:            '-115.993081',
        verified:             true,
      }}
      checkForValidAddressUponMount={true}
      componentDisabled={false}
      includeGeocodeData={true}
      showProcessingMessages={true}
      showRequiredAsterisks={true}
      statesOverride={[
        {
          abbr: "CO",
          name: "Colorado"
        },
        {
          abbr: "FL",
          name: "Florida"
        },
        {
          abbr: "WI",
          name: "Wisconsin"
        }
      ]}
      onStatesFetched={statesFetched => this.handleStatesFetched(statesFetched)}
      style={{
        mainWidth:            'override-main-width',
        modalWidth:           'override-modal-width',
        borderRadius:         'override-border-radius',
        generalInputStyle:    'override-input-style',
        line1InputStyle:      'override-line1-style',
        cityInputStyle:       'override-city-style',
        stateInputStyle:      'override-state-style',
        zipInputStyle:        'override-zip-style',
        requiredAsterisk:     'override-required-asterisk'
      }}
      title={"Mailing Address"}
    />
  )

Props

CCM Pricing Calculator Component

<CCMPricingCalculator />

Details
Demo
Basic Usage
Props

Details

This component has been built to collect the minimum information needed in order to fetch plan options for a household.

Demo

CCM Pricing Calculator Demo

Basic Usage

  import { CCMPricingCalculator } from 'ccm-react-components';

  const CCMPricingCalculator = () => (
    <CCMPricingCalculator
      // Required Props
      muleApiUrl={"https://address-api"}
      muleClientId={"abc123"}
      muleClientSecret={"a1b2c3d4e5"}
      htfApiUrl={"https://htf-api.herokuapp.com"}
      agentId={"1234"}
      auth={"A1aB2bC3cD4dE5eF6fG7g"}
      onPlanOptionsFetched={options => this.handlePlanOptionsFetched(options)}
      // Optional Props
      statesOverride={[
        {
          abbr: "CO",
          name: "Colorado"
        },
        {
          abbr: "FL",
          name: "Florida"
        },
        {
          abbr: "WI",
          name: "Wisconsin"
        }
      ]}
      showFullStateNames={true}
      onStatesFetched={statesFetched => this.handleStatesFetched(statesFetched)}
      debugMode={false}
    />
  )

Props

CCM State Picker Component

<CCMStatePicker />

Details
Demo
Basic Usage
Props

Details

This component has been built to be used as a dropdown picker that fetches statesto choose from given credentials to hit a Mule API.

Demo

CCM State Picker Demo

Basic Usage

  import { CCMStatePicker } from 'ccm-react-components';

  const CCMStatePicker = () => (
    <CCMStatePicker
      // Required Props
      onStateSelected={state => this.handleStateSelected(state)}
      muleApiUrl={"https://settings-api"}
      muleClientId={"abc123"}
      muleClientSecret={"a1b2c3d4e5"}
      // Optional Props
      defaultOptionText={"Please select a state..."}
      disabled={false}
      selectedState={'WI'}
      showFullStateNames={true}
      showRequiredAsterisk={true}
      statesOverride={[
        {
          abbr: "CO",
          name: "Colorado"
        },
        {
          abbr: "FL",
          name: "Florida"
        },
        {
          abbr: "WI",
          name: "Wisconsin"
        }
      ]}
      onStatesFetched={fetchedStates => this.handleCacheStaets(fetchedStates)}
      style={{
        borderRadius:       'override-border-radius',         // Border radius for the input fields
        generalInputStyle:  'override-input-style',           // Class Name to apply to all input field
        requiredAsterisk:   'override-required-asterisk',     // Class Name to apply to the optional asterisk that denotes input fields to be required
        titleStyle:         'override-title-style',           // Class Name to apply to the title above the drop down input
      }}
      onBlur={state => this.handleStateBlur(state)}
    />
  )