Modal offer

The modal offer is a UI component representing Evy offers along with the list of coverage options.

This component can be triggered on-demand.

Display of the component

The modal component may also be used as a sidebar.

Usage

Props

Parameter	Type	Description
productId	`string`	The product ID, as uploaded to the Evy API
price	`number`	The quantity of product
open	`boolean`	True when it should open
placement	`string = left, right, center`	The type of modal layout. The default value is `center`.
onClose	`() => void`	Callback called when the modal is closed

Example

import { ModalOffer, useEvyContext } from "@getevy/react-sdk";
import { useCallback, useState } from "react";

export const AddToCart = ({ addProductToCart, productId, price }) => {
  const { stately } = useEvyContext();
  const [open, setOpen] = useState(false);

  const handleButtonClick = useCallback(() => {
    const selectedOffer = stately?.getSelectedOffer(productId);

    if (stately && selectedOffer) {
      stately.attachSelectedOffer(productId, 1);
      addProductToCart();
    } else {
      setOpen(true);
    }
  }, [stately]);

  const onCloseHandler = useCallback(() => {
    setOpen(false);
  }, []);

  return (
    <>
      <button onClick={handleButtonClick}>Add to cart</button>
      <ModalOffer
        productId="saw"
        price={5000}
        open={open}
        onClose={onCloseHandler}
      />
    </>
  );
};