CCM React Components

QA

Production

• Overview
• Demo
• Installation
• Components Included
  • CCM Address
  • CCM Pricing Calculator
  • CCM State Picker

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

Components Included

• CCM Address (<CCMAddress/>)
• CCM Pricing Calculator (<CCMPricingCalculator/>)
• CCM State Picker (<CCMStatePicker/>)

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)}
    />
  )

Props

License

CCM © ccm-innovation