@3cr/viewer-browser 0.0.117 → 0.0.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3cr/viewer-browser",
-  "version": "0.0.117",
+  "version": "0.0.119",
   "main": "./dist/Viewer3CR.umd.js",
   "module": "dist/Viewer3CR.umd.js",
   "homepage": "https://docs.3cr.singular.health",

package/src/assets/images/dark/demo-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="1500" height="1500" viewBox="0 0 1500 1500"><rect width="1500" height="1500" fill="#00000000"></rect><g transform="matrix(0.6666666666666666,0,0,0.6666666666666666,249.39393939393938,699.7570253441612)"><svg viewBox="0 0 396 40" data-background-color="#ffffff" preserveAspectRatio="xMidYMid meet" height="151" width="1500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="tight-bounds" transform="matrix(1,0,0,1,0.2400000000000091,-0.035904110262748645)"><svg viewBox="0 0 395.52 40.07180822052549" height="40.07180822052549" width="395.52"><g><svg viewBox="0 0 437.0186036473404 44.27620771176696" height="40.07180822052549" width="395.52"><g transform="matrix(1,0,0,1,0,6.1192153928708315)"><svg viewBox="0 0 395.52 32.037776926025295" height="32.037776926025295" width="395.52"><g id="textblocktransform"><svg viewBox="0 0 395.52 32.037776926025295" height="32.037776926025295" width="395.52" id="textblock"><g><svg viewBox="0 0 395.52 32.037776926025295" height="32.037776926025295" width="395.52"><g transform="matrix(1,0,0,1,0,0)"><svg width="395.52" viewBox="1.05 -31.05 391.32 31.7" height="32.037776926025295" data-palette-color="#085f63"><path d="M15.7-10.9L15.7-10.9 12.15-10.9Q10.75-13 9.22-15.33 7.7-17.65 6.23-20.05 4.75-22.45 3.43-24.78 2.1-27.1 1.05-29.1L1.05-29.1Q1.25-29.65 1.8-30.18 2.35-30.7 3.25-30.7L3.25-30.7Q4.2-30.7 4.73-30.2 5.25-29.7 5.8-28.7L5.8-28.7Q6.45-27.55 7.28-26.13 8.1-24.7 9-23.13 9.9-21.55 10.8-20 11.7-18.45 12.48-17.1 13.25-15.75 13.85-14.75L13.85-14.75 14.05-14.75Q15.8-17.65 17.25-20.25 18.7-22.85 20.05-25.35 21.4-27.85 22.7-30.35L22.7-30.35Q23-30.55 23.45-30.63 23.9-30.7 24.25-30.7L24.25-30.7Q25.2-30.7 25.68-30.25 26.15-29.8 26.15-29L26.15-29Q26.15-28.5 25.38-26.88 24.6-25.25 23.2-22.83 21.8-20.4 19.9-17.35 18-14.3 15.7-10.9ZM11.9-1.6L11.9-12.85 15.95-12.85 15.95-0.1Q15.7 0 15.18 0.13 14.65 0.25 14.1 0.25L14.1 0.25Q13 0.25 12.45-0.2 11.9-0.65 11.9-1.6L11.9-1.6ZM59.2-15.2L59.2-15.2 59.2-15.2Q59.2-10 57.3-6.48 55.4-2.95 52.12-1.15 48.85 0.65 44.7 0.65L44.7 0.65Q40.6 0.65 37.3-1.15 34-2.95 32.1-6.48 30.2-10 30.2-15.2L30.2-15.2Q30.2-20.4 32.15-23.93 34.1-27.45 37.37-29.25 40.65-31.05 44.7-31.05L44.7-31.05Q48.8-31.05 52.07-29.25 55.35-27.45 57.27-23.93 59.2-20.4 59.2-15.2ZM55.05-15.2L55.05-15.2 55.05-15.2Q55.05-21.15 52.22-24.38 49.4-27.6 44.7-27.6L44.7-27.6Q40.05-27.6 37.22-24.38 34.4-21.15 34.4-15.2L34.4-15.2Q34.4-9.25 37.2-6.03 40-2.8 44.7-2.8L44.7-2.8Q49.45-2.8 52.25-6.03 55.05-9.25 55.05-15.2ZM78.15 0.65L78.15 0.65 78.15 0.65Q74.4 0.65 71.75-0.73 69.1-2.1 67.72-4.63 66.35-7.15 66.35-10.5L66.35-10.5 66.35-14.6 70.4-14.6 70.4-10.85Q70.4-6.85 72.62-4.83 74.85-2.8 78.15-2.8L78.15-2.8Q81.45-2.8 83.67-4.83 85.9-6.85 85.9-10.85L85.9-10.85 85.9-14.6 90-14.6 90-10.5Q90-7.15 88.62-4.63 87.25-2.1 84.6-0.73 81.95 0.65 78.15 0.65ZM70.4-28.8L70.4-12.55 66.35-12.55 66.35-30.3Q66.6-30.4 67.12-30.53 67.65-30.65 68.25-30.65L68.25-30.65Q69.35-30.65 69.87-30.23 70.4-29.8 70.4-28.8L70.4-28.8ZM90-28.8L90-12.55 85.9-12.55 85.9-30.3Q86.15-30.4 86.67-30.53 87.2-30.65 87.8-30.65L87.8-30.65Q88.9-30.65 89.45-30.23 90-29.8 90-28.8L90-28.8ZM102.89-27.1L102.89-14.9 108.64-14.9Q112.34-14.9 114.44-16.5 116.54-18.1 116.54-21.25L116.54-21.25Q116.54-24.35 114.34-25.95 112.14-27.55 108.04-27.55L108.04-27.55Q106.69-27.55 105.32-27.43 103.94-27.3 102.89-27.1L102.89-27.1ZM108.64-11.5L108.64-11.5 98.84-11.5 98.84-28.2Q98.84-29 99.27-29.43 99.69-29.85 100.49-30.1L100.49-30.1Q101.94-30.55 104.07-30.75 106.19-30.95 108.19-30.95L108.19-30.95Q114.44-30.95 117.54-28.4 120.64-25.85 120.64-21.25L120.64-21.25Q120.64-18.3 119.29-16.1 117.94-13.9 115.29-12.7 112.64-11.5 108.64-11.5ZM116.94-1.3L108.74-12.8 111.74-14.3Q113.14-12.55 114.64-10.65 116.14-8.75 117.54-6.95 118.94-5.15 120.04-3.73 121.14-2.3 121.74-1.5L121.74-1.5Q121.54-0.65 120.87-0.15 120.19 0.35 119.49 0.35L119.49 0.35Q118.64 0.35 118.09-0.08 117.54-0.5 116.94-1.3L116.94-1.3ZM98.84-1.6L98.84-12.6 102.94-12.6 102.94-0.1Q102.64 0 102.14 0.13 101.64 0.25 101.04 0.25L101.04 0.25Q99.94 0.25 99.39-0.2 98.84-0.65 98.84-1.6L98.84-1.6ZM143.29-2.2L143.29-17.75 147.39-17.75 147.39-0.4 145.49 0Q144.54 0 143.91-0.63 143.29-1.25 143.29-2.2L143.29-2.2ZM160.64 0L145.49 0 145.49-3.5 161.74-3.5Q161.99-3.3 162.14-2.85 162.29-2.4 162.29-1.85L162.29-1.85Q162.29-1 161.84-0.5 161.39 0 160.64 0L160.64 0ZM147.39-28.8L147.39-14.75 143.29-14.75 143.29-30.3Q143.54-30.4 144.06-30.53 144.59-30.65 145.19-30.65L145.19-30.65Q146.29-30.65 146.84-30.23 147.39-29.8 147.39-28.8L147.39-28.8ZM195.59-15.2L195.59-15.2 195.59-15.2Q195.59-10 193.69-6.48 191.79-2.95 188.51-1.15 185.24 0.65 181.09 0.65L181.09 0.65Q176.99 0.65 173.69-1.15 170.39-2.95 168.49-6.48 166.59-10 166.59-15.2L166.59-15.2Q166.59-20.4 168.54-23.93 170.49-27.45 173.76-29.25 177.04-31.05 181.09-31.05L181.09-31.05Q185.19-31.05 188.46-29.25 191.74-27.45 193.66-23.93 195.59-20.4 195.59-15.2ZM191.44-15.2L191.44-15.2 191.44-15.2Q191.44-21.15 188.61-24.38 185.79-27.6 181.09-27.6L181.09-27.6Q176.44-27.6 173.61-24.38 170.79-21.15 170.79-15.2L170.79-15.2Q170.79-9.25 173.59-6.03 176.39-2.8 181.09-2.8L181.09-2.8Q185.84-2.8 188.64-6.03 191.44-9.25 191.44-15.2ZM226.83-14.35L226.83-14.35 226.83-3.5Q226.83-2.6 226.31-1.98 225.78-1.35 224.73-0.85L224.73-0.85Q223.48-0.2 221.28 0.23 219.08 0.65 216.83 0.65L216.83 0.65Q212.18 0.65 208.61-1.05 205.03-2.75 203.03-6.25 201.03-9.75 201.03-15.15L201.03-15.15Q201.03-20.5 203.11-24.03 205.18-27.55 208.63-29.3 212.08-31.05 216.18-31.05L216.18-31.05Q219.03-31.05 221.18-30.45 223.33-29.85 224.53-28.95 225.73-28.05 225.73-27.1L225.73-27.1Q225.73-26.45 225.33-25.93 224.93-25.4 224.38-25.15L224.38-25.15Q223.03-26.05 221.18-26.83 219.33-27.6 216.43-27.6L216.43-27.6Q213.28-27.6 210.73-26.2 208.18-24.8 206.71-22.03 205.23-19.25 205.23-15.15L205.23-15.15Q205.23-10.85 206.76-8.13 208.28-5.4 210.93-4.1 213.58-2.8 216.88-2.8L216.88-2.8Q218.68-2.8 220.28-3.1 221.88-3.4 222.78-3.85L222.78-3.85 222.78-13.05 215.23-13.05Q215.08-13.3 214.93-13.73 214.78-14.15 214.78-14.65L214.78-14.65Q214.78-15.5 215.18-15.98 215.58-16.45 216.33-16.45L216.33-16.45 224.68-16.45Q225.58-16.45 226.21-15.88 226.83-15.3 226.83-14.35ZM261.98-15.2L261.98-15.2 261.98-15.2Q261.98-10 260.08-6.48 258.18-2.95 254.91-1.15 251.63 0.65 247.48 0.65L247.48 0.65Q243.38 0.65 240.08-1.15 236.78-2.95 234.88-6.48 232.98-10 232.98-15.2L232.98-15.2Q232.98-20.4 234.93-23.93 236.88-27.45 240.16-29.25 243.43-31.05 247.48-31.05L247.48-31.05Q251.58-31.05 254.86-29.25 258.13-27.45 260.06-23.93 261.98-20.4 261.98-15.2ZM257.83-15.2L257.83-15.2 257.83-15.2Q257.83-21.15 255.01-24.38 252.18-27.6 247.48-27.6L247.48-27.6Q242.83-27.6 240.01-24.38 237.18-21.15 237.18-15.2L237.18-15.2Q237.18-9.25 239.98-6.03 242.78-2.8 247.48-2.8L247.48-2.8Q252.23-2.8 255.03-6.03 257.83-9.25 257.83-15.2ZM284.18-1.6L284.18-18.1 288.28-18.1 288.28-0.1Q287.98 0 287.48 0.13 286.98 0.25 286.38 0.25L286.38 0.25Q285.28 0.25 284.73-0.2 284.18-0.65 284.18-1.6L284.18-1.6ZM288.28-28.8L288.28-14.75 284.18-14.75 284.18-30.3Q284.43-30.4 284.95-30.53 285.48-30.65 286.08-30.65L286.08-30.65Q287.18-30.65 287.73-30.23 288.28-29.8 288.28-28.8L288.28-28.8ZM303.88-1.6L303.88-18.1 307.98-18.1 307.98-0.1Q307.68 0 307.18 0.13 306.68 0.25 306.08 0.25L306.08 0.25Q304.98 0.25 304.43-0.2 303.88-0.65 303.88-1.6L303.88-1.6ZM307.98-28.8L307.98-14.75 303.88-14.75 303.88-30.3Q304.13-30.4 304.65-30.53 305.18-30.65 305.78-30.65L305.78-30.65Q306.88-30.65 307.43-30.23 307.98-29.8 307.98-28.8L307.98-28.8ZM306.03-17.1L306.03-13.7 286.63-13.7 286.63-17.1 306.03-17.1ZM316.87-2.2L316.87-18.3 320.92-18.3 320.92-0.4Q320.72-0.35 320.17-0.18 319.62 0 319.07 0L319.07 0Q318.07 0 317.47-0.63 316.87-1.25 316.87-2.2L316.87-2.2ZM320.92-30L320.92-12.4 316.87-12.45 316.87-28.2Q316.87-29.2 317.47-29.8 318.07-30.4 319.07-30.4L319.07-30.4Q319.62-30.4 320.17-30.25 320.72-30.1 320.92-30L320.92-30ZM333.02-13.9L319.07-13.9 319.07-17.3 334.12-17.3Q334.27-17.1 334.42-16.65 334.57-16.2 334.57-15.7L334.57-15.7Q334.57-14.9 334.17-14.4 333.77-13.9 333.02-13.9L333.02-13.9ZM334.82 0L319.07 0 319.07-3.4 335.92-3.4Q336.07-3.2 336.22-2.78 336.37-2.35 336.37-1.8L336.37-1.8Q336.37-1 335.97-0.5 335.57 0 334.82 0L334.82 0ZM334.57-26.95L319.07-26.95 319.07-30.4 335.67-30.4Q335.82-30.2 335.97-29.75 336.12-29.3 336.12-28.8L336.12-28.8Q336.12-28 335.72-27.48 335.32-26.95 334.57-26.95L334.57-26.95ZM347.47-27.1L347.47-14.9 353.22-14.9Q356.92-14.9 359.02-16.5 361.12-18.1 361.12-21.25L361.12-21.25Q361.12-24.35 358.92-25.95 356.72-27.55 352.62-27.55L352.62-27.55Q351.27-27.55 349.9-27.43 348.52-27.3 347.47-27.1L347.47-27.1ZM353.22-11.5L353.22-11.5 343.42-11.5 343.42-28.2Q343.42-29 343.85-29.43 344.27-29.85 345.07-30.1L345.07-30.1Q346.52-30.55 348.65-30.75 350.77-30.95 352.77-30.95L352.77-30.95Q359.02-30.95 362.12-28.4 365.22-25.85 365.22-21.25L365.22-21.25Q365.22-18.3 363.87-16.1 362.52-13.9 359.87-12.7 357.22-11.5 353.22-11.5ZM361.52-1.3L353.32-12.8 356.32-14.3Q357.72-12.55 359.22-10.65 360.72-8.75 362.12-6.95 363.52-5.15 364.62-3.73 365.72-2.3 366.32-1.5L366.32-1.5Q366.12-0.65 365.45-0.15 364.77 0.35 364.07 0.35L364.07 0.35Q363.22 0.35 362.67-0.08 362.12-0.5 361.52-1.3L361.52-1.3ZM343.42-1.6L343.42-12.6 347.52-12.6 347.52-0.1Q347.22 0 346.72 0.13 346.22 0.25 345.62 0.25L345.62 0.25Q344.52 0.25 343.97-0.2 343.42-0.65 343.42-1.6L343.42-1.6ZM372.87-2.2L372.87-18.3 376.92-18.3 376.92-0.4Q376.72-0.35 376.17-0.18 375.62 0 375.07 0L375.07 0Q374.07 0 373.47-0.63 372.87-1.25 372.87-2.2L372.87-2.2ZM376.92-30L376.92-12.4 372.87-12.45 372.87-28.2Q372.87-29.2 373.47-29.8 374.07-30.4 375.07-30.4L375.07-30.4Q375.62-30.4 376.17-30.25 376.72-30.1 376.92-30L376.92-30ZM389.02-13.9L375.07-13.9 375.07-17.3 390.12-17.3Q390.27-17.1 390.42-16.65 390.57-16.2 390.57-15.7L390.57-15.7Q390.57-14.9 390.17-14.4 389.77-13.9 389.02-13.9L389.02-13.9ZM390.82 0L375.07 0 375.07-3.4 391.92-3.4Q392.07-3.2 392.22-2.78 392.37-2.35 392.37-1.8L392.37-1.8Q392.37-1 391.97-0.5 391.57 0 390.82 0L390.82 0ZM390.57-26.95L375.07-26.95 375.07-30.4 391.67-30.4Q391.82-30.2 391.97-29.75 392.12-29.3 392.12-28.8L392.12-28.8Q392.12-28 391.72-27.48 391.32-26.95 390.57-26.95L390.57-26.95Z" opacity="1" transform="matrix(1,0,0,1,0,0)" fill="#ffffff" class="wordmark-text-0" data-fill-palette-color="primary" id="text-0"></path></svg></g></svg></g></svg></g></svg></g><g transform="matrix(1,0,0,1,403.08335022558833,0)"><svg viewBox="0 0 33.935253421752066 44.27620771176696" height="44.27620771176696" width="33.935253421752066"><g><svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="15.509999999999998 5 68.98000000000002 90" x="0" y="0" height="44.27620771176696" width="33.935253421752066" class="icon-icon-0" data-fill-palette-color="accent" id="icon-0"><path d="M49.948 5c-9.011 0-17.417 3.197-23.667 9.004-7.046 6.548-10.771 15.858-10.771 26.922 0 19.274 31.807 52.126 33.161 53.515 0.347 0.356 0.823 0.557 1.32 0.559h0.005c0.496 0 0.971-0.199 1.318-0.552 1.355-1.374 33.176-33.866 33.176-53.522C84.49 17.341 67.115 5 49.948 5m0.056 85.466c-6.047-6.46-30.79-33.85-30.79-49.54 0-10.008 3.317-18.379 9.588-24.208 5.563-5.168 13.073-8.015 21.146-8.015 14.853 0 30.839 10.084 30.839 32.223 0 16.003-24.725 43.133-30.783 49.54" fill="#ffffff" data-fill-palette-color="accent"></path><path d="M50 19.491c-10.019 0-18.171 8.152-18.171 18.171S39.981 55.833 50 55.833s18.171-8.152 18.171-18.171S60.019 19.491 50 19.491m0 32.638c-7.977 0-14.467-6.49-14.467-14.467S42.023 23.195 50 23.195c7.979 0 14.467 6.49 14.467 14.467S57.979 52.129 50 52.129" fill="#ffffff" data-fill-palette-color="accent"></path></svg></g></svg></g></svg></g><defs></defs></svg><rect width="395.52" height="40.07180822052549" fill="none" stroke="none" visibility="hidden"></rect></g></svg></g></svg>

package/src/components/modal/MftpWebGL3DRModal.vue

@@ -1,11 +1,8 @@
 <!-- /* c8 ignore start */ -->
 <template>
-  <DemoModal data-vuetify v-model:modal="m_demo" />
-  <DemoPatientModal
-    data-vuetify
-    v-model:modal="m_demoPatient"
-    :is-modal-open="value"
-  />
+  <!--  <DemoModal data-vuetify v-model:modal="m_demo" />-->
+  <DemoLicenceInfoModal v-model:modal="m_demo" :is-modal-open="value" />
+  <DemoPatientInfoModal v-model:modal="m_demoPatient" :is-modal-open="value" />
   <v-dialog
     data-vuetify
     id="cr-viewer"
@@ -43,7 +40,7 @@
           <v-btn color="red" variant="tonal" @click="closeModal">
             Close without saving
           </v-btn>
-          <v-btn color="primary" variant="tonal" @click="closeModal">
+          <v-btn color="primary" variant="tonal" @click="closeModalSave">
             Save Session
           </v-btn>
         </v-card-actions>
@@ -235,6 +232,7 @@
       >
         <template v-slot:prepend>
           <div
+            v-if="!isDemo || demoType === 'patient'"
             class="d-flex align-center pb-1"
             :class="drawerCollapsed ? 'py-2' : 'pa-2'"
           >
@@ -255,6 +253,20 @@
               style="opacity: 0.9"
             />
           </div>
+          <div
+            v-else
+            class="d-flex align-center pb-1 my-n12"
+            :class="drawerCollapsed ? 'py-2' : 'pa-2'"
+          >
+            <img
+              v-if="!drawerCollapsed"
+              src="../../assets/images/dark/demo-logo.svg"
+              width="100%"
+              alt="logo"
+              class="ma-auto my-n16"
+              style="opacity: 0.9"
+            />
+          </div>
           <div
             class="text-center mx-auto pa-0 text-white sub-type"
             :style="drawerCollapsed ? 'font-size: 100%' : 'font-size: 140%'"
@@ -753,8 +765,6 @@ import {
   m_demoPatient,
 } from "@/demo/options";
 import { handleNotification } from "@/notifications/notification";
-import DemoPatientModal from "@/demo/DemoPatientModal.vue";
-import DemoModal from "@/demo/DemoModal.vue";
 import { LoadViewerPayload } from "@/models/LoadViewerPayload";
 import {
   defaultLoadViewerOptions,
@@ -784,6 +794,8 @@ import {
 } from "@/dataLayer/scanState";
 import { getIconForPreset } from "@/dataLayer/iconData";
 import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
+import DemoPatientInfoModal from "@/demo/patient/DemoPatientInfoModal.vue";
+import DemoLicenceInfoModal from "@/demo/licence/DemoLicenceInfoModal.vue";
 
 export interface Props {
   payload?: LoadViewerPayload;
@@ -960,6 +972,11 @@ function closeModal() {
   value.value = false;
   executeOption("OnExitViewer");
 }
+function closeModalSave() {
+  m_closeDialog.value = false;
+  value.value = false;
+  executeOption("OnSaveSession");
+}
 function alterValue(val: boolean) {
   if (!val) {
     m_closeDialog.value = true;

package/src/demo/licence/DemoLicenceInfoModal.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  demoLicenceSubtitles,
+  demoLicenceTitle,
+  openUrl,
+} from "@/demo/options";
+
+export interface Props {
+  modal: boolean;
+  isModalOpen: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+  isModalOpen: true,
+});
+
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+</script>
+
+<template>
+  <v-dialog v-model:model-value="modalState">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background"
+      theme="dark"
+      max-width="680"
+    >
+      <v-card-title>{{ demoLicenceTitle }}</v-card-title>
+      <v-card-text v-for="subtitle in demoLicenceSubtitles" :key="subtitle"
+        >{{ subtitle }}
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="error"
+          @click="modalState = false"
+          :disabled="!isModalOpen"
+        >
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="tonal"
+          color="success"
+          @click="openUrl('mailto:ecooper@singular.health')"
+        >
+          Enquire about technical integration
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped></style>

package/src/demo/options.ts

@@ -12,31 +12,61 @@ export function checkIsDemo(payload: LoadViewerPayload) {
 export const isDemo = ref<boolean>(false);
 export const m_demo = ref<boolean>(false);
 export const m_demoPatient = ref<boolean>(false);
+export const demoPatientTitle = ref<string>("");
+export const demoPatientSubtitles = ref<Array<string>>([]);
+export const demoLicenceTitle = ref<string>("");
+export const demoLicenceSubtitles = ref<Array<string>>([]);
 export const demoLicenceOptions: LoadViewerOptions = {
   OnClosePopup: () => Promise.resolve(),
   OnExitViewer: () => {
+    demoLicenceTitle.value = "Thank you for trying the 3Dicom Licensing Demo.";
+    demoLicenceSubtitles.value = [
+      "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
+    ];
     m_demo.value = true;
   },
   OnLoadNewDicomSeries: () => {
+    demoLicenceTitle.value = "Support multiple medical imaging file types";
+    demoLicenceSubtitles.value = [
+      "3Dicom’s white-labelled online 2D / 3D DICOM viewer allows the loading of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET) using the global DICOM file format.",
+    ];
+
     m_demo.value = true;
   },
   OnDownloadDicomSeries: () => {
+    demoLicenceTitle.value =
+      "Improve interoperability with local download of DICOM series";
+    demoLicenceSubtitles.value = [
+      "Integrate 3Dicom’s white-labelled online 2D/3D viewer into your PACS and/or medical records database to pull DICOM series and allow for local download direct from the viewer. This feature can be hidden upon request.",
+    ];
     m_demo.value = true;
   },
   OnLoadSavedSession: () => {
+    demoLicenceTitle.value =
+      "Save previous progress and share particular sessions";
+    demoLicenceSubtitles.value = [
+      "3Dicom’s viewer enables session-saving to record any changes made during the viewing of medical scans including orientation of views, editing of labels, visualisation settings, and density settings. Changes made during sessions preserve the integrity of the DICOM file and are overlaid in future sessions.",
+    ];
     m_demo.value = true;
   },
   OnSaveSession: () => {
+    demoLicenceTitle.value = "Thank you for trying the 3Dicom Licensing Demo.";
+    demoLicenceSubtitles.value = [
+      "Each 3Dicom viewer session can be saved with your changes made for future viewing.",
+    ];
     m_demo.value = true;
   },
   OnSendTo3rdParty: () => {
-    m_demo.value = true;
+    //TODO:
+    // m_demo.value = true;
   },
   OnShareToMobile: () => {
-    m_demo.value = true;
+    //TODO:
+    // m_demo.value = true;
   },
   OnShare: () => {
-    m_demo.value = true;
+    //TODO:
+    // m_demo.value = true;
   },
   OnScreenshot: undefined,
 };
@@ -44,28 +74,56 @@ export const demoLicenceOptions: LoadViewerOptions = {
 export const demoPatientOptions: LoadViewerOptions = {
   OnClosePopup: () => Promise.resolve(),
   OnExitViewer: () => {
+    demoPatientTitle.value = "Thank you for trying the 3Dicom Patient Demo.";
+    demoPatientSubtitles.value = [
+      "Should you have any further questions or enquiries, please get in touch by emailing support@singular.health",
+    ];
     m_demoPatient.value = true;
   },
   OnLoadNewDicomSeries: () => {
+    demoPatientTitle.value =
+      "3Dicom Patient supports multiple Medical Imaging Formats";
+    demoPatientSubtitles.value = [
+      "3Dicom Patient enables you to load of X-Ray (XR), Ultrasound (US), Computed Tomography (CT), Magnetic Resonance Imaging (MRI), and Positron Emitting Tomography (PET), using the global DICOM file format.",
+      "Purchase 3Dicom Patient to load your own medical images and view in 2D / 3D.",
+    ];
     m_demoPatient.value = true;
   },
   OnDownloadDicomSeries: () => {
+    demoPatientTitle.value =
+      "3Dicom Patient enables on-demand download of DICOM series";
+    demoPatientSubtitles.value = [
+      "3Dicom Patient enables you to store your medical imaging and related files / reports online or share them temporarily between devices. DICOM files can be downloaded to your device for local storage and providing to 3rd parties via CD/USB.",
+      "Purchase 3Dicom Patient to gain control over your DICOM file storage.",
+    ];
     m_demoPatient.value = true;
   },
   OnLoadSavedSession: () => {
+    demoPatientTitle.value =
+      "3Dicom Patient allows you to load previous Sessions";
+    demoPatientSubtitles.value = [
+      "3Dicom Patient gives you to option to save any changes made during the viewing of your scan including orientation of views, editing of labels, visualisation settings, and density settings to easily view your scans the same way in the future. Session data can also be shared to 3rd parties so they see your scan the same way that you do.",
+    ];
     m_demoPatient.value = true;
   },
   OnSaveSession: () => {
+    demoPatientTitle.value = "Thank you for trying the 3Dicom Patient Demo.";
+    demoPatientSubtitles.value = [
+      "Each 3Dicom viewer session can be saved with your changes made for future viewing.",
+    ];
     m_demoPatient.value = true;
   },
   OnSendTo3rdParty: () => {
-    m_demoPatient.value = true;
+    //TODO:
+    // m_demoPatient.value = true;
   },
   OnShareToMobile: () => {
-    m_demoPatient.value = true;
+    //TODO:
+    // m_demoPatient.value = true;
   },
   OnShare: () => {
-    m_demoPatient.value = true;
+    //TODO:
+    // m_demoPatient.value = true;
   },
   OnScreenshot: undefined,
 };
@@ -97,3 +155,7 @@ export function getDemoOption(
     return demoPatientOptions[key];
   }
 }
+
+export function openUrl(url: string, target: string = "_self") {
+  window.open(url, target);
+}

package/src/demo/patient/DemoPatientInfoModal.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  demoPatientSubtitles,
+  demoPatientTitle,
+  openUrl,
+} from "@/demo/options";
+
+export interface Props {
+  modal: boolean;
+  isModalOpen: boolean;
+}
+
+const emit = defineEmits<{
+  "update:modal": [value: boolean];
+}>();
+
+const props = withDefaults(defineProps<Props>(), {
+  modal: false,
+  isModalOpen: true,
+});
+
+const modalState = computed({
+  get() {
+    return props.modal;
+  },
+  set(value) {
+    emit("update:modal", value);
+  },
+});
+</script>
+
+<template>
+  <v-dialog v-model:model-value="modalState">
+    <v-card
+      class="pa-1 ma-auto position-relative motif-background"
+      theme="dark"
+      max-width="680"
+    >
+      <v-card-title>{{ demoPatientTitle }}</v-card-title>
+      <v-card-text v-for="subtitle in demoPatientSubtitles" :key="subtitle"
+        >{{ subtitle }}
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="error"
+          @click="modalState = false"
+          :disabled="!isModalOpen"
+        >
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          variant="tonal"
+          color="success"
+          @click="openUrl('https://3dicomviewer.com/pricing')"
+        >
+          Purchase 3Dicom Patient
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped></style>