@comparaonline/ui-offer-details NPM

@comparaonline/ui-offer-details

Package purpose

Installation

yarn add @comparaonline/ui-offer-details

Usage

This package will show details of each offer that is passing down to the component.

import OfferDetail from '@comparaonline/ui-offer-details';
import { Offer } from '@comparaonline/offers-models';

class ContentArea extends React.Component {
  state = {
    open: false,
    offerSelected: undefined
  };

  toggleDetailDrawer() {
    this.setState({ open: !this.state.open });
  }

  openDetail(offer: Offer) {
    this.setState({ open: true, offerSelected: offer });
  }

  renderPrice(offer: Offer) {
    const { product } = offer;
    const { mainAttribute } = product;
    const { value } = mainAttribute;

    return <PriceParserComponent price={value.amount} />;
  }

  goToNextScreen(offer: Offer) {
    this.props.history.push('paymentScreen', { offer });
  }

  render() {
    const { open, offer, translate } = this.state;
    return (
      <Layout>
        <Button onClick={(offer: Offer) => this.openDetail(offer)}>
          See Product
        </Button>

        <OfferDetail
          open={open}
          offer={offer}
          renderPrice={this.renderPrice}
          onClose={this.toggleDetailDrawer}
          onSelectOffer={this.goToNextScreen}
          detailTranslate={translate('results:details:attributeDetails')}
          detailTranslate={(offer: Offer) =>
            translate('results:details:about', {
              name: offer.product.division.name
            })
          }
        />
      </Layout>
    );
  }
}

Props

This components is composed by some properties that are listed below.

Prop Name	Description	Default Value	Expected Type Value
open	This will open/close the drawer	undefined	boolean
renderPrice	this function will execute to show the price as desired	(offer: Offfer) =>	Function
onSelectOffer	this function will execute when buy button is pressed	(offer: Offer) => void	Function
onClose	this function will execute on drawer close	(offer: Offer) => void	Function
detailTranslate	string to be set as a title of details tab	undefined	string	(offer: Offer) => string
aboutTranslate	string to be set as a title of about tab	undefined	string	(offer: Offer) => string
hideBuyButton	if `true` won't render the button	false	boolean	boolean