npm package: @halo-media/ts-timed-ticketing-widget
Description: 1. [Getting Started](#getting-started) 2. [Working on this library](#working-on-this-library)
Latest version: 1.0.17

# Table of Contents

1. [Getting Started](#getting-started)
2. [Working on this library](#working-on-this-library)

# Getting started

## How to use the widget in any HTML page

1. We need to define where the widget is going to be rendered. In your page, add a div element where you want to render the app. Make sure the element has the `id` attribute set.

   ```html
   <div id="timed-ticketing-container"></div>
   ```

2. We need to import this package, the base stylesheet and the react scripts. To do this, under the `<head>` tag in your page add the following code:

   ```html
   <script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
   <script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/@halo-media/ts-timed-ticketing-widget@latest/dist/index.umd.js"></script>
   <link href="https://unpkg.com/@halo-media/ts-timed-ticketing-widget@latest/dist/style.css" rel="stylesheet" />
   ```

3. Finally, we can configure and render the app. Add the following script right before the end of the body of your page

   ```html
   <script type="module">
     const Checkout = window['ts-timed-ticketing-widget'];

     const rootElement = document.getElementById(
       'timed-ticketing-container', // Make sure this value matches the `id` of the div element created in the first step
     );

     if (rootElement && config) {
       // Here goes your config
       Checkout.render({
         element: rootElement,
         baseUrl: '',
         clientId: '',
         siteId: '',
         eventSlug: '',
         square: {
           appId: '',
           locationId: '',
         },
       });
     }
   </script>
   ```

## Test your config

You can test if you config works by trying to load it in the demo site [here](https://ts-tt-widget.herokuapp.com)

# Working on this library

Make sure you have Node.js v16 and NPM v8 or above installed on your machine.
The project uses ViteJS to generate the bundle and for the development server.

- To start the development server: `npm run start:dev`

- To run test suite: `npm run test`

- To build: `npm run build`

## How to use the library while developing other projects

After cloning this repo, you need to link the library

1. Inside this repository, run `npm run build` to make sure you are using the latest changes and then `npm link`

2. Go to the project where you want to use this library, and run `npm link @halo-media/ts-timed-ticketing-widget`

3. Build while listening for changes with: `npm run build:watch`

Thats all.

## FAQ

**Q: Why is React and ReactDOM marked as devDependencies in package.json?**

A: This package is meant to be used as a library to build Checkouts. For that reason we use Vite's "library" mode which **does not** bundle React and ReactDOM. We still need them as npm dependency for development so we can avoid working exclusively with `npm link`.

**Q: What does the `api` folder store?**

A: `api` contains all the API clients that are being used in the project and that we are likely to use in other projects.

These API clients should be ready to extract into a its own repository anytime.

**Q: What can be considered a service?**

A: Services are the bridge the closes any communication gap between the app components and external systems like REST APIs. For example, `timed-ticketing.service` is a service that enables the app to communicate with TicketSocket's Timed Ticketing API.

**Q: Whats the difference between `components` and `containers`?**

A: The concept of `components` and `containers` comes from an old redux convention.Components inside the `components` folder are made for maximum reusability and fully unaware of the context where they are being used. In the other hand, components in the `containers` folder can connect to the redux store.