Add component debug headers for session ID and component library vers…

…ion (#89)

components/package.json

@@ -18,8 +18,8 @@
   "scripts": {
     "dev": "yarn tsc --watch",
     "build": "yarn tsc && yarn openapi && yarn format && yarn lint && yarn clean && yarn build:cjs && yarn build:esm && yarn build:types",
-    "build:cjs": "npx esbuild src/index.ts --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=cjs --outfile=dist/schematic-components.cjs.js",
-    "build:esm": "npx esbuild src/index.ts --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=esm --outfile=dist/schematic-components.esm.js",
+    "build:cjs": "npx esbuild src/index.ts --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=cjs --outfile=dist/schematic-components.cjs.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
+    "build:esm": "npx esbuild src/index.ts --bundle --loader:.ttf=dataurl --external:react --external:react-dom --external:@stripe/react-stripe-js --format=esm --outfile=dist/schematic-components.esm.js --define:process.env.SCHEMATIC_COMPONENTS_VERSION=$(cat package.json | jq .version)",
     "build:types": "npx tsc && npx api-extractor run",
     "clean": "rm -rf dist",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
@@ -34,7 +34,8 @@
     "lodash.merge": "^4.6.2",
     "pako": "^2.1.0",
     "pluralize": "^8.0.0",
-    "styled-components": "^6.1.13"
+    "styled-components": "^6.1.13",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "@craftjs/core": "^0.2.10",
@@ -47,6 +48,7 @@
     "@types/pluralize": "^0.0.33",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.7.0",
     "@typescript-eslint/parser": "^8.7.0",
     "esbuild": "^0.24.0",

components/src/api/models/BillingPriceResponseData.ts

@@ -19,6 +19,12 @@ import { mapValues } from "../runtime";
  * @interface BillingPriceResponseData
  */
 export interface BillingPriceResponseData {
+  /**
+   *
+   * @type {string}
+   * @memberof BillingPriceResponseData
+   */
+  currency: string;
   /**
    *
    * @type {string}
@@ -51,6 +57,7 @@ export interface BillingPriceResponseData {
 export function instanceOfBillingPriceResponseData(
   value: object,
 ): value is BillingPriceResponseData {
+  if (!("currency" in value) || value["currency"] === undefined) return false;
   if (!("externalPriceId" in value) || value["externalPriceId"] === undefined)
     return false;
   if (!("id" in value) || value["id"] === undefined) return false;
@@ -73,6 +80,7 @@ export function BillingPriceResponseDataFromJSONTyped(
     return json;
   }
   return {
+    currency: json["currency"],
     externalPriceId: json["external_price_id"],
     id: json["id"],
     interval: json["interval"],
@@ -87,6 +95,7 @@ export function BillingPriceResponseDataToJSON(
     return value;
   }
   return {
+    currency: value["currency"],
     external_price_id: value["externalPriceId"],
     id: value["id"],
     interval: value["interval"],

components/src/api/models/CompanySubscriptionResponseData.ts

@@ -38,6 +38,12 @@ import {
  * @interface CompanySubscriptionResponseData
  */
 export interface CompanySubscriptionResponseData {
+  /**
+   *
+   * @type {string}
+   * @memberof CompanySubscriptionResponseData
+   */
+  currency: string;
   /**
    *
    * @type {string}
@@ -100,6 +106,7 @@ export interface CompanySubscriptionResponseData {
 export function instanceOfCompanySubscriptionResponseData(
   value: object,
 ): value is CompanySubscriptionResponseData {
+  if (!("currency" in value) || value["currency"] === undefined) return false;
   if (
     !("customerExternalId" in value) ||
     value["customerExternalId"] === undefined
@@ -132,6 +139,7 @@ export function CompanySubscriptionResponseDataFromJSONTyped(
     return json;
   }
   return {
+    currency: json["currency"],
     customerExternalId: json["customer_external_id"],
     expiredAt:
       json["expired_at"] == null ? undefined : new Date(json["expired_at"]),
@@ -160,6 +168,7 @@ export function CompanySubscriptionResponseDataToJSON(
     return value;
   }
   return {
+    currency: value["currency"],
     customer_external_id: value["customerExternalId"],
     expired_at:
       value["expiredAt"] == null

components/src/context/embed.tsx

@@ -2,6 +2,7 @@ import { createContext, useCallback, useEffect, useRef, useState } from "react";
 import { inflate } from "pako";
 import { ThemeProvider } from "styled-components";
 import merge from "lodash.merge";
+import { v4 as uuidv4 } from "uuid";
 import {
   CheckoutApi,
   Configuration,
@@ -202,6 +203,7 @@ export const EmbedProvider = ({
   children,
 }: EmbedProviderProps) => {
   const styleRef = useRef<HTMLLinkElement | null>(null);
+  const sessionIdRef = useRef<string>(uuidv4());
 
   const [state, setState] = useState<{
     api: CheckoutApi | null;
@@ -329,7 +331,16 @@ export const EmbedProvider = ({
 
   useEffect(() => {
     if (accessToken) {
-      const config = new Configuration({ ...apiConfig, apiKey: accessToken });
+      const { headers = {} } = apiConfig ?? {};
+      headers["X-Schematic-Components-Version"] =
+        process.env.SCHEMATIC_COMPONENTS_VERSION ?? "unknown";
+      headers["X-Schematic-Session-ID"] = sessionIdRef.current;
+
+      const config = new Configuration({
+        ...apiConfig,
+        apiKey: accessToken,
+        headers,
+      });
       const api = new CheckoutApi(config);
       setState((prev) => ({ ...prev, api }));
     }