saasco-sdk 0.1.44 → 0.2.3

package/package.json

@@ -1,14 +1,53 @@
 {
   "name": "saasco-sdk",
-  "version": "0.1.44",
+  "version": "0.2.3",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./support-chat": {
+      "types": "./dist/support-chat.d.ts",
+      "import": "./dist/support-chat.js",
+      "require": "./dist/support-chat.cjs"
+    }
+  },
   "dependencies": {
-    "tslib": "^2.3.0",
+    "@ai-sdk/provider-utils": "^5.0.0",
+    "@ai-sdk/react": "^4.0.2",
     "@lukeed/uuid": "^2.0.1",
-    "zod": "^3.22.4",
-    "psl": "^1.9.0",
-    "js-sha256": "^0.11.1"
-  },
-  "main": "./index.cjs.js",
-  "typings": "./src/index.d.ts",
-  "module": "./index.esm.js"
-}
+    "@radix-ui/react-slot": "^1.3.1",
+    "@shadcn/react": "^0.2.1",
+    "ai": "^7.0.2",
+    "js-sha256": "^0.11.1",
+    "psl": "^1.15.0",
+    "tslib": "^2.3.0",
+    "zod": "^4.1.12"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:css": "node ./scripts/build-widget-css.mjs",
+    "build": "pnpm build:css && tsup",
+    "build:npm": "pnpm build:css && BUILD_TARGET=npm tsup",
+    "build:cdn": "pnpm build:css && BUILD_TARGET=cdn tsup"
+  }
+}

package/README.md

@@ -1,546 +0,0 @@
-[Saasco](https://www.saasco.com) is a platform of saas apps where members only pay the infrastructure cost of what they use. As a result Saasco apps are up to 99% cheaper than traditional saas products.
-
----
-
-- [Privacy](#privacy)
-- [Getting Started](#getting-started)
-- [Automatic Page View Tracking](#automatic-page-view-tracking)
-- [Tracking Events](#tracking-events)
-- [Identifying Users](#identifying-users)
-- [Debugging and Dev](#debugging-and-dev)
-- [Reserved Properties](#reserved-properties)
-
-<br />
-
-## 🔒 Privacy
-
-By default Saasco is privacy friendly, obscuring all activity behind Anonymous IDs. However if you want to power more complex user tracking you can identify users and then all events they do will be attributed to them in your CRM. This can assist with customer support but also for things like drip campaigns and other marketing activities.
-
-## Getting Started
-
-Install by running:
-`npm install saasco-sdk`
-
-Copy your Project ID from the project settings page in Saasco:
-[https://www.saasco.com/projects/your-project/apps/dashboard/settings/project](https://www.saasco.com/projects/your-project/apps/dashboard/settings/project)
-
-Then import Saasco and initialize the lib with your Project ID.
-
-```ts
-// lib/saasco.ts
-import { Saasco } from 'saasco-sdk';
-
-export const saasco = new Saasco({ projectId: 'YOUR-PROJECT-ID' });
-```
-
-## Automatic Page View Tracking
-
-When you initialize the lib Saasco will automatically start tracking all page views in your app. By default, it tracks all URL changes, including query parameters and hash changes. You can customize this behavior using the `autoPageTracking` configuration object:
-
-```typescript
-const analytics = new Saasco({
-  projectId: 'your-project-id',
-  autoPageTracking: {
-    enabled: true, // Set to false to disable automatic page tracking
-    trackQueryParams: true, // Set to false to ignore URL query parameter changes
-    trackHash: true, // Set to false to ignore URL hash changes
-  },
-});
-
-analytics.init();
-```
-
-You can also [manually track pages](https://www.notion.so/Manual-Page-Tracking-in-SPAs-2442fc7586dc4208ae8f669eb7561b1a?pvs=21) by disabling automatic page tracking (`enabled: false`). For most use cases you don't need to do this.
-
-## Tracking Events
-
-With events you can track custom actions users are taking on your site with event properties. The track method supports both client-side (parameter-style) and server-side (object-style) usage patterns.
-
-Each event has 2 components:
-
-**Name** - this is the name of the action that was taken.
-
-_We like to follow Segment's [Object Action Framework](https://segment.com/academy/collecting-data/naming-conventions-for-clean-data/) for naming events._
-
-**Properties** - This is an object with the values of the event. Such as the value, currency, or query.
-
-We currently have limited support for properties, but in the future we will support complex querying and actions based on event properties.
-
-### Client Usage
-
-For client-side tracking, use the Segment-compatible syntax.
-This will automatically assign userId based on identify calls during the session
-
-```tsx
-// Import saasco
-import { saasco } from '../lib/saasco.ts';
-
-// Track an event
-saasco.track("Searched Movies");
-
-// Track an event with properties
-saasco.track("Searched Movies", {
-	query:"batman",
-	sortBy:"relevancy"
-});
-```
-
-### Server Usage (Object Style)
-
-For server-side tracking, use the object-style syntax.
-You must provide a userId for server side tracking events so there is a contact to connect the events to.
-
-```tsx
-// Import saasco
-import { saasco } from '../lib/saasco.ts';
-
-// Track an event and associate it with a user
-saasco.track({
-  event: "Signed Up",
-  userId: "user_123",
-  properties: {
-    provider: 'email',
-  }
-});
-```
-
-## Identifying Users
-
-By default Saasco does not track any identifiable data about users, just anonymous user ids and session ids. However if you want to tie events to users you can identify users which will connect events to users in your CRM and power tools like drip campaigns and customer support.
-
-To do this just identify a user with their DistinctId (usually the user ID from your database) and then any properties on the user.
-
-```tsx
-// Import saasco
-import { saasco } from '../lib/saasco.ts';
-
-// Inside your user logged in function identify a user
-// You should only identify users when they login, or their properties change
-function signedIn(){
-	// Identify a user
-	saasco.identify("USER-ID-FROM-YOUR-DB", {
-		// Any user properties you want to record with the user
-		name:"Tony Hawk",
-		email:"tony@xgames.com",
-		bestTrick: 900
-	});
-}
-
-// When a user logs out you can unidentify by identify null
-function signedOut(){
-	saasco.identify(null)
-}
-```
-
-### Identifying users who don't have an ID
-
-Often times you have a user's contact details before they sign up for your site. This could be part of the signup flow, or if they were to subscribe to marketing emails before they sign up as a customer
-
-Saasco allows identifying users without an id by simply skipping the `ID` part of the identify call. This will add contacts to the CRM for email marketing and other tools before users register.
-
-For example:
-
-```tsx
-// Identify a user only by their email
-saasco.identify({
-    name:"Tony Hawk",
-    email:"tony@xgames.com",
-    bestTrick: 900
-});
-```
-
-By doing this users will get tracked and added to your contacts, and as soon as they do login, assuming they use the same email address, all their properties will be connected.
-
-### Soft vs Full identify
-
-When users are identified without an `ID` we call this a "Soft Identify". Users who are soft identified can also be called "Leads".
-Once a user signs up and you identify them with an `ID` they will be fully registered and can be called "Customers"
-
-In the CRM when you identify a user, either soft or full, they become a contact.
-The type of the contact depends on whether they were fully identified, "Leads" are soft and "Customers" are full.
-
-## Debugging and Dev
-
-When setting up Saasco analytics you probably want to exclude your local environment.
-
-To do so simply turn on dev mode.
-
-```tsx
-export const saasco = new Saasco({
-    projectId: 'YOUR-PROJECT-ID',
-
-    // use an env to only set enabled to true on production
-    enabled: process.env['NODE_ENV'] === 'production',
-});
-```
-
-#### Debugging
-
-You can turn on debugging when you initialize the repo or by running `saasco.enableDebug()` in your code or the browser.
-
-```tsx
-export const saasco = new Saasco({
-    projectId: 'YOUR-PROJECT-ID',
-    enabled: process.env['NODE_ENV'] === 'production',
-    // Set to true to console log analytics events.
-    // This works even when enabled is false - it just won't send the data
-    debug: true,
-});
-```
-
-You can also enable debug mode by calling `saasco.enableDebug()` anywhere in your code.
-
-```tsx
-saasco.enableDebug();
-// will console log "debug mode activated"
-```
-
-You can disable debug mode by calling `saasco.disableDebug()`.
-
-```tsx
-saasco.disableDebug();
-// will console log "debug mode deactivated"
-```
-
-## Reserved Properties
-
-Saasco has reserved some properties that have semantic meanings for contacts and will handle them in special ways.
-For example, Saasco always expects email to be a string of the user's email address, this is important for when sending emails using the marketing app.
-The SDK will do its best to match these properties, eg (created_at will be mapped to createdAt), but if possible you should use the reserved properties.
-
-### Reserved Contact Properties
-
-| PROPERTY    | TYPE   | DESCRIPTION                                                                                                       |
-| ----------- | ------ | ----------------------------------------------------------------------------------------------------------------- |
-| age         | Number | Age of a user                                                                                                     |
-| avatar      | String | URL to an avatar image for the user                                                                               |
-| birthday    | Date   | User's birthday                                                                                                   |
-| createdAt   | Date   | Date the user's account was first created. We recommend using ISO-8601 date strings.                              |
-| description | String | Description of the user                                                                                           |
-| email       | String | Email address of a user                                                                                           |
-| firstName   | String | First name of a user                                                                                              |
-| displayName | String | The preferred user's display name, will default to "firstName lastName"                                           |
-| gender      | String | Gender of a user                                                                                                  |
-| lastName    | String | Last name of a user                                                                                               |
-| name        | String | Full name of a user. If you only pass a first and last name Segment automatically fills in the full name for you. |
-| phone       | String | Phone number of a user                                                                                            |
-| title       | String | Title of a user, usually related to their position at a specific company. Example: "VP of Engineering"            |
-| username    | String | User's username. This should be unique to each user, like the usernames of Twitter or GitHub.                     |
-| website     | String | Website of a user                                                                                                 |
-
-### Default Contact Properties
-
-Our SDKs automatically collect certain properties on every event or user profile.
-Any property that starts with `$` is a property that has been generated by the SDK or ingestion.
-
-| Property                | Display Name                | Description                                                                            |
-| ----------------------- | --------------------------- | -------------------------------------------------------------------------------------- |
-| $id                     | ID                          | The ID of the user from your database, coerced to a string. eg 1 becomes "1"           |
-| $city                   | City                        | The city of the user parsed from the IP.                                               |
-| $countryCode            | Country Code                | The country of the user parsed from the IP property.                                   |
-| $latitude               | Latitude                    | Latitude of the user's IP location.                                                    |
-| $longitude              | Longitude                   | Longitude of the user's IP location.                                                   |
-| $timezone               | Timezone                    | Timezone of the user parsed from the IP.                                               |
-| $locale                 | Locale                      | The most recent preferred language of the user.                                        |
-| $screenHeight           | Screen Height               | The most recent height of the device screen in pixels                                  |
-| $screenWidth            | Screen Width                | The most recent width of the device screen in pixels                                   |
-| $screenDpi              | Screen DPI                  | The most recent pixel density of the device screen.                                    |
-| $lastSeen               | Last Seen                   | The last time a user was identified while active was not false in the context          |
-| $os                     | Operating System            | The most recent OS of the user.                                                        |
-| $browser                | Browser                     | The most recent browser of the user.                                                   |
-| $browserVersion         | Browser Version             | The most recent browser version of the user.                                           |
-| $initialReferrer        | Initial Referrer            | Referring URL when the user first arrived on your site. Defaults to "direct"           |
-| $referrer               | Last Touch Referrer         | Referring URL when the user last interacted with your site. Defaults to "direct"       |
-| $initialReferringDomain | Initial Referring Domain    | Referring domain at first arrival. Defaults to "direct"                                |
-| $referringDomain        | Last Touch Referring Domain | Referring domain at the user's last interaction. Defaults to "direct"                  |
-| $initialUtmSource       | Initial UTM Source          | The initial UTM source tag from the URL a customer clicked to arrive at your domain.   |
-| $utmSource              | Last Touch UTM Source       | The UTM source tag from the URL a customer clicked during their last interaction.      |
-| $initialUtmMedium       | Initial UTM Medium          | The initial UTM medium tag from the URL a customer clicked to arrive at your domain.   |
-| $utmMedium              | Last Touch UTM Medium       | The UTM medium tag from the URL a customer clicked during their last interaction.      |
-| $initialUtmCampaign     | Initial UTM Campaign        | The initial UTM campaign tag from the URL a customer clicked to arrive at your domain. |
-| $utmCampaign            | Last Touch UTM Campaign     | The UTM campaign tag from the URL a customer clicked during their last interaction.    |
-| $initialUtmTerm         | Initial UTM Term            | The initial UTM term tag from the URL a customer clicked to arrive at your domain.     |
-| $utmTerm                | Last Touch UTM Term         | The UTM term tag from the URL a customer clicked during their last interaction.        |
-| $initialUtmContent      | Initial UTM Content         | The initial UTM content tag from the URL a customer clicked to arrive at your domain.  |
-| $utmContent             | Last Touch UTM Content      | The UTM content tag from the URL a customer clicked during their last interaction.     |
-| $unsubscribed           | Unsubscribed                | Whether the user has unsubscribed from all notifications                               |
-| $unsubscribeReason      | Unsubscribe Reason          | The reason the user was unsubscribed - eg complained, bounced, requested               |
-
-### Reserved Integration Properties
-
-| Property          | Display Name       | Description                                      |
-| ----------------- | ------------------ | ------------------------------------------------ |
-| $stripeCustomerId | Stripe Customer Id | The Stripe customer ID associated with this user |
-
-### Reserved event properties
-
-Properties used to calculate revenue for different traffic sources and LTV for users.
-
-| PROPERTY | TYPE   | DESCRIPTION                                                                               |
-| -------- | ------ | ----------------------------------------------------------------------------------------- |
-| revenue  | Number | Amount of revenue an event resulted in. This should be a decimal value                    |
-| currency | String | Currency of the revenue an event resulted in. This should be sent in the ISO 4127 format. |
-| value    | Number | An abstract numerical value used internally to score events, such as lead scoring.        |
-
-### Default Event Properties
-
-Our SDKs automatically collect certain properties on every event or user profile. The default properties begin with a `$` and can be overwritten with your own identify calls, so we recommend avoiding leading `$` in your identify call properties to avoid conflicts.
-
-| Property         | Display Name                | Description                                                                      |
-| ---------------- | --------------------------- | -------------------------------------------------------------------------------- |
-| $city            | City                        | The city of the user parsed from the IP.                                         |
-| $countryCode     | Country Code                | The country of the user parsed from the IP property.                             |
-| $latitude        | Latitude                    | Latitude of the user's IP location.                                              |
-| $longitude       | Longitude                   | Longitude of the user's IP location.                                             |
-| $timezone        | Timezone                    | Timezone of the user parsed from the IP.                                         |
-| $locale          | Locale                      | The preferred language of the user.                                              |
-| $pathname        | Pathname                    | The path of the page on which the event was tracked.                             |
-| $title           | Page Title                  | The title of the page on which the event was tracked.                            |
-| $userAgent       | User Agent                  | The user agent string of the browser.                                            |
-| $screenHeight    | Screen Height               | The height of the device screen in pixels                                        |
-| $screenWidth     | Screen Width                | The width of the device screen in pixels                                         |
-| $screenDpi       | Screen DPI                  | Pixel density of the device screen.                                              |
-| $currentUrl      | Current URL                 | The URL of the page on which the event was tracked.                              |
-| $os              | Operating System            | The most recent OS of the user.                                                  |
-| $browser         | Browser                     | The most recent browser of the user.                                             |
-| $browserVersion  | Browser Version             | The most recent browser version of the user.                                     |
-| $device          | Device Type                 | The most recent device type of the user. eg `Mobile`, `Tablet`, `Desktop`        |
-| $referrer        | Last Touch Referrer         | Referring URL when the user last interacted with your site. Defaults to "direct" |
-| $referringDomain | Last Touch Referring Domain | Referring domain at the user's last interaction. Defaults to "direct"            |
-| $utmSource       | UTM Source                  | The UTM source tag from the URL a customer clicked to arrive at your domain.     |
-| $utmMedium       | UTM Medium                  | The UTM medium tag from the URL a customer clicked to arrive at your domain.     |
-| $utmCampaign     | UTM Campaign                | The UTM campaign tag from the URL a customer clicked to arrive at your domain.   |
-| $utmTerm         | UTM Term                    | The UTM term tag from the URL a customer clicked to arrive at your domain.       |
-| $utmContent      | UTM Content                 | The UTM content tag from the URL a customer clicked to arrive at your domain.    |
-
-### Reserved Events with Optional Properties
-
-> ⚠️ The event schema described below is not yet implemented in the UI. However, if you wish to future-proof your implementation, you can start using this schema in anticipation of its integration.
-
-Reserved events are common events that happen during the lifecycle of a user, with optional properties to capture more detailed information, including revenue data where appropriate.
-
-- [Signed Up](#signed-up)
-- [Signed In](#signed-in)
-- [Signed Out](#signed-out)
-- [Trial Started](#trial-started)
-- [Trial Ended](#trial-ended)
-- [Payment Completed](#payment-completed)
-- [Subscription Started](#subscription-started)
-- [Subscription Cancelled](#subscription-cancelled)
-- [Subscription Upgraded](#subscription-upgraded)
-- [Subscription Downgraded](#subscription-downgraded)
-
-#### Signed Up
-
-Event triggered when a user signs up.
-| Property | Description |
-|----------|----------------------------------|
-| `source` | How the user found your site. |
-| `value` | Track an estimated value of the signup|
-
-Example:
-
-```jsx
-saasco.track('Signed Up', {
-  source: 'Referral by friend',
-});
-```
-
-#### Signed In
-
-Event triggered when a user signs in.
-| Property | Description |
-|----------|--------------------------------------------------|
-| `provider` | The provider used for signing in (e.g., email, github, google). |
-
-Example:
-
-```jsx
-saasco.track('Signed In', {
-  provider: 'email',
-});
-```
-
-Note:
-When tracking Signed In events call identify('user_id', {email: '...'}) before the event to connect to the user.
-
-#### Signed Out
-
-Event triggered when a user signs out.
-No optional properties.
-
-Example:
-
-```jsx
-saasco.track('Signed Out');
-```
-
-Note:
-When tracking Signed Out events call identify(null) _after_ tracking the event to reset the session.
-
-#### Trial Started
-
-Event triggered when a user starts a trial.
-| Property | Description |
-|-------------------|---------------------------------------------------------------------|
-| `duration` | The duration of the trial in days |
-| `type`| Values can be `optIn` for when the user didn't provide a cc or `optOut` when the user provided a cc and it will automatically start at the end of the trial period|
-
-Example:
-
-```jsx
-saasco.track('Trial Started', { duration: 14, type: 'optOut' });
-```
-
-#### Trial Ended
-
-Event triggered when a user's trial ends.
-| Property | Description |
-|-------------------|---------------------------------------------------------------------|
-| `daysLeftInTrial`| If a user manually upgrades before the end of the trial you can record this here|
-
-Example:
-
-```jsx
-saasco.track('Trial Ended', { daysLeftInTrial: 4 });
-```
-
-#### Payment Completed
-
-Event triggered when a payment is completed.
-This may be called on the server side after a confirmation webhook.
-This is helpful for recording ongoing subscription payments.
-
-| Property   | Description                                         |
-| ---------- | --------------------------------------------------- |
-| `revenue`  | The initial payment amount.                         |
-| `currency` | The currency of the payment, otherwise assumed USD. |
-
-Example:
-
-```jsx
-saasco.track('Payment Completed', { revenue: 29.99, currency: 'GBP' });
-```
-
-#### Subscription Started
-
-Event triggered when a user starts a subscription.
-If you have integrated with stripe for revenue tracking or are doing server side revenue tracking with webhooks you should skip the `revenue` and `currency` properties to prevent duplicate revenue tracking.
-
-| Property   | Description                                                                                                             |
-| ---------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `plan`     | The name or ID of the subscription plan.                                                                                |
-| `revenue`  | The initial payment amount. Exclude if triggering `Payment Completed` to avoid double counting.                         |
-| `currency` | The currency of the payment, otherwise assumed USD. Exclude if triggering `Payment Completed` to avoid double counting. |
-
-Example:
-
-```jsx
-saasco.track('Subscription Started', {
-  plan: 'Monthly',
-});
-```
-
-#### Subscription Cancelled
-
-Event triggered when a subscription is cancelled.
-
-| Property | Description                                                                                        |
-| -------- | -------------------------------------------------------------------------------------------------- |
-| `reason` | The reason for cancellation. This can be used in the feedback and analysis of cancellation reasons |
-
-Example:
-
-```jsx
-saasco.track('Subscription Cancelled', {
-  reason: 'Not using it any more',
-});
-```
-
-#### Subscription Upgraded
-
-Event triggered when a subscription is upgraded.
-| Property | Description |
-|-----------------|-----------------------------------------------------------------------------------------------|
-| `fromPlan` | The previous plan. |
-| `toPlan` | The new plan. |
-| `previousRevenue` | The revenue from the previous plan. |
-| `newRevenue` | The revenue from the new plan. |
-| `revenue` | If the customer is charged immediately then include a revenue number here |
-| `currency` | The currency of the payment, assumed to be USD unless otherwise specified. |
-
-Example:
-
-```jsx
-saasco.track('Subscription Upgraded', {
-  fromPlan: 'Monthly',
-  toPlan: 'Annual',
-  previousRevenue: 29,
-  newRevenue: 129,
-});
-```
-
-#### Subscription Downgraded
-
-Event triggered when a subscription is downgraded.
-| Property | Description |
-|------------|-------------------|
-| `fromPlan` | The previous plan. |
-| `toPlan` | The new plan. |
-| `previousRevenue` | The revenue from the previous plan. |
-| `newRevenue` | The revenue from the new plan. |
-| `revenue` | If the customer is refunded immediately then include a revenue number here, in the case of a downgrade this will be a negative value. Only include the revenue here if it's not tracked on your backend or with a webhook |
-| `currency` | The currency of the payment, assumed to be USD unless otherwise specified. |
-
-Example:
-
-```jsx
-saasco.track('Subscription Downgraded', {
-  fromPlan: 'Annual',
-  toPlan: 'Monthly',
-  previousRevenue: 129,
-  newRevenue: 29,
-  revenue: -36,
-  currency: 'USD',
-});
-```
-
-## Use the hosted SDK
-
-To use the hosted JS SDK, add the following script to your HTML header:
-All properties should be added as data attributes in the format data-[prop name]
-
-```jsx
-<script
-  src="https://saasco.com/sdk/saasco-sdk.js"
-  data-projectId="YOUR-PROJECT-ID"
-></script>
-```
-
-All the properties for initializing the sdk can be passed in like this:
-
-```jsx
-<script
-  src="https://saasco.com/sdk/saasco-sdk.js"
-  data-projectId="YOUR-PROJECT-ID"
-  data-debug="true" // pass any properties as data params
-></script>
-```
-
-You can then call the track and identify methods like so:
-
-```jsx
-saasco.track('Searched Movies');
-```
-
-For type safety in your TypeScript project, you can use the following in an `index.d.ts` file
-
-```jsx
-import { Saasco } from 'saasco-sdk';
-
-declare global {
-  interface Window {
-    saasco?: Saasco;
-  }
-}
-```

package/index.cjs.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";