@clikvn/showroom-visualizer 0.3.0-dev-06 → 0.3.0-dev-08

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/CLAUDE.md +145 -0
  2. package/README.md +338 -15
  3. package/dist/commons/SkinLayer/components/CardItemGroup/Item.d.ts.map +1 -1
  4. package/dist/components/SkinLayer/ActionsChangeScene/index.d.ts.map +1 -1
  5. package/dist/components/SkinLayer/Floorplan/index.d.ts.map +1 -1
  6. package/dist/components/SkinLayer/Guide/index.d.ts.map +1 -1
  7. package/dist/components/SkinLayer/HotspotOverview/index.d.ts.map +1 -1
  8. package/dist/components/SkinLayer/PinActionButtons/index.d.ts.map +1 -1
  9. package/dist/components/SkinLayer/PlayBar/index.d.ts.map +1 -1
  10. package/dist/components/SkinLayer/PoiDetailSlideIn/Detail.d.ts.map +1 -1
  11. package/dist/components/SkinLayer/PoiDetailSlideIn/index.d.ts.map +1 -1
  12. package/dist/components/SkinLayer/ScenarioList/index.d.ts.map +1 -1
  13. package/dist/components/SkinLayer/SceneCategories/index.d.ts.map +1 -1
  14. package/dist/components/SkinLayer/SearchAndDiscoverySlideIn/ContentItem/index.d.ts.map +1 -1
  15. package/dist/components/SkinLayer/SearchAndDiscoverySlideIn/PoiInfoActionPart/index.d.ts.map +1 -1
  16. package/dist/components/SkinLayer/SearchAndDiscoverySlideIn/PromotionPart/index.d.ts.map +1 -1
  17. package/dist/components/SkinLayer/SearchAndDiscoverySlideIn/ScenariosPart/Item.d.ts.map +1 -1
  18. package/dist/components/SkinLayer/SearchAndDiscoverySlideIn/index.d.ts.map +1 -1
  19. package/dist/components/SkinLayer/TourScenarios/index.d.ts.map +1 -1
  20. package/dist/features/ShowroomVisualizer/index.d.ts +2 -1
  21. package/dist/features/ShowroomVisualizer/index.d.ts.map +1 -1
  22. package/dist/hooks/Visualizer/useTourVisualizer.d.ts.map +1 -1
  23. package/dist/hooks/useActionMiddleware.d.ts +25 -0
  24. package/dist/hooks/useActionMiddleware.d.ts.map +1 -0
  25. package/dist/hooks/useConfiguration.d.ts +3 -1
  26. package/dist/hooks/useConfiguration.d.ts.map +1 -1
  27. package/dist/index.d.ts +1 -0
  28. package/dist/index.d.ts.map +1 -1
  29. package/dist/models/Visualizer/Plugins/BasePlugin.d.ts.map +1 -1
  30. package/dist/models/Visualizer/Poi/PoiLensFlare.d.ts.map +1 -1
  31. package/dist/models/Visualizer/Poi/PoiMultimedia/PoiSound.d.ts.map +1 -1
  32. package/dist/models/Visualizer/Poi/PoiMultimedia/PoiVideo.d.ts.map +1 -1
  33. package/dist/register.d.ts +2 -1
  34. package/dist/register.d.ts.map +1 -1
  35. package/dist/types/SkinLayer/index.d.ts +1 -0
  36. package/dist/types/SkinLayer/index.d.ts.map +1 -1
  37. package/dist/types/SkinLayer/middleware.type.d.ts +42 -0
  38. package/dist/types/SkinLayer/middleware.type.d.ts.map +1 -0
  39. package/dist/types/SkinLayer/visualizer.type.d.ts +2 -0
  40. package/dist/types/SkinLayer/visualizer.type.d.ts.map +1 -1
  41. package/dist/types/Visualizer/tourScenario/tourScenario.type.d.ts.map +1 -1
  42. package/dist/utils/Visualizer/image.utils.d.ts.map +1 -1
  43. package/dist/utils/middleware/listenerWrapper.d.ts +31 -0
  44. package/dist/utils/middleware/listenerWrapper.d.ts.map +1 -0
  45. package/dist/web.js +1 -1
  46. package/package.json +3 -3
  47. package/.claude/settings.local.json +0 -19
  48. package/dist/components/SkinLayer/DefaultLayout/index.d.ts +0 -8
  49. package/dist/components/SkinLayer/DefaultLayout/index.d.ts.map +0 -1
  50. package/dist/context/CustomLayoutContext.d.ts +0 -20
  51. package/dist/context/CustomLayoutContext.d.ts.map +0 -1
  52. package/dist/context/SwizzleContext.d.ts +0 -21
  53. package/dist/context/SwizzleContext.d.ts.map +0 -1
  54. package/dist/hooks/headless/index.d.ts +0 -150
  55. package/dist/hooks/headless/index.d.ts.map +0 -1
  56. package/dist/hooks/headless/useFloorplanControl.d.ts +0 -18
  57. package/dist/hooks/headless/useFloorplanControl.d.ts.map +0 -1
  58. package/dist/hooks/headless/usePOIInteraction.d.ts +0 -23
  59. package/dist/hooks/headless/usePOIInteraction.d.ts.map +0 -1
  60. package/dist/hooks/headless/useScenarioControl.d.ts +0 -22
  61. package/dist/hooks/headless/useScenarioControl.d.ts.map +0 -1
  62. package/dist/hooks/headless/useSceneNavigation.d.ts +0 -26
  63. package/dist/hooks/headless/useSceneNavigation.d.ts.map +0 -1
  64. package/dist/hooks/headless/useTourCore.d.ts +0 -23
  65. package/dist/hooks/headless/useTourCore.d.ts.map +0 -1
  66. package/dist/hooks/headless/useViewportControl.d.ts +0 -22
  67. package/dist/hooks/headless/useViewportControl.d.ts.map +0 -1
  68. package/dist/index.html +0 -110
  69. package/dist/index.js +0 -1
  70. package/dist/types/custom-layout.d.ts +0 -63
  71. package/dist/types/custom-layout.d.ts.map +0 -1
  72. package/dist/types/swizzle.d.ts +0 -59
  73. package/dist/types/swizzle.d.ts.map +0 -1
package/CLAUDE.md ADDED
@@ -0,0 +1,145 @@
1
+ # CLAUDE.md
2
+
3
+ This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4
+
5
+ ## Project Overview
6
+
7
+ This is a React-based 3D showroom visualizer library built with TypeScript that renders interactive 360-degree virtual tours. The library is published as `@clikvn/showroom-visualizer` and integrates with Krpano panoramic viewer technology to create immersive experiences with POIs (Points of Interest), scenarios, and multimedia content.
8
+
9
+ ## Build Commands
10
+
11
+ ```bash
12
+ # Development with hot reload
13
+ yarn dev
14
+
15
+ # Production build
16
+ yarn build
17
+
18
+ # Linting
19
+ yarn lint
20
+ yarn lint:fix
21
+
22
+ # Code formatting
23
+ yarn prettier
24
+
25
+ # Publish to npm
26
+ yarn deploy # Builds and publishes
27
+ ```
28
+
29
+ ## Code Architecture
30
+
31
+ ### Entry Points
32
+
33
+ - `src/web.ts` - Main entry point that exports the visualizer API to `window.ShowroomVisualizer`
34
+ - `src/window.ts` - Handles browser integration: `initVisualizer()` and `destroy()` methods
35
+ - `src/features/ShowroomVisualizer/index.tsx` - Root React component that sets up providers and layout
36
+
37
+ ### Core Architecture Layers
38
+
39
+ The codebase follows a layered architecture:
40
+
41
+ 1. **Visualizer Layer** (`src/models/Visualizer/`) - Domain models that manage 3D tour logic
42
+ - `Tour.ts` - Central orchestrator managing scenes, POIs, sounds, and scenarios
43
+ - `Krpano.ts` - Wrapper around Krpano API with coordinate transformation utilities
44
+ - `Scene.ts` - Individual 360° panorama scenes
45
+ - `Poi/` - Various POI types (Gallery, Info, Navigation, Multimedia, Texture, etc.)
46
+ - `TourScenario/` - Automated tour playback with actions (LookingAt, Moving, Rotation, Sleep, etc.)
47
+ - `Plugins/` - Gyro, Radar, Sound plugins
48
+
49
+ 2. **SkinLayer** (`src/components/SkinLayer/`) - React UI components
50
+ - Components overlay on the 3D viewer providing interactivity
51
+ - Key components: Floorplan/Minimap, HotspotOverview, PlayBar, SearchAndDiscovery, PoiDetailSlideIn
52
+ - Uses Ant Design components with custom styling
53
+
54
+ 3. **State Management** (`src/hooks/useStore.tsx`)
55
+ - Context-based global state management
56
+ - Manages UI state, active POIs, scenarios, galleries, slide-ins
57
+ - Provides selectors for component consumption
58
+
59
+ 4. **Services Layer** (`src/services/Visualizer/`)
60
+ - `tour.service.ts` - Fetches tour data from API
61
+ - `poi.service.ts` - POI-related API calls
62
+ - `webRotate.service.ts` - Web rotation functionality
63
+ - `request.ts` - HTTP client wrapper
64
+
65
+ ### Key Architectural Patterns
66
+
67
+ **Krpano Integration**: The `Krpano` class wraps the Krpano viewer API and provides coordinate transformation utilities (`screentosphere`, `spheretoscreen`, `spheretospace`, `spacetosphere`). All 3D position calculations go through this abstraction.
68
+
69
+ **POI System**: POIs are polymorphic with a base `Poi` class and specialized subtypes (PoiInfo, PoiGallery, PoiVideo, PoiSound, etc.). Each type handles its own rendering and interaction logic within the Krpano viewer.
70
+
71
+ **Tour Scenario System**: Scenarios are composed of `TourScenarioStep` objects containing `TourScenarioAction` implementations. The `TourScenarioPlayer` executes actions sequentially (LookingAt → Moving → Rotation → Sleep patterns). Actions can have associated sounds managed by `ScenarioSound`.
72
+
73
+ **Signal-based Events**: Uses the `signals` library extensively for decoupled event handling between Visualizer and SkinLayer.
74
+
75
+ **Web Component Registration**: The library registers `<showroom-visualizer>` as a custom element (see `src/register.ts`) for easy embedding.
76
+
77
+ ### Configuration System
78
+
79
+ Configuration flows through multiple layers:
80
+
81
+ - External config passed to `initVisualizer()`
82
+ - `ConfigurationProvider` (src/hooks/useConfiguration.tsx) merges API host, override configs, listeners, middleware
83
+ - `StoreProvider` maintains runtime state
84
+ - `TourContext` provides global access to the Tour instance
85
+
86
+ ### Middleware System
87
+
88
+ The library supports a comprehensive **tracking middleware** system for analytics and monitoring:
89
+
90
+ **Architecture**:
91
+
92
+ - Middleware function passed to `initVisualizer({ middleware: (event) => {...} })`
93
+ - `useActionMiddleware` hook provides `trackAction()` function to components
94
+ - **35+ tracking actions** covering all user interactions
95
+ - **Tracking-only** - does not block or cancel actions (fire-and-forget pattern)
96
+ - Works independently of listeners (fires even without listeners configured)
97
+
98
+ **Complete Coverage**:
99
+
100
+ 1. **Search & Discovery** - All category clicks, search, individual item clicks (products, POIs, features, etc.)
101
+ 2. **POI Detail Panel** - Open/close, action buttons (AI, Save, Audio, Share), tab switching, gallery clicks
102
+ 3. **Scenario Playback** - Play/pause, skip, loop, sound toggle, scenario selection
103
+ 4. **Navigation** - Scene groups, floorplan changes, minimap controls
104
+ 5. **UI Components** - Guide, playbar, all interactive elements
105
+
106
+ **Key Features**:
107
+
108
+ - **Deep-level tracking** - Tracks not just categories but individual items within each category
109
+ - **Rich payloads** - Each event includes codes, names, types, and contextual data
110
+ - **User journey mapping** - Complete visibility into user interactions from discovery to engagement
111
+ - **Analytics-ready** - Designed for integration with GA4, Mixpanel, or custom backends
112
+
113
+ **Documentation**:
114
+
115
+ - 📚 **[Complete Tracking Guide](Planning/README-tracking-complete.md)** - Full reference of all 35+ tracking actions with examples
116
+ - 📖 **[Middleware Architecture](Planning/README-middleware.md)** - Core middleware system documentation
117
+ - 📝 **[Changes Summary](Planning/TRACKING-CHANGES-SUMMARY.md)** - List of all modified files and implementation details
118
+
119
+ ### Multi-language Support
120
+
121
+ Uses `i18next` with JSON translation files in `src/assets/locales/{en,cn,jp,kr,vi}/` covering chatbot, common, guide, nav, onboarding-screen, and skin-layer namespaces.
122
+
123
+ ## Development Notes
124
+
125
+ **TypeScript Paths**: Uses path aliases with `baseUrl: "./src"` so imports like `import { Tour } from 'models/Visualizer/Tour'` work without relative paths.
126
+
127
+ **Rollup Build**: Configured for ESM output with PostCSS (Tailwind), TypeScript compilation, and tree-shaking. Development mode skips uglify/terser/babel for faster rebuilds.
128
+
129
+ **CSS Architecture**: Mix of component-scoped CSS files (`src/assets/*.css`) and Tailwind utilities. Custom CSS variables set dynamically for modal positioning and hotspot states.
130
+
131
+ **State Persistence**: No localStorage/sessionStorage - state is ephemeral per session. Tours are fetched fresh via SWR caching.
132
+
133
+ **Mobile vs Desktop**: The `mobile` prop controls UI layout significantly - different slide-in behaviors, hotspot positioning, and touch controls.
134
+
135
+ ## Common Patterns
136
+
137
+ **Finding POIs**: Use `tour.getPoiByType(POI_TYPE.*)` or `tour.getPoisByIds(ids)`
138
+
139
+ **Scene Navigation**: `tour.changeScene(sceneCode)` or through navigation POIs
140
+
141
+ **Coordinate Conversion**: Always use `krpano.screentosphere()` / `spheretoscreen()` for position calculations between screen and 3D space
142
+
143
+ **Adding Listeners**: Tour emits signals for scene changes, POI interactions, scenario events - hook into these via `tour.signals.*`
144
+
145
+ **ESLint Rules**: The project uses TypeScript ESLint with Prettier integration. Note that `no-console` allows `info`, `warn`, `error` but not plain `log`.
package/README.md CHANGED
@@ -4,29 +4,352 @@
4
4
 
5
5
  Javascript library to display Clik Showroom Visualizer with UI on your website
6
6
 
7
+ ## Installation
8
+
9
+ ```bash
10
+ npm install @clikvn/showroom-visualizer
11
+ # or
12
+ yarn add @clikvn/showroom-visualizer
13
+ ```
14
+
15
+ ## Basic Usage
16
+
7
17
  ```html
8
18
  <!-- public/index.html -->
9
19
  <script type="module">
10
- import ShowroomVisualizer from 'http://localhost:3000/web.js';
11
- ShowroomVisualizer.initVisualizer({
12
- apiHost: 'https://ci-api.clik.vn/vt360',
13
- config: {
14
- tourCode: 'TOUR_FXYCEN7ZZVW6',
15
- language: 'EN'
16
- },
17
- onLoaded: tool => {
18
- window.tool = tool;
19
- },
20
- mobile: false
21
- });
20
+ import ShowroomVisualizer from 'http://localhost:3000/web.js';
21
+ ShowroomVisualizer.initVisualizer({
22
+ apiHost: 'https://ci-api.clik.vn/vt360',
23
+ config: {
24
+ tourCode: 'TOUR_FXYCEN7ZZVW6',
25
+ language: 'EN',
26
+ },
27
+ onLoaded: (tool) => {
28
+ window.tool = tool;
29
+ },
30
+ mobile: false,
31
+ });
22
32
  </script>
23
33
  <div style="width: 100vw; height: 100vh">
24
- <showroom-visualizer></showroom-visualizer>
34
+ <showroom-visualizer></showroom-visualizer>
25
35
  </div>
26
36
  ```
27
37
 
38
+ ## Features
39
+
40
+ - 🌐 **360° Virtual Tours** - Interactive panoramic experiences powered by Krpano
41
+ - 🎯 **Points of Interest (POI)** - Multiple POI types: Gallery, Video, Sound, Navigation, Texture, Promotions
42
+ - 🎬 **Automated Scenarios** - Guided tour playback with camera movements and narration
43
+ - 🗺️ **Floorplan/Minimap** - Interactive navigation with radar positioning
44
+ - 📱 **Mobile Optimized** - Touch controls and responsive layout for mobile devices
45
+ - 🌍 **Multi-language** - Support for EN, CN, JP, KR, VI
46
+ - 🎨 **Customizable UI** - Theme support and configurable components
47
+ - 📊 **Comprehensive Analytics** - **35+ tracking actions** covering all user interactions (see below)
48
+
49
+ ## Comprehensive Analytics & Tracking
50
+
51
+ The library includes a powerful **tracking middleware** system with **35+ actions** covering all user interactions:
52
+
53
+ ```typescript
54
+ import ShowroomVisualizer from '@clikvn/showroom-visualizer';
55
+
56
+ ShowroomVisualizer.initVisualizer({
57
+ apiHost: 'https://api.clik.vn',
58
+ config: { tourCode: 'TOUR_123' },
59
+
60
+ // Add tracking middleware
61
+ middleware: (event) => {
62
+ // Event structure:
63
+ // {
64
+ // actionName: 'onCardItemClick',
65
+ // payload: { itemCode, itemTitle, itemType, sceneCode, ... },
66
+ // timestamp: '2025-01-15T10:00:00.000Z',
67
+ // metadata: { tourCode, sceneCode, categoryCode }
68
+ // }
69
+
70
+ // Send to your analytics service
71
+ analytics.track(event.actionName, event.payload);
72
+ },
73
+ });
74
+ ```
75
+
76
+ ### What's Tracked (35+ Actions)
77
+
78
+ **Search & Discovery (6 actions)**
79
+
80
+ - Panel open/close, search queries
81
+ - Category header clicks (Products, Features, Locations, etc.)
82
+ - Promotion actions (show more, auto play)
83
+ - Individual scenario clicks
84
+
85
+ **Individual Items (1 universal action covering all types)**
86
+
87
+ - Product clicks
88
+ - POI clicks (Information, Features, Brands, Locations, Facilities, Multimedia)
89
+ - Feature clicks
90
+ - Promotion item clicks
91
+
92
+ **POI Detail Panel (5 actions)**
93
+
94
+ - Open/close, audio playback
95
+ - Action buttons (AI Assistant, Save, Audio, Share)
96
+ - Tab switching (Gallery, AR, Web Rotate, Info, Specification)
97
+ - Gallery item clicks
98
+
99
+ **Scenario Playback (8 actions)**
100
+
101
+ - Scenario start, play/pause
102
+ - Skip (next/previous), loop toggle
103
+ - Sound toggle, playlist toggle
104
+ - Playbar close
105
+
106
+ **Navigation (6 actions)**
107
+
108
+ - Scene group selection
109
+ - Floorplan changes
110
+ - Minimap expand/minimize
111
+ - View scenes button
112
+
113
+ **UI Components (1+ actions)**
114
+
115
+ - Guide open/close
116
+ - Other UI interactions
117
+
118
+ ### Key Features
119
+
120
+ ✅ **Deep-level tracking** - Not just categories, but individual items within each category
121
+ ✅ **Rich payloads** - Codes, names, types, and contextual data for every action
122
+ ✅ **User journey mapping** - Complete visibility from discovery to engagement
123
+ ✅ **Zero overhead** - No performance impact when middleware not configured
124
+ ✅ **Fire-and-forget** - Non-blocking, error-safe pattern
125
+ ✅ **Analytics-ready** - Easy integration with GA4, Mixpanel, or custom backends
126
+
127
+ ### Complete List of Tracked Events (35+ Actions)
128
+
129
+ #### Search & Discovery (6 events)
130
+
131
+ | Event Name | Trigger | Payload |
132
+ | ----------------------------------- | --------------------------- | ---------------------------------- |
133
+ | `onSearchAndDiscoveryClose` | Panel closed | `{}` |
134
+ | `onSearchAndDiscoverySearch` | User types in search | `{ searchQuery }` |
135
+ | `onSearchAndDiscoveryItemClick` | Category header clicked | `{ itemKey, itemTitle, itemType }` |
136
+ | `onSearchAndDiscoveryScenarioClick` | Scenario clicked from panel | `{ scenarioCode, scenarioName }` |
137
+ | `onPromotionShowMore` | Show more button clicked | `{ totalPromotions }` |
138
+ | `onPromotionAutoPlay` | Auto play button clicked | `{ totalPromotions }` |
139
+
140
+ **Categories tracked:** HOME, AMENITIES, SCENE, PROMOTION, FEATURES, PRODUCT_LIST, INFORMATION, BRAND, LOCATION, FACILITY, MULTIMEDIA, SWAP_ELEMENT, SCENARIO, PLAYLIST, DISPLAY_HOTSPOT, DETAIL
141
+
142
+ #### Individual Items - Universal (1 event covering ALL types)
143
+
144
+ | Event Name | Trigger | Payload |
145
+ | ----------------- | ---------------------------------------------- | -------------------------------------------------------------------- |
146
+ | `onCardItemClick` | Any item clicked (product, POI, feature, etc.) | `{ itemCode, itemTitle, itemType, sceneCode, hotspotCode, isVideo }` |
147
+
148
+ **Item types covered:** Products, Information POIs, Features, Brands, Locations, Facilities, Multimedia, Swap Elements, Promotions
149
+
150
+ #### POI Detail Panel (5 events)
151
+
152
+ | Event Name | Trigger | Payload |
153
+ | ------------------------- | ------------------------- | ----------------------------------------------------------- |
154
+ | `onPoiDetailClose` | Detail panel closed | `{ poiCode, poiName, poiType }` |
155
+ | `onPoiDetailAudioPlay` | Audio play button clicked | `{ poiCode, poiName, poiType }` |
156
+ | `onPoiDetailGalleryClick` | Gallery item clicked | `{ poiCode, poiName, poiType, galleryItemId, galleryType }` |
157
+ | `onPoiDetailActionClick` | Action button clicked | `{ actionKey, productCode, productName, productType }` |
158
+ | `onPoiDetailTabChange` | Tab switched | `{ tabKey, productCode, productName, galleryType }` |
159
+
160
+ **Action keys:** `ai_assistant`, `save`, `audio`, `share`
161
+ **Tab keys:** `gallery`, `ar`, `webRotate`, `info`, `specification`
162
+
163
+ #### Scenario Playback (8 events)
164
+
165
+ | Event Name | Trigger | Payload |
166
+ | ---------------------- | -------------------------- | ----------------------------- |
167
+ | `onStartScenario` | Scenario started from list | `scenarioCode` (string) |
168
+ | `onPlayBarClose` | Playbar closed | `{ scenarioCode }` |
169
+ | `onPlayListToggle` | Playlist toggled | `{ show }` |
170
+ | `onPlayBarPlayClick` | Play button clicked | `{ scenarioCode }` |
171
+ | `onPlayBarPauseClick` | Pause button clicked | `{ scenarioCode }` |
172
+ | `onPlayBarLoopToggle` | Loop toggled | `{ loop, scenarioCode }` |
173
+ | `onPlayBarSoundToggle` | Sound toggled | `{ playing }` |
174
+ | `onPlayBarSkip` | Skip button clicked | `{ direction, scenarioCode }` |
175
+
176
+ **Direction values:** `'previous'` or `'next'`
177
+
178
+ #### Navigation (6 events)
179
+
180
+ | Event Name | Trigger | Payload |
181
+ | ------------------------- | -------------------------- | ------------------------------------------ |
182
+ | `onSceneGroupSelected` | Scene group selected | `{ sceneGroupCode, sceneGroupName }` |
183
+ | `onSubSceneGroupSelected` | Sub scene group selected | `{ subSceneGroupCode, subSceneGroupName }` |
184
+ | `onFloorplanViewScenes` | View scenes button clicked | `{}` |
185
+ | `onFloorplanChange` | Floorplan changed | `{ floorplanCode, floorplanName }` |
186
+ | `onMinimapExpand` | Minimap expanded | `{}` |
187
+ | `onMinimapMinimize` | Minimap minimized | `{}` |
188
+
189
+ #### UI Components (1+ events)
190
+
191
+ | Event Name | Trigger | Payload |
192
+ | -------------- | -------------------- | ------- |
193
+ | `onGuideClose` | Guide overlay closed | `{}` |
194
+
195
+ ### Analytics Integration Examples
196
+
197
+ **Google Analytics 4:**
198
+
199
+ ```typescript
200
+ middleware: (event) => {
201
+ gtag('event', event.actionName, {
202
+ event_category: 'showroom',
203
+ tour_code: event.metadata?.tourCode,
204
+ ...event.payload,
205
+ });
206
+ };
207
+ ```
208
+
209
+ **Mixpanel:**
210
+
211
+ ```typescript
212
+ middleware: (event) => {
213
+ mixpanel.track(event.actionName, {
214
+ tour_code: event.metadata?.tourCode,
215
+ ...event.payload,
216
+ });
217
+ };
218
+ ```
219
+
220
+ **Custom Backend:**
221
+
222
+ ```typescript
223
+ middleware: async (event) => {
224
+ await fetch('/api/analytics', {
225
+ method: 'POST',
226
+ headers: { 'Content-Type': 'application/json' },
227
+ body: JSON.stringify(event),
228
+ });
229
+ };
230
+ ```
231
+
232
+ > **📚 Detailed Documentation:** For complete examples, user journey scenarios, and implementation patterns, see [Complete Tracking Guide](./Planning/README-tracking-complete.md)
233
+
234
+ ## Available Listeners
235
+
236
+ The library provides **21+ event listeners** for custom app logic:
237
+
238
+ | Listener | Description | Payload |
239
+ | ----------------------- | --------------------- | ------------------------- |
240
+ | **POI Events** |
241
+ | `onPoiClicked` | POI clicked | POI object |
242
+ | `onPoiOver` | Mouse over POI | POI object |
243
+ | `onPoiHover` | Mouse hovering POI | POI object |
244
+ | `onPoiOut` | Mouse left POI | - |
245
+ | `onPoiInCenter` | POI nearest to center | POI object |
246
+ | **Scene Events** |
247
+ | `onSceneCompleted` | Scene loaded | `sceneCode, categoryCode` |
248
+ | `onSceneChanged` | Scene navigated | Scene object |
249
+ | **Scenario Events** |
250
+ | `onStartScenario` | Scenario started | `scenarioCode` |
251
+ | `onScenarioPaused` | Scenario paused | `scenarioCode` |
252
+ | `onScenarioEnded` | Scenario ended | `scenarioCode` |
253
+ | **UI Events** |
254
+ | `onToggleSlideIn` | Slide-in toggled | `{ open, offset }` |
255
+ | `onPlaybarOpen` | Playbar opened | - |
256
+ | `onPlaybarClosed` | Playbar closed | - |
257
+ | `onPinActionClicked` | Pin button clicked | Button key string |
258
+ | **Tour Lifecycle** |
259
+ | `onStartLoadingTour` | Tour load started | `tourCode` |
260
+ | `onFinishedLoadingTour` | Tour load finished | `tourCode` |
261
+ | `onLoaded` | Tool ready | Tool object |
262
+ | `onDataLoaded` | Tour data loaded | `tour, tourData` |
263
+ | **Product Events** |
264
+ | `onAIProductClicked` | AI product clicked | Product code |
265
+ | `onShareProductClicked` | Share product clicked | Product code |
266
+ | **Other Events** |
267
+ | `onChanged` | Config changed | Config object |
268
+ | `onTourSwitchLoaded` | Tour switch ready | TourSwitch object |
269
+ | `onStateChanged` | State changed | State values |
270
+
271
+ ## Key Differences: Listeners vs Middleware
272
+
273
+ | Feature | Listeners | Middleware (Tracked Actions) |
274
+ | -------------- | ------------------ | ------------------------------ |
275
+ | **Purpose** | Custom app logic | Analytics & tracking |
276
+ | **When fires** | Only if configured | Always (if middleware set) |
277
+ | **Count** | 21+ events | 35+ actions |
278
+ | **Use case** | App functionality | User behavior insights |
279
+ | **Blocking** | Can be blocking | Non-blocking (fire-and-forget) |
280
+
281
+ **Example:**
282
+
283
+ - Use **listeners** to trigger custom UI updates when a scene changes
284
+ - Use **middleware** to track that scene change in your analytics platform
285
+
286
+ Both can be used together - listeners for app logic, middleware for analytics!
287
+
288
+ ## Configuration Options
289
+
290
+ ```typescript
291
+ ShowroomVisualizer.initVisualizer({
292
+ // Required
293
+ apiHost: string; // API endpoint URL
294
+ config: {
295
+ tourCode: string; // Tour identifier
296
+ language?: string; // 'EN' | 'CN' | 'JP' | 'KR' | 'VI'
297
+ };
298
+
299
+ // Optional
300
+ mobile?: boolean; // Mobile mode
301
+ onLoaded?: (tool) => void; // Callback when loaded
302
+ middleware?: (event) => void; // Analytics tracking
303
+ listeners?: { // Event listeners (see table above)
304
+ onPoiClicked?: (poi) => void;
305
+ onSceneChanged?: (scene) => void;
306
+ onStartScenario?: (scenarioCode) => void;
307
+ onPinActionClicked?: (key) => void;
308
+ onSceneCompleted?: (sceneCode, categoryCode) => void;
309
+ // ... 16+ more listeners available
310
+ };
311
+ });
312
+ ```
313
+
314
+ ## Development
315
+
316
+ ```bash
317
+ # Development with hot reload
318
+ yarn dev
319
+
320
+ # Production build
321
+ yarn build
322
+
323
+ # Linting
324
+ yarn lint
325
+ yarn lint:fix
326
+
327
+ # Code formatting
328
+ yarn prettier
329
+
330
+ # Serve built files locally
331
+ serve dist --cors
332
+ ```
333
+
334
+ ## Documentation
335
+
336
+ ### Core Documentation
337
+
338
+ - **[CLAUDE.md](./CLAUDE.md)** - Complete architecture overview and development guide
339
+ - **[README.md](./README.md)** - This file - Quick start and API reference
340
+
341
+ ### Analytics & Tracking
342
+
343
+ - 📚 **[Complete Tracking Guide](./Planning/README-tracking-complete.md)** - Full reference for all 35+ tracking actions
344
+ - 📖 **[Quick Reference Card](./Planning/TRACKING-QUICK-REFERENCE.md)** - Handy cheat sheet for developers
345
+ - 📝 **[Middleware Architecture](./Planning/README-middleware.md)** - Core middleware system documentation
346
+ - 📋 **[Changes Summary](./Planning/TRACKING-CHANGES-SUMMARY.md)** - Implementation details and file list
347
+
348
+ ### Planning & Specifications
28
349
 
350
+ - **[Planning/](./Planning/)** - Feature planning and specifications
351
+ - [TEMPLATE.md](./Planning/TEMPLATE.md) - Template for new feature planning
29
352
 
353
+ ## License
30
354
 
31
- add <Scripts /> in ShowroomVisualizer load js ÂR
32
- serve dist --cors
355
+ Proprietary - Clik Vietnam
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/commons/SkinLayer/components/CardItemGroup/Item.tsx"],"names":[],"mappings":"AAMA,OAAc,EACZ,EAAE,EAEF,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,UAAU,kBAAmB,SAAQ,aAAa;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,kBAAkB,CAiLpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/commons/SkinLayer/components/CardItemGroup/Item.tsx"],"names":[],"mappings":"AAOA,OAAc,EACZ,EAAE,EAEF,SAAS,EAIV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,UAAU,kBAAmB,SAAQ,aAAa;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,kBAAkB,CA8LpC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/ActionsChangeScene/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAoD,MAAM,OAAO,CAAC;AAQ7E,QAAA,MAAM,kBAAkB,EAAE,EA4QzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/ActionsChangeScene/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAoD,MAAM,OAAO,CAAC;AAS7E,QAAA,MAAM,kBAAkB,EAAE,EAyRzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/Floorplan/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAQN,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK1D,eAAO,MAAM,cAAc,GAAI,GAAG,aAAa,EAAE,GAAG,aAAa,WAKhE,CAAC;AA4iBF,QAAA,MAAM,aAAa;UAlgBS,OAAO;EAkgBE,CAAC;AACtC,OAAO,EAAE,aAAa,IAAI,SAAS,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/Floorplan/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAQN,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAK1D,eAAO,MAAM,cAAc,GAAI,GAAG,aAAa,EAAE,GAAG,aAAa,WAKhE,CAAC;AA6jBF,QAAA,MAAM,aAAa;UAnhBS,OAAO;EAmhBE,CAAC;AACtC,OAAO,EAAE,aAAa,IAAI,SAAS,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/Guide/index.tsx"],"names":[],"mappings":"AAoOA,QAAA,MAAM,SAAS,0CAAc,CAAC;AAC9B,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/Guide/index.tsx"],"names":[],"mappings":"AAyOA,QAAA,MAAM,SAAS,0CAAc,CAAC;AAC9B,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/HotspotOverview/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,EAAE,EAOH,MAAM,OAAO,CAAC;AA+Ef,QAAA,MAAM,eAAe,EAAE,EAwctB,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/HotspotOverview/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,EAAE,EAOH,MAAM,OAAO,CAAC;AAgFf,QAAA,MAAM,eAAe,EAAE,EAydtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PinActionButtons/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,eAAO,MAAM,mBAAmB,2BAA2B,CAAC;AAU5D,KAAK,mBAAmB,GAAG;IACzB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC;CAChE,CAAC;;AAkgBF,wBAAgC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PinActionButtons/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAG/D,eAAO,MAAM,mBAAmB,2BAA2B,CAAC;AAU5D,KAAK,mBAAmB,GAAG;IACzB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI,KAAK,IAAI,CAAC;CAChE,CAAC;;AAwgBF,wBAAgC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PlayBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAcrE,QAAA,MAAM,OAAO,EAAE,EAgUd,CAAC;AAEF,eAAe,OAAO,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PlayBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AAerE,QAAA,MAAM,OAAO,EAAE,EA6Vd,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Detail.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PoiDetailSlideIn/Detail.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAMnC,QAAA,MAAM,aAAa,GAAI,+CAKpB;IACD,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,4CAoOA,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"Detail.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PoiDetailSlideIn/Detail.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,cAAc,EAAE,MAAM,GAAG,CAAC;AAMnC,QAAA,MAAM,aAAa,GAAI,+CAKpB;IACD,OAAO,EAAE,cAAc,CAAC;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,4CAyPA,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PoiDetailSlideIn/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,EAAE,EAMH,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAOvE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EAqKvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/PoiDetailSlideIn/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EACL,EAAE,EAMH,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AAOvE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IAEb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,QAAA,MAAM,gBAAgB,EAAE,EA8LvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/ScenarioList/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,EAAE,EAOH,MAAM,OAAO,CAAC;AAkCf,QAAA,MAAM,YAAY,EAAE,EAwInB,CAAC;AAEF,eAAe,YAAY,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/ScenarioList/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,EAAE,EAOH,MAAM,OAAO,CAAC;AAmCf,QAAA,MAAM,YAAY,EAAE,EA4InB,CAAC;AAEF,eAAe,YAAY,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/SceneCategories/index.tsx"],"names":[],"mappings":"AAuPA,QAAA,MAAM,mBAAmB,0CAAwB,CAAC;AAClD,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/SceneCategories/index.tsx"],"names":[],"mappings":"AA4PA,QAAA,MAAM,mBAAmB,0CAAwB,CAAC;AAClD,OAAO,EAAE,mBAAmB,IAAI,eAAe,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/ContentItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAQ,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACvC,CAAC;AAwCF,QAAA,MAAM,eAAe,oEAAoB,CAAC;AAC1C,OAAO,EAAE,eAAe,IAAI,WAAW,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/ContentItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAAQ,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,4BAA4B,GAAG;IACzC,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACvC,CAAC;AAiDF,QAAA,MAAM,eAAe,oEAAoB,CAAC;AAC1C,OAAO,EAAE,eAAe,IAAI,WAAW,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/PoiInfoActionPart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAajF,oBAAY,OAAO;IACjB,MAAM,IAAA;IACN,MAAM,IAAA;CACP;AAED,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACtD,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,SAAS,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAuKjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/PoiInfoActionPart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAEF,SAAS,EAIV,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAC;AAajF,oBAAY,OAAO;IACjB,MAAM,IAAA;IACN,MAAM,IAAA;CACP;AAED,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IACtD,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,SAAS,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAwKjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/PromotionPart/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAIvE,KAAK,kBAAkB,GAAG;IACxB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,SAAS,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+IzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/PromotionPart/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAmC,MAAM,OAAO,CAAC;AAIvE,KAAK,kBAAkB,GAAG;IACxB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC1C,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,SAAS,CAAC;CAC1D,CAAC;AAEF,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4JzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/ScenariosPart/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAA+B,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAQtE,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,iBAAiB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACvC,CAAC;AA4DF,QAAA,MAAM,gBAAgB,6DAAqB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,IAAI,YAAY,EAAE,CAAC"}
1
+ {"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/ScenariosPart/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,SAAS,EAA+B,MAAM,OAAO,CAAC;AAEnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAStE,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,iBAAiB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAC;CACvC,CAAC;AAmEF,QAAA,MAAM,gBAAgB,6DAAqB,CAAC;AAC5C,OAAO,EAAE,gBAAgB,IAAI,YAAY,EAAE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/index.tsx"],"names":[],"mappings":"AAwQA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAQjC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/SearchAndDiscoverySlideIn/index.tsx"],"names":[],"mappings":"AAwRA,MAAM,CAAC,OAAO,UAAU,UAAU,4CAQjC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/TourScenarios/index.tsx"],"names":[],"mappings":"AAyNA,QAAA,MAAM,iBAAiB,0CAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,IAAI,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SkinLayer/TourScenarios/index.tsx"],"names":[],"mappings":"AA8NA,QAAA,MAAM,iBAAiB,0CAAsB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,IAAI,aAAa,EAAE,CAAC"}
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { ProductType, VisualizerListenersType } from '../../types/SkinLayer';
2
+ import { ActionMiddleware, ProductType, VisualizerListenersType } from '../../types/SkinLayer';
3
3
  type VirtualTourVisualizerProps = {
4
4
  elementId?: string;
5
5
  apiHost?: string;
@@ -16,6 +16,7 @@ type VirtualTourVisualizerProps = {
16
16
  };
17
17
  listeners?: VisualizerListenersType;
18
18
  products?: ProductType[];
19
+ middleware?: ActionMiddleware;
19
20
  };
20
21
  declare const ShowroomVisualizer: FC<VirtualTourVisualizerProps>;
21
22
  export default ShowroomVisualizer;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/features/ShowroomVisualizer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,EAAE,EAKH,MAAM,OAAO,CAAC;AAUf,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAO7E,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B,CAAC;AACF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,0BAA0B,CAoRtD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/features/ShowroomVisualizer/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,EAAE,EAKH,MAAM,OAAO,CAAC;AAUf,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,uBAAuB,EACxB,MAAM,uBAAuB,CAAC;AAO/B,KAAK,0BAA0B,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;IACF,SAAS,CAAC,EAAE,uBAAuB,CAAC;IACpC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AACF,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,0BAA0B,CAuRtD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"useTourVisualizer.d.ts","sourceRoot":"","sources":["../../../src/hooks/Visualizer/useTourVisualizer.ts"],"names":[],"mappings":"AAuBA,QAAA,MAAM,iBAAiB,YAolBtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
1
+ {"version":3,"file":"useTourVisualizer.d.ts","sourceRoot":"","sources":["../../../src/hooks/Visualizer/useTourVisualizer.ts"],"names":[],"mappings":"AAwBA,QAAA,MAAM,iBAAiB,YA0mBtB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}