❤
npm
Sign UpSign In

ccm-react-components-qa

1.2.6 • Public • Published

CCM React Components

QA NPM

Production NPM

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 Component

<CCMAddress />

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

Name Required Type Description Example
muleApiUrl YES string URL pointing to the CCM API that hits the '/autocomplete' and /verify endpoints 
muleApiUrl={"https://address-api"}
muleClientId YES string Client ID that is used to authenticate API access 
muleClientId={"abc123"}
muleClientSecret YES string Client Secret that is used to authenticate API access 
muleClientSecret={"a1b2c3d4e5"}
onAddressCollected YES func Callback function that is sent a data payload upon the collection of an address from the component 
onAddressCollected={
  (address) => this.handleOnAddressCollected(address)
}
onAddressInvalidated YES func Callback function that is called when the address in the input fields becomes invalidated 
onAddressInvalidated={
  () => this.handleOnAddressInvalidated()
}
address NO object Optional address object containing the values to inject into component inputs 
address={{
  line1:              '123 Fake St',
  city:               'Fakesville',
  state:              'FL',
  zip:                '12345'
}}
checkForValidAddressUponMount NO boolean Optional bolean that will cause the business logic to trigger a check to verify an address passed into the component if set to true (defaults to false) 
checkForValidAddressUponMount={true}
componentDisabled NO boolean Optional bolean that will cause all of the inputs to be disabled if set to true (defaults to false) 
componentDisabled={false}
includeGeocodeData NO boolean Optional bolean that will cause the business logic where if set to true will trigger an extra call to the /verify endpoint to gather Latitude / Longitude and include it in the valid address payload (defaults to false) 
includeGeocodeData={true}
showProcessingMessages NO boolean Optional bolean that will show address processing message if set to true (defaults to false) 
showProcessingMessages={true}
showRequiredAsterisks NO boolean Optional bolean that will show asterisks in the input field labels if set to true (defaults to false) 
showRequiredAsterisks={true}
statesOverride NO array Array of state objects you wish to populate the dropdown with; object properties must be abbr and name 
statesOverride={[
  {
    abbr: "CO",
    name: "Colorado"
  },
  {
    abbr: "FL",
    name: "Florida"
  },
  {
    abbr: "WI",
    name: "Wisconsin"
  }
]}
onStatesFetched NO function Callback function that is passed the states after it is fetched from source for the consumption of the user of the component for cacheing purposes 
onStatesFetched={statesFetched => this.handleStatesFetched(statesFetched)}
style NO object Optional object containing the values of names referring to the user's custom classes used to override the component's default CSS classes 
style={{
  mainWidth:          'override-main-width',            // Main width of the component and input fields
  modalWidth:         'override-modal-width',           // Width of the pop up autosuggestion modal
  borderRadius:       'override-border-radius',         // Border radius for the input fields
  generalInputStyle:  'override-input-style',           // Class Name to apply to all input fields
  line1InputStyle:    'override-line1-style',           // Class Name to apply to the LINE1 input field
  cityInputStyle:     'override-city-style',            // Class Name to apply to the CITY input field
  stateInputStyle:    'override-state-style',           // Class Name to apply to the STATE input field
  zipInputStyle:      'override-zip-style',             // Class Name to apply to the ZIP input field
  requiredAsterisk:   'override-required-asterisk',     // Class Name to apply to the optional asterisk that denotes input fields to be required
}}
title NO string Optional string to inject and display at the top of the component (defaults to empty string) 
title={"Mailing Address"}

CCM Pricing Calculator Component

<CCMPricingCalculator />

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

Name Required Type Description Example
muleApiUrl YES string URL pointing to the CCM API that hits the '/autocomplete' and /verify endpoints 
muleApiUrl={"https://address-api"}
muleClientId YES string Client ID that is used to authenticate API access 
muleClientId={"abc123"}
muleClientSecret YES string Client Secret that is used to authenticate API access 
muleClientSecret={"a1b2c3d4e5"}
htfApiUrl YES string URL pointing to the HTF API that hits the '/users' endpoint of the '/prices' API Controller 
htfApiUrl={"https://htf-api-dev.herokuapp.com"}
agentId YES string Value of Agent ID that already has access to the HTF API 
agentId={"1234"}
auth YES string Value to send along as the auth header when making the request to HTF API 
auth={"A1aB2bC3cD4dE5eF6fG7g"}
onPlanOptionsFetched YES function Callback function that accepts the plan options to be eventually displayed by the consumer of this component 
onPlanOptionsFetched={options => this.handlePlanOptionsFetched(options)}
statesOverride NO array Array of state objects you wish to populate the dropdown with; object properties must be abbr and name 
statesOverride={[
  {
    abbr: "CO",
    name: "Colorado"
  },
  {
    abbr: "FL",
    name: "Florida"
  },
  {
    abbr: "WI",
    name: "Wisconsin"
  }
]}
showFullStateNames NO boolean Flag to denote whether to show the full state names; false shows abbreviations (defaults to 'false') 
showFullStateNames={true}
onStatesFetched NO function Callback function that is passed the states after it is fetched from source for the consumption of the user of the component for cacheing purposes 
onStatesFetched={statesFetched => this.handleStatesFetched(statesFetched)}
debugMode NO boolean Flag to denote whether to show debugged console logs (defaults to 'false') 
debugMode={true}

CCM State Picker Component

<CCMStatePicker />

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

Name Required Type Description Example
onStateSelected YES function Callback function that accepts the selectedState to be eventually be used by the consumer of the component 
onStateSelected={state => this.handleStateSelected(state)}
muleApiUrl YES string URL pointing to the CCM API that hits the '/autocomplete' and /verify endpoints 
muleApiUrl={"https://settings-api"}
muleClientId YES string Client ID that is used to authenticate API access 
muleClientId={"abc123"}
muleClientSecret YES string Client Secret that is used to authenticate API access 
muleClientSecret={"a1b2c3d4e5"}
defaultOptionText NO boolean Flag to denote whether to show debugged console logs (defaults to 'false') 
debugMode={true}
disabled NO boolean Flag to denote whether or not the component is disabled (defaults to 'false') 
disabled={true}
selectedState NO string Value of the selected state in the dropdown 
selectedState={"WI"}
showFullStateNames NO boolean Flag to denote whether to show the full state names; false shows abbreviations (defaults to 'false') 
showFullStateNames={true}
statesOverride NO array Array of state objects you wish to populate the dropdown with; object properties must be abbr and name 
statesOverride={[
  {
    abbr: "CO",
    name: "Colorado"
  },
  {
    abbr: "FL",
    name: "Florida"
  },
  {
    abbr: "WI",
    name: "Wisconsin"
  }
]}
onStatesFetched NO function Callback function that is passed the states after it is fetched from source for the consumption of the user of the component for cacheing purposes 
onStatesFetched={statesFetched => this.handleStatesFetched(statesFetched)}
style NO object Optional object containing the values of names referring to the user's custom classes used to override the component's default CSS classes 
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 NO boolean Flag to denote whether to show the full state names; false shows abbreviations (defaults to 'false') 
showFullStateNames={true}
showFullStateNames NO boolean Flag to denote whether to show the full state names; false shows abbreviations (defaults to 'false') 
showFullStateNames={true}

License

CCM © ccm-innovation

Readme

Keywords

none

Package Sidebar

Install

npm i ccm-react-components-qa

Repository

gitlab.com/ccm-innovation/ccm-react-components

Homepage

gitlab.com/ccm-innovation/ccm-react-components#readme

Weekly Downloads

0

Version

1.2.6

License

MIT

Unpacked Size

5.16 MB

Total Files

6

Last publish

Collaborators

  • christian-care-ministry
Try on RunKit
Report malware