BrandingBinding.jsx

/**
* Merges together Colors and BrandingImages into a single 
* coherent branding structure.
* 
* Using the function `brandingFromRedux` in `mapStateToProps` will give you 
* a single object containing all the branding colors and images. If you return the
* object that we generate here (possibly with some other additions) as the `props` for 
* your component, then you can use whatever you want from the branding colors and images
* without having to think about defaulting or wiring up additional fields or whatever.
* 
* eg: https://github.com/BeeWell/development/blob/b6a88ae0fbba096169df293caa107d802ede6d54/patient-mobile/mobile/bsncAppExpo/src/components/CareplanWelcome.js#L122
const mapStateToProps = (reduxState) => {
  const providerKey = "patientData.providerCode";
  const providerCode = _.get(reduxState, providerKey, "BEEWELL");

  return { primary: _.get(Colors, [providerCode, "primary"]),
           secondary: _.get(Colors, [providerCode, "secondary"]),
           tertiary: _.get(Colors, [providerCode, "tertiary"]),
           profile1: _.get(BrandingImages, [providerCode, "profile1"]),
           profile2: _.get(BrandingImages, [providerCode, "profile2"]),
           profile3: _.get(BrandingImages, [providerCode, "profile3"]),
           iconImage: _.get(BrandingImages, [providerCode, "icon"]),
         };
};
* becomes:
const mapStateToProps = brandingFromRedux
* 
* And if you would like to provider more properties in addition to branding, you can do this:
const mapStateToProps = (reduxState) => {
  const brandingProps = brandingFromRedux(reduxState);
  return _.merge(brandingProps, {other,props,go,here});
};
*/
import _ from "lodash";
import * as BrandingColors from '../res/styling/Colors'; // Adjusts these paths as necessary
import * as BrandingImages from './Images';      // Adjust this path as necessary

export function brandingFromRedux(reduxStore) {
  // Configuration values
  const providerKey = "patientData.providerCode";
  const defaultProviderCode = "BEEWELL";
  
  // Get the code and the branding data for the provider
  const providerCode = _.get(reduxState, providerKey, defaultProviderCode); 
  const brandingData = _.get(BrandingColors, providerCode, {}); 
  const brandingImages = _.get(BrandingImages, providerCode, {});
  
  // Now get the BEEWELL branding data, because that's what we will use as a default
  const beewellData = _.get(BrandingColors, defaultProviderCode, {});
  const beewellImages = _.get(BrandingImages, defaultProviderCode, {});
  
  // Figure out what we mean when we say "logo" or "logoImage"...
  const logo = _.find([
    brandingImages.logo, brandingImages.logoImage, 
    beewellImages.logo, beewellImages.logoImage
  ]); 
  
  // Provide some safety from this popular misspelling.
  const terciary = _.find([
    brandingData.tertiary, brandingData.terciary,
    beewellData.tertiary, beewellData.terciary,
    brandingData.secondary, beewellData.secondary
  ]);
  
  // Now create the unified object
  return _.mergeDeep({}, 
                     beewellImages, beewellData, 
                     {tertiary: terciary, terciary, logoImage:logo, logo}, // Aliases, data fix-ups, etc.
                     brandingImages, brandingData
                    ); 
}