You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

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

Package Overview
Dependencies
Maintainers
8
Versions
159
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

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


Version published
Weekly downloads
704
decreased by-50.04%
Maintainers
8
Created
Weekly downloads
 

Readme

Source

Table of Contents

  1. Getting Started
  2. 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.

    <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:

    <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

    <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

  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.

FAQs

Package last updated on 29 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc