@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 |