Products Embed

Display a list of products.

Installation

// with npm
npm install @b2bfinance/products-embed

// with yarn
yarn add @b2bfinance/products-embed

Usage

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@material-ui/styles";
import { EmbedWrapper, theme } from "@b2bfinance/products-embed";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <EmbedWrapper
        products={[]}
        productsLimit={10}
        filters={[]}
        cta={"Get Deal"}
        provider={null}
        onMoreDetails={null}
        onApply={null}
      />
    </ThemeProvider>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Products

Products must be an array of objects matching the Product type below.

type Product = {
  id: String;
  type: String;
  issuer: String;
  title: String;
  brand: String;
  product: String;
  description: String;
  highlighted: Boolean;
  labels: String[];
  columns: {
    label: String;
    value: String;
  }[];
  detailed: {
    title: String;
    rows: {
      label: String;
      value: String;
    }[];
  }[];
  feature_point: String;
  links: {
    apply: String;
    logo: String;
  };
  meta: {
    faded: Boolean;
    confirm: {
      description: String;
      heading: String;
    };
  };
};

Filters

Filters must be an array of objects matching the Filter type below.

type Filter = {
  title: String;
  key: String;
  multiChoice: Boolean;
  selected: String[];
  choices: {
    label: String;
    value: String;
  }[];
};