Table of Contents

1. Introduction
2. Installation
3. Importing the component
4. Peer Dependencies
5. Props
6. Events
7. Contributing

pie-ai-suggestions

pie-ai-suggestions is a Web Component built using the Lit library.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.

Installation

To install pie-ai-suggestions in your application, run the following on your command line:

# npm
$ npm i @justeattakeaway/pie-ai-suggestions

# yarn
$ yarn add @justeattakeaway/pie-ai-suggestions

For full information on using PIE components as part of an application, check out the Getting Started Guide.

Importing the component

JavaScript

// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import { PieAiSuggestions } from '@justeattakeaway/pie-ai-suggestions';

// If you don't need to reference the imported object, you can simply
// import the module which registers the component as a custom element.
import '@justeattakeaway/pie-ai-suggestions';

React

// React
// For React, you will need to import our React-specific component build
// which wraps the web component using ​@lit/react
import { PieAiSuggestions } from '@justeattakeaway/pie-ai-suggestions/dist/react';

[!NOTE] When using the React version of the component, please make sure to also include React as a peer dependency in your project.

Peer Dependencies

[!IMPORTANT] When using pie-ai-suggestions, you will also need to include a couple of dependencies to ensure the component renders as expected. See the PIE Wiki for more information and how to include these in your application.

Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | itemName | string | '' | The name of the menu item with AI suggestions | | texts | AiSuggestionsTexts | - | UI text strings for the component | | sections | AiSuggestionsSections | {} | Configuration for AI suggestion sections (tags, abv, allergens, gtin) | | intro | Intro | undefined | Optional intro dialog configuration | | isOpen | boolean | false | Controls whether the modal is displayed |

See defs.ts for complete TypeScript definitions.

Sections

The component supports four optional section types:

| Section | Purpose | |---------|---------| | tags | Dietary information tags (vegan, vegetarian, etc.) | | abv | Alcohol by volume percentage | | allergens | Allergen information with confirmation modal | | gtin | Product barcode identification |

Events

| Event | Description | |-------|-------------| | pie-ai-suggestions-submit | Fired when user submits or rejects suggestions | | pie-ai-suggestions-close | Fired when the component is closed | | pie-ai-suggestions-error | Fired when an error occurs |

Usage

In your markup or JSX, you can then use these to set the properties for the pie-ai-suggestions component:

<!-- Native HTML -->
<pie-ai-suggestions
    itemName="Pepsi can"
    .texts="${textsConfig}"
    .sections="${sectionsConfig}"
    ?isOpen="${true}"
    @pie-ai-suggestions-submit="${handleSubmit}">
</pie-ai-suggestions>

<!-- JSX -->
<PieAiSuggestions
    itemName="Pepsi can"
    texts={textsConfig}
    sections={sectionsConfig}
    isOpen={true}
    onPieAiSuggestionsSubmit={handleSubmit}
/>

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.