posthog-js 1.347.2 → 1.349.0

package/lib/src/extensions/product-tours/product-tours.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductTourManager = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var preact_1 = require("preact");
+var posthog_product_tours_types_1 = require("../../posthog-product-tours-types");
 var posthog_surveys_types_1 = require("../../posthog-surveys-types");
 var product_tours_utils_1 = require("./product-tours-utils");
 var ProductTourTooltip_1 = require("./components/ProductTourTooltip");
@@ -39,6 +40,7 @@ var constants_1 = require("./constants");
 var product_tour_utils_1 = require("../../utils/product-tour-utils");
 var constants_2 = require("../../constants");
 var product_tour_event_receiver_1 = require("../../utils/product-tour-event-receiver");
+var event_utils_1 = require("../../utils/event-utils");
 var logger = (0, logger_1.createLogger)('[Product Tours]');
 var document = globals_1.document;
 var window = globals_1.window;
@@ -174,15 +176,16 @@ var ProductTourManager = /** @class */ (function () {
             }
         };
         this.nextStep = function () {
+            var _a;
             if (!_this._activeTour) {
                 return;
             }
             var currentStep = _this._activeTour.steps[_this._currentStepIndex];
-            _this._captureEvent('product tour step completed', {
-                $product_tour_id: _this._activeTour.id,
-                $product_tour_step_id: currentStep.id,
-                $product_tour_step_order: _this._currentStepIndex,
-            });
+            _this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.STEP_COMPLETED, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = _this._activeTour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = currentStep.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = _this._currentStepIndex,
+                _a));
             if (_this._currentStepIndex < _this._activeTour.steps.length - 1) {
                 _this._setStepIndex(_this._currentStepIndex + 1);
                 _this._renderCurrentStep();
@@ -199,32 +202,33 @@ var ProductTourManager = /** @class */ (function () {
             _this._renderCurrentStep();
         };
         this.dismissTour = function (reason) {
-            var _a;
+            var _a, _b;
             if (reason === void 0) { reason = 'user_clicked_skip'; }
             if (!_this._activeTour) {
                 return;
             }
             var currentStep = _this._activeTour.steps[_this._currentStepIndex];
-            _this._captureEvent('product tour dismissed', {
-                $product_tour_id: _this._activeTour.id,
-                $product_tour_step_id: currentStep.id,
-                $product_tour_step_order: _this._currentStepIndex,
-                $product_tour_dismiss_reason: reason,
-            });
+            _this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.DISMISSED, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = _this._activeTour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = currentStep.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = _this._currentStepIndex,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_DISMISS_REASON] = reason,
+                _a));
             if (!_this._isPreviewMode) {
                 storage_1.localStore._set("".concat(constants_1.TOUR_DISMISSED_KEY_PREFIX).concat(_this._activeTour.id), true);
                 _this._instance.capture('$set', {
-                    $set: (_a = {}, _a["$product_tour_dismissed/".concat(_this._activeTour.id)] = true, _a),
+                    $set: (_b = {}, _b["$product_tour_dismissed/".concat(_this._activeTour.id)] = true, _b),
                 });
             }
             window.dispatchEvent(new CustomEvent('PHProductTourDismissed', { detail: { tourId: _this._activeTour.id, reason: reason } }));
             _this._cleanup();
         };
         this._handleButtonClick = function (button) {
+            var _a, _b, _c;
             if (_this._activeTour) {
                 var currentStep = _this._activeTour.steps[_this._currentStepIndex];
                 if (currentStep) {
-                    _this._captureEvent('product tour button clicked', __assign(__assign({ $product_tour_id: _this._activeTour.id, $product_tour_name: _this._activeTour.name, $product_tour_iteration: _this._activeTour.current_iteration || 1, $product_tour_step_id: currentStep.id, $product_tour_step_order: _this._currentStepIndex, $product_tour_button_text: button.text, $product_tour_button_action: button.action }, (button.link && { $product_tour_button_link: button.link })), (button.tourId && { $product_tour_button_tour_id: button.tourId })));
+                    _this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.BUTTON_CLICKED, __assign(__assign((_a = {}, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = _this._activeTour.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_NAME] = _this._activeTour.name, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ITERATION] = _this._activeTour.current_iteration || 1, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = currentStep.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = _this._currentStepIndex, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_TEXT] = button.text, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_ACTION] = button.action, _a), (button.link && (_b = {}, _b[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_LINK] = button.link, _b))), (button.tourId && (_c = {}, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BUTTON_TOUR_ID] = button.tourId, _c))));
                 }
             }
             switch (button.action) {
@@ -273,6 +277,18 @@ var ProductTourManager = /** @class */ (function () {
             finally { if (e_1) throw e_1.error; }
         }
     };
+    ProductTourManager.prototype._getCurrentStep = function () {
+        var _a;
+        if (!this._activeTour) {
+            return null;
+        }
+        var rawStep = this._activeTour.steps[this._currentStepIndex];
+        if (!rawStep) {
+            return null;
+        }
+        var language = (_a = this._instance.config.override_display_language) !== null && _a !== void 0 ? _a : (0, event_utils_1.getBrowserLanguage)();
+        return (0, product_tours_utils_1.resolveStepTranslation)(rawStep, language !== null && language !== void 0 ? language : null);
+    };
     ProductTourManager.prototype._setStepIndex = function (index) {
         this._currentStepIndex = index;
         this._saveSessionState();
@@ -484,24 +500,24 @@ var ProductTourManager = /** @class */ (function () {
         return true;
     };
     ProductTourManager.prototype.showTour = function (tour, options) {
-        var _a;
-        var _b;
-        var renderReason = (_b = options === null || options === void 0 ? void 0 : options.reason) !== null && _b !== void 0 ? _b : 'auto';
+        var _a, _b;
+        var _c;
+        var renderReason = (_c = options === null || options === void 0 ? void 0 : options.reason) !== null && _c !== void 0 ? _c : 'auto';
         this.cancelPendingTour(tour.id);
         this._activeTour = tour;
         this._setStepIndex(0);
         var rendered = this._renderCurrentStep();
         if (rendered) {
-            this._captureEvent('product tour shown', {
-                $product_tour_id: tour.id,
-                $product_tour_name: tour.name,
-                $product_tour_iteration: tour.current_iteration || 1,
-                $product_tour_render_reason: renderReason,
-            });
+            this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.SHOWN, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = tour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_NAME] = tour.name,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ITERATION] = tour.current_iteration || 1,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_RENDER_REASON] = renderReason,
+                _a));
             if (!this._isPreviewMode) {
                 storage_1.localStore._set("".concat(constants_1.TOUR_SHOWN_KEY_PREFIX).concat(tour.id), true);
                 this._instance.capture('$set', {
-                    $set: (_a = {}, _a["$product_tour_shown/".concat(tour.id)] = true, _a),
+                    $set: (_b = {}, _b["$product_tour_shown/".concat(tour.id)] = true, _b),
                 });
             }
         }
@@ -533,33 +549,34 @@ var ProductTourManager = /** @class */ (function () {
         this._renderCurrentStep();
     };
     ProductTourManager.prototype._completeTour = function () {
-        var _a;
+        var _a, _b;
         if (!this._activeTour) {
             return;
         }
-        this._captureEvent('product tour completed', {
-            $product_tour_id: this._activeTour.id,
-            $product_tour_steps_count: this._activeTour.steps.length,
-        });
+        this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.COMPLETED, (_a = {},
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id,
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEPS_COUNT] = this._activeTour.steps.length,
+            _a));
         if (!this._isPreviewMode) {
             storage_1.localStore._set("".concat(constants_1.TOUR_COMPLETED_KEY_PREFIX).concat(this._activeTour.id), true);
             this._instance.capture('$set', {
-                $set: (_a = {},
-                    _a["$product_tour_completed/".concat(this._activeTour.id)] = true,
-                    _a),
+                $set: (_b = {},
+                    _b["$product_tour_completed/".concat(this._activeTour.id)] = true,
+                    _b),
             });
         }
         window.dispatchEvent(new CustomEvent('PHProductTourCompleted', { detail: { tourId: this._activeTour.id } }));
         this._cleanup();
     };
     ProductTourManager.prototype._renderCurrentStep = function (retryCount) {
+        var _a, _b, _c;
         var _this = this;
-        var _a;
+        var _d;
         if (retryCount === void 0) { retryCount = 0; }
         if (!this._activeTour) {
             return false;
         }
-        var step = this._activeTour.steps[this._currentStepIndex];
+        var step = this._getCurrentStep();
         if (!step) {
             logger.warn("Step ".concat(this._currentStepIndex, " not found in tour ").concat(this._activeTour.id));
             this._cleanup();
@@ -567,12 +584,7 @@ var ProductTourManager = /** @class */ (function () {
         }
         // Banner step - render full-width banner
         if (step.type === 'banner') {
-            this._captureEvent('product tour step shown', {
-                $product_tour_id: this._activeTour.id,
-                $product_tour_step_id: step.id,
-                $product_tour_step_order: this._currentStepIndex,
-                $product_tour_step_type: 'banner',
-            });
+            this._captureStepShown();
             this._isResuming = false;
             this._renderBanner();
             return true;
@@ -588,21 +600,16 @@ var ProductTourManager = /** @class */ (function () {
         }
         // Screen-positioned step (no element targeting) - render without a target element
         if (!(0, product_tours_utils_1.hasElementTarget)(step)) {
-            this._captureEvent('product tour step shown', {
-                $product_tour_id: this._activeTour.id,
-                $product_tour_step_id: step.id,
-                $product_tour_step_order: this._currentStepIndex,
-                $product_tour_step_type: step.type,
-            });
+            this._captureStepShown();
             this._isResuming = false;
             this._renderTooltipWithPreact(null);
             return true;
         }
         var result = (0, product_tours_utils_1.findStepElement)(step);
-        var inferenceProps = {
-            $use_manual_selector: (_a = step.useManualSelector) !== null && _a !== void 0 ? _a : false,
-            $inference_data_present: !!step.inferenceData,
-        };
+        var inferenceProps = (_a = {},
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.USE_MANUAL_SELECTOR] = (_d = step.useManualSelector) !== null && _d !== void 0 ? _d : false,
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.INFERENCE_DATA_PRESENT] = !!step.inferenceData,
+            _a);
         var previousStep = this._currentStepIndex > 0 ? this._activeTour.steps[this._currentStepIndex - 1] : null;
         var shouldWaitForElement = (previousStep === null || previousStep === void 0 ? void 0 : previousStep.progressionTrigger) === 'click' || this._isResuming;
         // 2s total timeout
@@ -618,7 +625,7 @@ var ProductTourManager = /** @class */ (function () {
                 return false;
             }
             var waitDurationMs = retryCount * retryTimeout;
-            this._captureEvent('product tour step selector failed', __assign({ $product_tour_id: this._activeTour.id, $product_tour_step_id: step.id, $product_tour_step_order: this._currentStepIndex, $product_tour_step_selector: step.selector, $product_tour_error: result.error, $product_tour_matches_count: result.matchCount, $product_tour_failure_phase: 'runtime', $product_tour_waited_for_element: shouldWaitForElement, $product_tour_wait_duration_ms: waitDurationMs }, inferenceProps));
+            this._captureStepSelectorFailed(result, __assign((_b = {}, _b[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_WAITED_FOR_ELEMENT] = shouldWaitForElement, _b[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_WAIT_DURATION_MS] = waitDurationMs, _b), inferenceProps));
             if (this._currentStepIndex === 0 && !this._isResuming) {
                 logger.warn("Tour \"".concat(this._activeTour.name, "\" failed to show: element for first step not found (").concat(result.error, ")"));
                 return false;
@@ -629,7 +636,7 @@ var ProductTourManager = /** @class */ (function () {
             return false;
         }
         if (result.error === 'multiple_matches') {
-            this._captureEvent('product tour step selector failed', __assign({ $product_tour_id: this._activeTour.id, $product_tour_step_id: step.id, $product_tour_step_order: this._currentStepIndex, $product_tour_step_selector: step.selector, $product_tour_error: result.error, $product_tour_matches_count: result.matchCount, $product_tour_failure_phase: 'runtime' }, inferenceProps));
+            this._captureStepSelectorFailed(result, inferenceProps);
             // Continue with first match for multiple_matches case
         }
         if (!result.element) {
@@ -637,7 +644,7 @@ var ProductTourManager = /** @class */ (function () {
         }
         var element = result.element;
         var metadata = (0, product_tours_utils_1.getElementMetadata)(element);
-        this._captureEvent('product tour step shown', __assign({ $product_tour_id: this._activeTour.id, $product_tour_step_id: step.id, $product_tour_step_order: this._currentStepIndex, $product_tour_step_selector: step.selector, $product_tour_step_selector_found: true, $product_tour_step_element_tag: metadata.tag, $product_tour_step_element_id: metadata.id, $product_tour_step_element_classes: metadata.classes, $product_tour_step_element_text: metadata.text }, inferenceProps));
+        this._captureStepShown(__assign((_c = {}, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_SELECTOR] = step.selector, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_SELECTOR_FOUND] = true, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_TAG] = metadata.tag, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_ID] = metadata.id, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_CLASSES] = metadata.classes, _c[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ELEMENT_TEXT] = metadata.text, _c), inferenceProps));
         this._isResuming = false;
         this._renderTooltipWithPreact(element);
         return true;
@@ -646,23 +653,30 @@ var ProductTourManager = /** @class */ (function () {
         if (!this._activeTour) {
             return;
         }
-        var step = this._activeTour.steps[this._currentStepIndex];
+        var step = this._getCurrentStep();
+        if (!step) {
+            return;
+        }
         var shadow = retrieveTourShadow(this._activeTour).shadow;
         (0, preact_1.render)((0, jsx_runtime_1.jsx)(ProductTourTooltip_1.ProductTourTooltip, { tour: this._activeTour, step: step, stepIndex: this._currentStepIndex, totalSteps: this._activeTour.steps.length, targetElement: element, onNext: this.nextStep, onPrevious: this.previousStep, onDismiss: onDismissOverride || this.dismissTour, onSurveySubmit: onSurveySubmit, onButtonClick: this._handleButtonClick }), shadow);
     };
     ProductTourManager.prototype._renderBanner = function () {
-        var _this = this;
         var _a;
+        var _this = this;
+        var _b;
         if (!this._activeTour) {
             return;
         }
-        var step = this._activeTour.steps[this._currentStepIndex];
+        var step = this._getCurrentStep();
+        if (!step) {
+            return;
+        }
         var result = retrieveBannerShadow(this._activeTour, step.bannerConfig);
         if (!result) {
-            this._captureEvent('product tour banner container selector failed', {
-                $product_tour_id: this._activeTour.id,
-                $product_tour_banner_selector: (_a = step === null || step === void 0 ? void 0 : step.bannerConfig) === null || _a === void 0 ? void 0 : _a.selector,
-            });
+            this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.BANNER_CONTAINER_SELECTOR_FAILED, (_a = {},
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id,
+                _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_BANNER_SELECTOR] = (_b = step === null || step === void 0 ? void 0 : step.bannerConfig) === null || _b === void 0 ? void 0 : _b.selector,
+                _a));
             this.dismissTour('container_unavailable');
             return;
         }
@@ -678,29 +692,28 @@ var ProductTourManager = /** @class */ (function () {
         (0, preact_1.render)((0, jsx_runtime_1.jsx)(ProductTourBanner_1.ProductTourBanner, { step: step, onDismiss: function () { return _this.dismissTour('user_clicked_skip'); }, onTriggerTour: handleTriggerTour, displayFrequency: this._activeTour.display_frequency }), shadow);
     };
     ProductTourManager.prototype._renderSurveyStep = function () {
-        var _a;
+        var _a, _b;
         var _this = this;
-        var _b, _c, _d;
+        var _c, _d, _e;
         if (!this._activeTour) {
             return;
         }
         var tourId = this._activeTour.id;
-        var step = this._activeTour.steps[this._currentStepIndex];
+        var step = this._getCurrentStep();
+        if (!step) {
+            return;
+        }
         var surveyId = step.linkedSurveyId;
         var questionId = step.linkedSurveyQuestionId;
-        var questionText = ((_b = step.survey) === null || _b === void 0 ? void 0 : _b.questionText) || '';
-        this._captureEvent('product tour step shown', {
-            $product_tour_id: this._activeTour.id,
-            $product_tour_step_id: step.id,
-            $product_tour_step_order: this._currentStepIndex,
-            $product_tour_step_type: 'survey',
-            $product_tour_linked_survey_id: surveyId,
-        });
-        this._captureEvent(posthog_surveys_types_1.SurveyEventName.SHOWN, (_a = {},
-            _a[posthog_surveys_types_1.SurveyEventProperties.SURVEY_ID] = surveyId,
-            _a[posthog_surveys_types_1.SurveyEventProperties.PRODUCT_TOUR_ID] = tourId,
-            _a.sessionRecordingUrl = (_d = (_c = this._instance).get_session_replay_url) === null || _d === void 0 ? void 0 : _d.call(_c),
+        var questionText = ((_c = step.survey) === null || _c === void 0 ? void 0 : _c.questionText) || '';
+        this._captureStepShown((_a = {},
+            _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_LINKED_SURVEY_ID] = surveyId,
             _a));
+        this._captureEvent(posthog_surveys_types_1.SurveyEventName.SHOWN, (_b = {},
+            _b[posthog_surveys_types_1.SurveyEventProperties.SURVEY_ID] = surveyId,
+            _b[posthog_surveys_types_1.SurveyEventProperties.PRODUCT_TOUR_ID] = tourId,
+            _b.sessionRecordingUrl = (_e = (_d = this._instance).get_session_replay_url) === null || _e === void 0 ? void 0 : _e.call(_d),
+            _b));
         var handleSubmit = function (response) {
             var _a, _b;
             var _c, _d;
@@ -836,6 +849,22 @@ var ProductTourManager = /** @class */ (function () {
         }
         this._instance.capture(eventName, properties);
     };
+    ProductTourManager.prototype._captureStepShown = function (extraProps) {
+        var _a;
+        if (!this._activeTour) {
+            return;
+        }
+        var step = this._activeTour.steps[this._currentStepIndex];
+        this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.STEP_SHOWN, __assign((_a = {}, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = step.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = this._currentStepIndex, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_TYPE] = step.type, _a), extraProps));
+    };
+    ProductTourManager.prototype._captureStepSelectorFailed = function (result, extraProps) {
+        var _a;
+        if (!this._activeTour) {
+            return;
+        }
+        var step = this._activeTour.steps[this._currentStepIndex];
+        this._captureEvent(posthog_product_tours_types_1.ProductTourEventName.STEP_SELECTOR_FAILED, __assign((_a = {}, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ID] = this._activeTour.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ID] = step.id, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_ORDER] = this._currentStepIndex, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_STEP_SELECTOR] = step.selector, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_ERROR] = result.error, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_MATCHES_COUNT] = result.matchCount, _a[posthog_product_tours_types_1.ProductTourEventProperties.TOUR_FAILURE_PHASE] = 'runtime', _a), extraProps));
+    };
     // Public API methods delegated from PostHogProductTours
     ProductTourManager.prototype.getActiveProductTours = function (callback) {
         var _this = this;