@comparaonline/ui-offer-details

> Package purpose

Stats

StarsIssuesVersionUpdatedCreatedSize
@comparaonline/ui-offer-details
6.1.07 months ago3 years agoMinified + gzip package size for @comparaonline/ui-offer-details in KB

Readme

@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
aboutTranslate string to be set as a title of about tab undefined string
hideBuyButton if true won't render the button false boolean

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.