@3cr/viewer-browser 0.0.161 → 0.0.194

package/src/components/demo/licence/DemoLicenceEnableCloudStorageModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-dialog width="600" v-model:model-value="modalState">
+    <v-card theme="dark" class="motif-background">
+      <v-card-title class="text-center font-weight-bold">
+        Enable Cloud Storage
+      </v-card-title>
+      <v-card-text>
+        <p style="text-align: center;">Enable annual storage for just <b>5 credits</b>.</p>
+        <br />
+        <div>
+          <v-row no-gutters v-for="(benefit, idx) in benefits" :key="idx">
+            <v-col class="d-flex justify-end" cols="2">
+              <v-icon class="mr-2" color="success" icon="check" />
+            </v-col>
+            <v-col>
+              {{ benefit }}
+            </v-col>
+          </v-row>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn data-testid="close" color="red" @click="modalState = false">
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(PRICING_URL)">
+          Enable Cloud Storage
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { PRICING_URL, openUrl } from '@/components/demo/options';
+
+interface Props {
+  modal?: boolean;
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const benefits = [
+  'Secure storage',
+  'Access your scan from any device',
+  'Keep your medical imaging records at your fingertips'
+];
+
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit('update:modal', value);
+  }
+});
+</script>

package/src/{demo → components/demo}/licence/DemoLicenceInfoModal.vue

@@ -3,8 +3,8 @@ import { computed } from "vue";
 import {
   demoLicenceSubtitles,
   demoLicenceTitle,
-  openUrl,
-} from "@/demo/options";
+  openUrl, SUPPORT_URL,
+} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -47,14 +47,15 @@ const modalState = computed({
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
-        <v-btn color="red" @click="modalState = false" :disabled="!isModalOpen">
+        <v-btn data-testid="close" color="red" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Demo
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm"
           variant="flat"
           color="success"
-          @click="openUrl('mailto:ecooper@singular.health')"
+          @click="openUrl(SUPPORT_URL)"
         >
           Enquire about technical integration
         </v-btn>

package/src/{demo → components/demo}/licence/DemoLicenceSendToPartyModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { openUrl } from "@/demo/options";
+import {openUrl, PRICING_URL} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -116,11 +116,12 @@ function isValid() {
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="modalState = false">
+        <v-btn data-testid="close" color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm"
           variant="flat"
           color="success"
           @click="
@@ -155,12 +156,13 @@ function isValid() {
         please select below
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn data-testid="close" color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm"
           variant="flat"
           color="success"
-          @click="openUrl('https://3dicomviewer.com/pricing')"
+          @click="openUrl(PRICING_URL)"
         >
           I want to view my own scan
         </v-btn>

package/src/{demo → components/demo}/licence/DemoLicenceShareToMobileModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { openUrl } from "@/demo/options";
+import {openUrl, PRICING_URL} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -37,24 +37,25 @@ const modalState = computed({
       </v-card-title>
       <v-card-text class="text-justify">
         <img
-          src="../../assets/images/apple-qr.svg"
+          src="../../../assets/images/apple-qr.svg"
           alt="logo-home"
           width="47%"
           class="mr-auto rounded-lg"
         />
         <img
-          src="../../assets/images/android-qr.svg"
+          src="../../../assets/images/android-qr.svg"
           alt="logo-home"
           width="47%"
           class="ml-auto rounded-lg float-right"
         />
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="modalState = false">
+        <v-btn data-testid="close-1" color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm-1"
           variant="flat"
           color="success"
           @click="
@@ -83,12 +84,13 @@ const modalState = computed({
         Tomography (PET) scans.
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn data-testid="close-2" color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm-2"
           variant="flat"
           color="success"
-          @click="openUrl('https://3dicomviewer.com/pricing')"
+          @click="openUrl(PRICING_URL)"
         >
           I want to view my own scan
         </v-btn>

package/src/components/demo/licence/__tests__/DemoLicenceEnableCloudStorageModal.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import DemoLicenceEnableCloudStorageModal from "@/components/demo/licence/DemoLicenceEnableCloudStorageModal.vue";
+import { PRICING_URL } from "../../options";
+
+describe('DemoLicenceEnableCloudStorageModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    const close = wrapper.findComponent('[data-testid="close"]');
+    await close.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should open pricing url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    const button = wrapper.findComponent('[data-testid="confirm"]');
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false };
+    const wrapper = mountVuetify(DemoLicenceEnableCloudStorageModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/components/demo/licence/__tests__/DemoLicenceInfoModal.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import { SUPPORT_URL } from "@/components/demo/options";
+import DemoLicenceInfoModal from "@/components/demo/licence/DemoLicenceInfoModal.vue";
+
+describe('DemoLicenceInfoModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true, isModalOpen: true };
+    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    const close = wrapper.findComponent('[data-testid="close"]');
+    await close.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should open support url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    const button = wrapper.findComponent('[data-testid="confirm"]');
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalledWith(SUPPORT_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false, isModalOpen: true };
+    const wrapper = mountVuetify(DemoLicenceInfoModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/components/demo/licence/__tests__/DemoLicenceSendToPartyModal.spec.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import { VTextField } from "vuetify/components";
+import DemoLicenceSendToPartyModal from "@/components/demo/licence/DemoLicenceSendToPartyModal.vue";
+
+describe('DemoLicenceSendToPartyModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should enter email', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    const input = wrapper.getComponent(VTextField);
+    await input.setValue('example@singular.health');
+    await input.trigger('keyup.enter');
+    const confirm = wrapper.findComponent('[data-testid="confirm"]');
+    await confirm.trigger('click');
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    const close = wrapper.findComponent('[data-testid="close"]');
+    await close.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false };
+    const wrapper = mountVuetify(DemoLicenceSendToPartyModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/components/demo/licence/__tests__/DemoLicenceShareToMobileModal.spec.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it, vi } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import { PRICING_URL } from "../../options";
+import DemoLicenceShareToMobileModal from "@/components/demo/licence/DemoLicenceShareToMobileModal.vue";
+
+describe('DemoLicenceShareToMobileModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const close = wrapper.findComponent('[data-testid="close-1"]');
+    await close.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should go to next step and open url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
+    await confirm1.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    const confirm2 = wrapper.findComponent('[data-testid="confirm-2"]');
+    await confirm2.trigger('click');
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should go to next step and close', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    const confirm1 = wrapper.findComponent('[data-testid="confirm-1"]');
+    await confirm1.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+    const close2 = wrapper.findComponent('[data-testid="close-2"]');
+    await close2.trigger('click');
+    expect(wrapper.text()).toBe('');
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false };
+    const wrapper = mountVuetify(DemoLicenceShareToMobileModal, props);
+    await openAllModals(wrapper);
+  });
+});

package/src/{demo → components/demo}/options.ts

@@ -1,7 +1,9 @@
 import { computed, ref, unref, watch } from "vue";
 import { LoadViewerOptions } from "@/models/LoadViewerOptions";
 import { LoadViewerPayload } from "@/models/LoadViewerPayload";
-import { ViewerAsyncCallback, ViewerCallback } from "@/models/Callbacks";
+
+export const PRICING_URL = 'https://3dicomviewer.com/pricing';
+export const SUPPORT_URL = 'https://3dicomviewer.com/contact-3dicom';
 
 export function checkIsDemo(payload: LoadViewerPayload) {
   isDemo.value =
@@ -13,13 +15,16 @@ export const isDemo = ref<boolean>(false);
 export const m_demo = ref<boolean>(false);
 export const m_demoLicenceShareToMobile = ref<boolean>(false);
 export const m_demoLicenceSendToParty = ref<boolean>(false);
+export const m_demoLicenseEnableCloudStorage = ref<boolean>(false);
 export const m_demoPatient = ref<boolean>(false);
 export const m_demoPatientShareToMobile = ref<boolean>(false);
 export const m_demoPatientSendToParty = ref<boolean>(false);
+export const m_demoPatientEnableCloudStorage = 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: () => {
@@ -66,6 +71,9 @@ export const demoLicenceOptions: LoadViewerOptions = {
   OnShareToMobile: () => {
     m_demoLicenceShareToMobile.value = true;
   },
+  OnEnableCloudStorage: () => {
+    m_demoLicenseEnableCloudStorage.value = true;
+  },
   OnShare: () => {
     //TODO:
     // m_demo.value = true;
@@ -128,6 +136,9 @@ export const demoPatientOptions: LoadViewerOptions = {
   OnShareToMobile: () => {
     m_demoPatientShareToMobile.value = true;
   },
+  OnEnableCloudStorage: () => {
+    m_demoPatientEnableCloudStorage.value = true;
+  },
   OnShare: () => {
     //TODO:
     // m_demoPatient.value = true;
@@ -146,28 +157,15 @@ export const demoType = computed(() => {
   return optionalTypes.includes(type) ? type : optionalTypes[0];
 });
 
-export function executeDemoOption(key: keyof LoadViewerOptions) {
-  if (unref(demoType) === "licence") {
-    const functionToExecute = demoLicenceOptions[key];
-    if (functionToExecute !== undefined) {
-      functionToExecute();
-    }
-  } else if (unref(demoType) === "patient") {
-    const functionToExecute = demoPatientOptions[key];
-    if (functionToExecute !== undefined) {
-      functionToExecute();
-    }
-  }
-}
-export function getDemoOption(
-  key: keyof LoadViewerOptions
-): ViewerCallback | ViewerAsyncCallback | undefined {
+export const demoOptions = computed(() => {
   if (unref(demoType) === "licence") {
-    return demoLicenceOptions[key];
+    return demoLicenceOptions;
   } else if (unref(demoType) === "patient") {
-    return demoPatientOptions[key];
+    return demoPatientOptions;
+  } else {
+    throw new Error('Unknown demo type');
   }
-}
+});
 
 export function openUrl(url: string, target: string = "_self") {
   window.open(url, target);

package/src/components/demo/patient/DemoPatientEnableCloudStorageModal.vue

@@ -0,0 +1,64 @@
+<template>
+  <v-dialog width="600" v-model:model-value="modalState">
+    <v-card theme="dark" class="motif-background">
+      <v-card-title class="text-center font-weight-bold">
+        Enable Cloud Storage
+      </v-card-title>
+      <v-card-text>
+        <p style="text-align: center;">Enable annual storage for just <b>5 credits</b>.</p>
+        <br />
+        <div>
+          <v-row no-gutters v-for="(benefit, idx) in benefits" :key="idx">
+            <v-col class="d-flex justify-end" cols="2">
+              <v-icon class="mr-2" color="success" icon="check" />
+            </v-col>
+            <v-col>
+              {{ benefit }}
+            </v-col>
+          </v-row>
+        </div>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn data-testid="close" color="red" @click="modalState = false">
+          Continue with Demo
+        </v-btn>
+        <v-spacer />
+        <v-btn data-testid="confirm" variant="flat" color="success" @click="openUrl(PRICING_URL)">
+          Enable Cloud Storage
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { PRICING_URL, openUrl } from '@/components/demo/options';
+
+interface Props {
+  modal?: boolean;
+}
+
+type Emits = {
+  'update:modal': [value: boolean];
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+const benefits = [
+  'Secure storage',
+  'Access your scan from any device',
+  'Keep your medical imaging records at your fingertips'
+];
+
+const modalState = computed({
+  get(): boolean {
+    return props.modal;
+  },
+  set(value: boolean): void {
+    emit('update:modal', value);
+  }
+});
+</script>

package/src/{demo → components/demo}/patient/DemoPatientInfoModal.vue

@@ -3,8 +3,8 @@ import { computed } from "vue";
 import {
   demoPatientSubtitles,
   demoPatientTitle,
-  openUrl,
-} from "@/demo/options";
+  openUrl, PRICING_URL,
+} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -47,14 +47,15 @@ const modalState = computed({
         >{{ subtitle }}
       </v-card-text>
       <v-card-actions class="mt-4">
-        <v-btn color="red" @click="modalState = false" :disabled="!isModalOpen">
+        <v-btn data-testid="close" color="red" @click="modalState = false" :disabled="!isModalOpen">
           Continue with Demo
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm"
           variant="flat"
           color="success"
-          @click="openUrl('https://3dicomviewer.com/pricing')"
+          @click="openUrl(PRICING_URL)"
         >
           Purchase 3Dicom Patient
         </v-btn>

package/src/{demo → components/demo}/patient/DemoPatientSendToPartyModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { openUrl } from "@/demo/options";
+import {openUrl, PRICING_URL} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -116,11 +116,12 @@ function isValid() {
         </v-alert>
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="modalState = false">
+        <v-btn data-testid="close" color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm"
           variant="flat"
           color="success"
           @click="
@@ -160,7 +161,7 @@ function isValid() {
         <v-btn
           variant="flat"
           color="success"
-          @click="openUrl('https://3dicomviewer.com/pricing')"
+          @click="openUrl(PRICING_URL)"
         >
           I want to view my own scan
         </v-btn>

package/src/{demo → components/demo}/patient/DemoPatientShareToMobileModal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { openUrl } from "@/demo/options";
+import {openUrl, PRICING_URL} from "@/components/demo/options";
 
 export interface Props {
   modal: boolean;
@@ -37,24 +37,25 @@ const modalState = computed({
       </v-card-title>
       <v-card-text class="text-justify">
         <img
-          src="../../assets/images/apple-qr.svg"
+          src="../../../assets/images/apple-qr.svg"
           alt="logo-home"
           width="47%"
           class="mr-auto rounded-lg"
         />
         <img
-          src="../../assets/images/android-qr.svg"
+          src="../../../assets/images/android-qr.svg"
           alt="logo-home"
           width="47%"
           class="ml-auto rounded-lg float-right"
         />
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="modalState = false">
+        <v-btn data-testid="close-1" color="red" @click="modalState = false">
           Continue with Demo
         </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm-1"
           variant="flat"
           color="success"
           @click="
@@ -83,12 +84,13 @@ const modalState = computed({
         Tomography (PET) scans.
       </v-card-text>
       <v-card-actions>
-        <v-btn color="red" @click="step2 = false"> Continue with Demo </v-btn>
+        <v-btn data-testid="close-2" color="red" @click="step2 = false"> Continue with Demo </v-btn>
         <v-spacer />
         <v-btn
+          data-testid="confirm-2"
           variant="flat"
           color="success"
-          @click="openUrl('https://3dicomviewer.com/pricing')"
+          @click="openUrl(PRICING_URL)"
         >
           I want to view my own scan
         </v-btn>

package/src/components/demo/patient/__tests__/DemoPatientEnableCloudStorageModal.spec.ts

@@ -0,0 +1,37 @@
+import { describe, it, expect, vi } from "vitest";
+import { mountVuetify, openAllModals } from "~/helper";
+import DemoPatientEnableCloudStorageModal from "@/components/demo/patient/DemoPatientEnableCloudStorageModal.vue";
+import { PRICING_URL } from "../../options";
+
+describe('DemoPatientEnableCloudStorageModal tests', () => {
+  it('should mount', () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('should close modal', async () => {
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const close = wrapper.findComponent('[data-testid="close"]');
+    await close.trigger('click');
+    expect(wrapper.emitted()['update:modal']).toBeTruthy();
+  });
+
+  it('should open pricing url', async () => {
+    vi.stubGlobal('open', vi.fn());
+    const spy = vi.spyOn(window, 'open');
+    const props = { modal: true };
+    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    const button = wrapper.findComponent('[data-testid="confirm"]');
+    await button.trigger('click');
+    expect(spy).toHaveBeenCalledWith(PRICING_URL, '_self');
+    vi.restoreAllMocks();
+  });
+
+  it('should open via input', async () => {
+    const props = { modal: false };
+    const wrapper = mountVuetify(DemoPatientEnableCloudStorageModal, props);
+    await openAllModals(wrapper);
+  });
+});