Configure a Widget to Use Buying and Billing APIs

After you build a widget, you update your application to communicate with the Buying and Billing APIs. To do so, you must determine the location from which the data should be retrieved.

In the plans widget example, assume that the promotionOffering data is in the Redux store. To get the data from the Redux data store into your Plans UI component, you export a connect component. For example:

export default connect(getPromotionOffering)(Plans);

This component acts as wrapper around your UI component and binds your component to the specific state located in the Redux store. It supplies the plan information as props to your UI component.

You then pass the getPromotionOffering selector to connect the Plans widget to the specific state in the Redux store. Once you connect your widget, any changes to the props or the Redux state results in rendering of the UI component again to implement those changes.

Once you complete this configuration, the /plugin/components/plans/index.js file for the getPromotionOffering selector looks similar to the following:

import React from 'react';
import Styled from '@oracle-cx-commerce/react-components/styled';
import {connect} from '@oracle-cx-commerce/react-components/provider';
import {getPromotionOffering} from '@oracle-dx4c-buying/common/selector';
import Plan from '../plan-feature';
import css from './styles.css';
 
 
function Plans(props) {
  const {promotionOfferings} = props;
 
  return (
    <Styled id="PlanFeatures" css={css}>
      <div>
        <div className="plan-features-container">
          {promotionOfferings &&
            promotionOfferings.map(promotion => {
              return (
                <div key={`promotion_${promotion.id}`}>
                  <Plan promotion={promotion} {...props} />
                </div>
              );
            })}
        </div>
      </div>
    </Styled>
  );
}
 
export default connect(getPromotionOffering)(Plans);

The Communications Open Storefront Framework provides a number of selectors that you can use to connect your components to various parts of the Redux state. You can find them in the @oracle-dx4c-buying/common/selector/index.js file. If you can't find a selector that meets your needs, you can create your own selector. For more information, see the Create Selector topic in this chapter.

You can also use the useSelector hook to obtain part of the Redux state information.