@clikvn/showroom-visualizer 0.5.1 → 0.5.2

package/example/src/App.tsx

@@ -0,0 +1,195 @@
+import { useState } from 'react';
+import { ShowroomVisualizer } from '@clikvn/showroom-visualizer';
+import ControlPanel from './components/ControlPanel';
+import { useCustomLayout } from './hooks/useCustomLayout';
+
+function App() {
+  const [enableCustomLayout, setEnableCustomLayout] = useState(true);
+  const [language, setLanguage] = useState<'vi' | 'en'>('vi');
+
+  // Floorplan/Minimap custom toggles
+  const [customMinimap, setCustomMinimap] = useState(false);
+  const [customMarker, setCustomMarker] = useState(false);
+
+  // PinActions custom toggles
+  const [customPinActions, setCustomPinActions] = useState(false);
+  const [customPinActionButton, setCustomPinActionButton] = useState(false);
+  const [
+    customPinActionButtonWithTooltip,
+    setCustomPinActionButtonWithTooltip,
+  ] = useState(false);
+
+  // SearchAndDiscoverySlideIn custom toggles
+  const [customSearchAndDiscovery, setCustomSearchAndDiscovery] =
+    useState(false);
+  const [customTourInfoActionPart, setCustomTourInfoActionPart] =
+    useState(false);
+  const [customScenarioPart, setCustomScenarioPart] = useState(false);
+  const [customPromotionPart, setCustomPromotionPart] = useState(false);
+  const [customPoiInfoActionPart, setCustomPoiInfoActionPart] = useState(false);
+  const [customDisplayActionPart, setCustomDisplayActionPart] = useState(false);
+  const [customHelpActionPart, setCustomHelpActionPart] = useState(false);
+  const [customContentItem, setCustomContentItem] = useState(false);
+  const [customScenarioItem, setCustomScenarioItem] = useState(false);
+  const [customCardItem, setCustomCardItem] = useState(false);
+
+  // HotspotCategorySlideIn custom toggles
+  const [customHotspotCategorySlideIn, setCustomHotspotCategorySlideIn] =
+    useState(false);
+  const [customScenarioSlideIn, setCustomScenarioSlideIn] = useState(false);
+  const [customSpaceAndSceneSlideIn, setCustomSpaceAndSceneSlideIn] =
+    useState(false);
+  const [customFeatureSlideIn, setCustomFeatureSlideIn] = useState(false);
+  const [customProductSlideIn, setCustomProductSlideIn] = useState(false);
+  const [customPoiSlideIn, setCustomPoiSlideIn] = useState(false);
+
+  // PlayBar custom toggles
+  const [customPlayBarTooltip, setCustomPlayBarTooltip] = useState(false);
+  const [customPlayBarButton, setCustomPlayBarButton] = useState(false);
+
+  // PoiDetailSlideIn custom toggles
+  const [customPoiDetailDrawer, setCustomPoiDetailDrawer] = useState(false);
+  const [customPoiDetailBottomSheet, setCustomPoiDetailBottomSheet] =
+    useState(false);
+  const [customProductDetailHeader, setCustomProductDetailHeader] =
+    useState(false);
+  const [customGroupActionButton, setCustomGroupActionButton] = useState(false);
+  const [customTabs, setCustomTabs] = useState(false);
+  const [customTabsContent, setCustomTabsContent] = useState(false);
+  const [customInfo, setCustomInfo] = useState(false);
+  const [customGallery, setCustomGallery] = useState(false);
+  const [customArTab, setCustomArTab] = useState(false);
+
+  const { buildCustomLayout } = useCustomLayout({
+    enableCustomLayout,
+    customMinimap,
+    customMarker,
+    customPinActions,
+    customPinActionButton,
+    customPinActionButtonWithTooltip,
+    customSearchAndDiscovery,
+    customTourInfoActionPart,
+    customScenarioPart,
+    customPromotionPart,
+    customPoiInfoActionPart,
+    customDisplayActionPart,
+    customHelpActionPart,
+    customContentItem,
+    customScenarioItem,
+    customCardItem,
+    customHotspotCategorySlideIn,
+    customScenarioSlideIn,
+    customSpaceAndSceneSlideIn,
+    customFeatureSlideIn,
+    customProductSlideIn,
+    customPoiSlideIn,
+    customPlayBarTooltip,
+    customPlayBarButton,
+    customPoiDetailDrawer,
+    customPoiDetailBottomSheet,
+    customProductDetailHeader,
+    customGroupActionButton,
+    customTabs,
+    customTabsContent,
+    customInfo,
+    customGallery,
+    customArTab,
+  });
+
+  return (
+    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      {/* Control Panel */}
+      {/* <ControlPanel
+        enableCustomLayout={enableCustomLayout}
+        language={language}
+        onEnableCustomLayoutChange={setEnableCustomLayout}
+        onLanguageChange={setLanguage}
+        customMinimap={customMinimap}
+        customMarker={customMarker}
+        onCustomMinimapChange={setCustomMinimap}
+        onCustomMarkerChange={setCustomMarker}
+        customPinActions={customPinActions}
+        customPinActionButton={customPinActionButton}
+        customPinActionButtonWithTooltip={customPinActionButtonWithTooltip}
+        onCustomPinActionsChange={setCustomPinActions}
+        onCustomPinActionButtonChange={setCustomPinActionButton}
+        onCustomPinActionButtonWithTooltipChange={
+          setCustomPinActionButtonWithTooltip
+        }
+        customSearchAndDiscovery={customSearchAndDiscovery}
+        customTourInfoActionPart={customTourInfoActionPart}
+        customScenarioPart={customScenarioPart}
+        customPromotionPart={customPromotionPart}
+        customPoiInfoActionPart={customPoiInfoActionPart}
+        customDisplayActionPart={customDisplayActionPart}
+        customHelpActionPart={customHelpActionPart}
+        customContentItem={customContentItem}
+        customScenarioItem={customScenarioItem}
+        customCardItem={customCardItem}
+        onCustomSearchAndDiscoveryChange={setCustomSearchAndDiscovery}
+        onCustomTourInfoActionPartChange={setCustomTourInfoActionPart}
+        onCustomScenarioPartChange={setCustomScenarioPart}
+        onCustomPromotionPartChange={setCustomPromotionPart}
+        onCustomPoiInfoActionPartChange={setCustomPoiInfoActionPart}
+        onCustomDisplayActionPartChange={setCustomDisplayActionPart}
+        onCustomHelpActionPartChange={setCustomHelpActionPart}
+        onCustomContentItemChange={setCustomContentItem}
+        onCustomScenarioItemChange={setCustomScenarioItem}
+        onCustomCardItemChange={setCustomCardItem}
+        customHotspotCategorySlideIn={customHotspotCategorySlideIn}
+        customScenarioSlideIn={customScenarioSlideIn}
+        customSpaceAndSceneSlideIn={customSpaceAndSceneSlideIn}
+        customFeatureSlideIn={customFeatureSlideIn}
+        customProductSlideIn={customProductSlideIn}
+        customPoiSlideIn={customPoiSlideIn}
+        onCustomHotspotCategorySlideInChange={setCustomHotspotCategorySlideIn}
+        onCustomScenarioSlideInChange={setCustomScenarioSlideIn}
+        onCustomSpaceAndSceneSlideInChange={setCustomSpaceAndSceneSlideIn}
+        onCustomFeatureSlideInChange={setCustomFeatureSlideIn}
+        onCustomProductSlideInChange={setCustomProductSlideIn}
+        onCustomPoiSlideInChange={setCustomPoiSlideIn}
+        customPlayBarTooltip={customPlayBarTooltip}
+        customPlayBarButton={customPlayBarButton}
+        onCustomPlayBarTooltipChange={setCustomPlayBarTooltip}
+        onCustomPlayBarButtonChange={setCustomPlayBarButton}
+        customPoiDetailDrawer={customPoiDetailDrawer}
+        customPoiDetailBottomSheet={customPoiDetailBottomSheet}
+        customProductDetailHeader={customProductDetailHeader}
+        customGroupActionButton={customGroupActionButton}
+        customTabs={customTabs}
+        customTabsContent={customTabsContent}
+        customInfo={customInfo}
+        customGallery={customGallery}
+        customArTab={customArTab}
+        onCustomPoiDetailDrawerChange={setCustomPoiDetailDrawer}
+        onCustomPoiDetailBottomSheetChange={setCustomPoiDetailBottomSheet}
+        onCustomProductDetailHeaderChange={setCustomProductDetailHeader}
+        onCustomGroupActionButtonChange={setCustomGroupActionButton}
+        onCustomTabsChange={setCustomTabs}
+        onCustomTabsContentChange={setCustomTabsContent}
+        onCustomInfoChange={setCustomInfo}
+        onCustomGalleryChange={setCustomGallery}
+        onCustomArTabChange={setCustomArTab}
+      /> */}
+
+      {/* Visualizer */}
+      <div
+        style={{ flex: 1, position: 'relative', width: '100%', height: '100%' }}
+      >
+        <ShowroomVisualizer
+          apiHost="https://ci-api.clik.vn/vt360"
+          webRotateApiHost="https://ci-api.clik.vn/cms"
+          webRotateClientHost="https://ci-webrotate360-client.clik.vn"
+          config={{
+            language,
+            tourCode: 'TOUR_7YUL2ALGFL94',
+          }}
+          mobile={false}
+          customLayout={buildCustomLayout()}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default App;