promo-start, by Tincre.dev

A modal onboarding component for Tincre Promo. Use it in conjunction with the promo-dashboard and other Promo integration applications.

• promo-start, by Tincre.dev
  • Installation
    • Yarn
    • Npm
    • Tailwindcss Setup
    • Usage
      • Usage example
    • Backend functionality
    • Customize styling
      • Tailwindcss Typography Extras
    • Full CSS Customization Example
  • Support
  • License
  • Development
    • Releases
      • Release prep
        • Test release
      • Release latest tag

Installation

Use your favorite package manager to rock installation of promo-start.

Yarn

yarn add @tincre/promo-start@latest @tincre/promo-types@latest # -D if you want this as a dev dep

Npm

npm install @tincre/promo-start@latest @tincre/promo-types@latest # --save-dev if you want it as a dev dep

Tailwindcss Setup

Make sure you add to your tailwind.config.js configuration file a new element in the content property array.

For example,

content: [
  './src/**/*.{js,jsx,ts,tsx}',
  './src/*.{js,jsx,ts,tsx}',
  './node_modules/@tincre/promo-button/**',
  './node_modules/@tincre/promo-dashboard/**',
  './node_modules/@tincre/promo-chat/**',
  './node_modules/@tincre/promo-start/**',
],

Your configuration file will likely look different from the above, depending on your source directories.

.env.local Example

OPENAI_API_KEY=blahblah

Usage

• Import the frontend component
• Add backend functionality
• Deploy!

Usage example

import { PromoStart, dialogData } from '@tincre/promo-start';

<PromoStart
  isOpen={true}
  setIsOpen={() => null}
  dialogData={dialogData('Tincre')}
/>;

Where isOpen and setIsOpen are probably the return values from React's useState hook.

Backend functionality

Customize styling

Just add the following classes to your tailwindcss or regular css. If using tailwindcss, use an @apply directive.

#promo-start-main-dialog-container
#promo-start-main-dialog-backdrop
#promo-start-main-dialog-background-div
#promo-start-dialog-container
#promo-start-dialog-title
#promo-start-dialog-description-container
#promo-start-dialog-description
#promo-start-dialog-button-container
#promo-start-dialog-button

Full CSS Customization Example

The below customizations are an example of how to change the colors of the chat interface and button to your own liking.

A good custom example is Tincre's b00st.com brand button.

#promo-start-main-dialog-container {
  @apply relative z-10;
}
#promo-start-main-dialog-backdrop {
  @apply fixed inset-0 bg-black/25;
}
#promo-start-main-dialog-background-div {
  @apply flex min-h-full items-center justify-center p-4 text-center;
}
#promo-start-dialog-container {
  @apply w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all h-96;
}
#promo-start-dialog-title {
  @apply text-lg font-medium leading-6 text-gray-900;
}
#promo-start-dialog-description-container {
  @apply mt-2;
}
#promo-start-dialog-description {
  @apply text-sm text-gray-500;
}
#promo-start-dialog-description-title {
  @apply mt-8 text-xl font-bold;
}
#promo-start-dialog-description-content-primary {
  @apply ml-4 bg-blue-700 text-gray-50 text-2xl p-1 rounded-md;
}
#promo-start-dialog-description-content-secondary {
  @apply dark:text-gray-200;
}
#promo-start-dialog-round-number-1 {
  @apply bg-green-700;
}
#promo-start-dialog-round-number-2 {
  @apply bg-yellow-500;
}
#promo-start-dialog-round-number-3 {
  @apply bg-red-700;
}
#promo-start-dialog-button-container {
  @apply absolute bottom-0 pb-6;
}
#promo-start-dialog-button {
  @apply inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2;
}

Support

• Documentation: tincre.dev/docs
• Guides and how-tos: tincre.dev/docs/guides
• Reference docs: tincre.dev/docs/reference
• Community: community.tincre.dev

License

This code is free to use for your commercial or personal projects. It is open-source licensed under the Mozilla Public License 2.0.

You will see various headers throughout the codebase and can reference the license directly via LICENSE herein.

Development

Releases

We use npm for releases. In particular, we use npm --publish to publish.

Currently, only @thinkjrs has the ability to release.

Release prep

Prior to using npm --publish a release tag needs to be created for the library using our standard tagging practices.

Ensure that tests :white_check_mark: pass during this process prior to releasing via npm.

Test release

To do a proper release, ensure you're in the base repo directory and run npm publish . --access public --dry-run.

Release latest tag

To complete a full release to the latest npm dist-tag, ensure you're in the base repo directory and run npm publish . --access public.

🎉 That's it! 🎉