@halo-media/ts-timed-ticketing-widget

v1.0.15

Published

21 days ago

1. [Getting Started](#getting-started) 2. [Working on this library](#working-on-this-library)

Downloads

4,162

0High
0Medium
0Low

Getting started

How to use the widget in any HTML page

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.
```
<div id="timed-ticketing-container"></div>
```

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:

<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/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" />

Finally, we can configure and render the app. Add the following script right before the end of the body of your page

<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

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

Inside this repository, run npm run build to make sure you are using the latest changes and then npm link
Go to the project where you want to use this library, and run npm link @halo-media/ts-timed-ticketing-widget
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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Table of Contents

Getting started

How to use the widget in any HTML page

Test your config

Working on this library

How to use the library while developing other projects

FAQ