@3cr/viewer-browser 0.0.247 → 0.0.292

package/src/components/__tests__/ShFlatIconBtn.spec.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils';
+import ShFlatIconBtn from '@/components/ShFlatIconBtn.vue';
+
+describe('ShFlatIconBtn', () => {
+  const mockProps = {
+    text: 'Close',
+    icon: 'close'
+  };
+  const createWrapper = (props = {}, slots = {}) =>
+    mount(ShFlatIconBtn, {
+      props: {
+        ...mockProps,
+        ...props
+      },
+      slots: {
+        append: `<span></span>`
+      },
+      attrs: {
+        'data-testid': 'button'
+      }
+    });
+  it('renders correctly with text and icon', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('[data-testid="icon"]').exists()).toBe(true);
+    expect(wrapper.text().includes('Close')).toBeTruthy();
+  });
+  it('renders correctly without an icon', () => {
+    const wrapper = createWrapper({ icon: undefined });
+    expect(wrapper.find('[data-testid="icon"]').exists()).toBe(false);
+    expect(wrapper.text().includes('Close')).toBeTruthy();
+  });
+});

package/src/components/__tests__/ShPlainIconBtn.spec.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils';
+import ShPlainIconBtn from '@/components/ShPlainIconBtn.vue';
+
+describe('ShPlainIconBtn', () => {
+  const mockProps = {
+    text: 'Close',
+    icon: 'close',
+    border: false
+  };
+  const createWrapper = (props = {}, slots = {}) =>
+    mount(ShPlainIconBtn, {
+      props: {
+        ...mockProps,
+        ...props
+      },
+      slots: {
+        append: `<span></span>`
+      },
+      attrs: {
+        'data-testid': 'button'
+      }
+    });
+  it('renders correctly with text and icon', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('[data-testid="icon"]').exists()).toBe(true);
+    expect(wrapper.text().includes('Close')).toBeTruthy();
+  });
+  it('renders if props.border is true', () => {
+    const wrapper = createWrapper({ border: true });
+    expect(wrapper.find('[data-testid="button"]').exists()).toBe(true);
+  });
+  it('renders correctly without an icon', () => {
+    const wrapper = createWrapper({ icon: undefined });
+    expect(wrapper.find('[data-testid="icon"]').exists()).toBe(false);
+    expect(wrapper.text().includes('Close')).toBeTruthy();
+  });
+});

package/src/components/__tests__/ShSelect.spec.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import ShSelect from '@/components/ShSelect.vue';
+
+describe('ShSelect', () => {
+  const mockProps = {
+    label: 'Label',
+    childRef: 'childRef'
+  };
+  const createWrapper = (props = {}, slots = {}) =>
+    mount(ShSelect, {
+      props: {
+        ...mockProps,
+        ...props
+      },
+      slots: {
+        append: `<span></span>`
+      },
+      attrs: {
+        'data-testid': 'button'
+      }
+    });
+  it('renders correctly if label is a string', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.find('[data-testid="label"]').exists()).toBe(true);
+  });
+  it('does not renders correctly if label is null', () => {
+    const wrapper = createWrapper({ label: false });
+    expect(wrapper.find('[data-testid="label"]').exists()).toBe(false);
+  });
+});

package/src/components/__tests__/ShTextField.spec.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import ShTextField from '@/components/ShTextField.vue';
+
+describe('ShTextField', () => {
+  const mockProps = {
+    label: 'Label',
+    childRef: 'childRef'
+  };
+  const createWrapper = (props = {}, slots = {}) =>
+    mount(ShTextField, {
+      props: {
+        ...mockProps,
+        ...props
+      },
+      slots: {
+        append: `<span></span>`
+      },
+      attrs: {
+        'data-testid': 'button'
+      }
+    });
+  it('renders correctly if label is a string', () => {
+    const wrapper = createWrapper({ label: 'Label' });
+    expect(wrapper.find('[data-testid="label"]').exists()).toBe(true);
+  });
+  it('does not renders correctly if label is null', () => {
+    const wrapper = createWrapper({ label: false });
+    expect(wrapper.find('[data-testid="label"]').exists()).toBe(false);
+  });
+});

package/src/components/__tests__/ShTextarea.spec.ts

@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils';
+import ShTextarea from '@/components/ShTextarea.vue';
+
+describe('ShTextarea', () => {
+  const mockProps = {
+    label: 'Label',
+    childRef: 'childRef'
+  };
+  const createWrapper = (props = {}, slots = {}) =>
+    mount(ShTextarea, {
+      props: {
+        ...mockProps,
+        ...props
+      },
+      slots: {
+        append: `<span></span>`
+      },
+      attrs: {
+        'data-testid': 'button'
+      }
+    });
+  it('renders correctly if label is a string', () => {
+    const wrapper = createWrapper({ label: 'Label' });
+    expect(wrapper.find('[data-testid="label"]').exists()).toBe(true);
+  });
+  it('does not renders correctly if label is null', () => {
+    const wrapper = createWrapper({ label: false });
+    expect(wrapper.find('[data-testid="label"]').exists()).toBe(false);
+  });
+});

package/src/components/demo/CloudDropZone.vue

@@ -0,0 +1,105 @@
+<template>
+  <div
+    class="drop-zone"
+    @drop.prevent="handleDrop"
+    @dragover.prevent="onDragOver"
+    @dragenter.prevent="onDragEnter"
+    @dragleave.prevent="onDragLeave"
+    :class="{ 'drag-over': isDragOver }"
+    @click="handleClick"
+  >
+    <div class="ma-4">
+      <div class="icon-container mx-auto mb-1">
+        <v-icon class="minsk-500" icon="cloud" size="large" />
+      </div>
+      <p class="shark-600 text-sm-regular">
+        <span class="minsk-900 text-sm-semibold">Click to upload</span> or drag and drop <br />
+        <span class="shark-600 text-xs-regular">DICOM, UNITY, PNG, JPG, or PDF (max. 200 mb)</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Props {
+  onFilesDropped: (files: File[]) => void;
+}
+
+const props = defineProps<Props>();
+
+const isDragOver = ref<boolean>(false);
+
+function handleDrop(event: DragEvent): void {
+  isDragOver.value = false;
+  if (event.dataTransfer?.files) {
+    const files = Array.from(event.dataTransfer.files);
+    props.onFilesDropped(files);
+  } else {
+    console.warn('No files were dropped.');
+  }
+}
+
+function handleClick(): void {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.dcm,.unity,.png,.jpg,.jpeg,.pdf';
+  input.multiple = true;
+  input.onchange = () => {
+    if (input.files && input.files.length > 0) {
+      const selectedFiles = Array.from(input.files);
+      props.onFilesDropped(selectedFiles);
+    } else {
+      console.warn('No files were selected.');
+    }
+  };
+  input.click();
+}
+
+function onDragOver(): void {
+  isDragOver.value = true;
+}
+
+function onDragEnter(): void {
+  isDragOver.value = true;
+}
+
+function onDragLeave(): void {
+  isDragOver.value = false;
+}
+</script>
+
+<style scoped>
+.drop-zone {
+  width: 503px;
+  height: auto;
+  border: transparent;
+  border-radius: 8px;
+  text-align: center;
+  line-height: 20px;
+  font-size: 16px;
+  background-color: #f7f7f8;
+  cursor: pointer;
+}
+
+.drag-over {
+  background-color: #c9d7fc;
+}
+
+.drop-zone p {
+  margin: 0;
+  color: #333;
+}
+
+.icon-container {
+  background-color: white;
+  height: 40px;
+  width: 40px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+}
+</style>

package/src/components/demo/DemoAvatarDropdownMenu.vue

@@ -0,0 +1,343 @@
+<template>
+  <v-menu v-model="profileDropdown.modal" :target="[profileDropdown.x, profileDropdown.y]">
+    <v-card id="demo-menu-card" class="pa-2">
+      <div class="px-4 py-2 grid-avatar">
+        <v-badge icon="edit" color="minsk_900" @click="" offset-x="55" offset-y="52">
+          <v-img :src="userAvatar" width="64px" height="64px" rounded="circle" style="opacity: 1 !important" />
+        </v-badge>
+        <div class="ml-2">
+          <v-list-item-title>
+            <span>{{ t('data.profiles[0].name') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            <span>{{ t('data.profiles[0].licence') }}</span>
+          </v-list-item-subtitle>
+          <v-btn variant="flat" size="small" color="minsk_900" class="mt-1">
+            <span>{{ t('labels.editProfile') }}</span>
+          </v-btn>
+        </div>
+      </div>
+      <v-divider class="py-1" />
+      <div class="px-4 py-2 shark-600 text-sm-semibold">
+        <span>{{ t('labels.switchAccounts') }}</span>
+      </div>
+      <v-list density="compact" class="py-0 pb-1">
+        <v-list-item link prepend-avatar="https://cdn.vuetifyjs.com/images/john.jpg">
+          <v-list-item-title>
+            <span>{{ t('data.profiles[1].name') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            <span>{{ t('data.profiles[1].licence') }}</span>
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+      <v-list density="compact" class="py-0 pb-1">
+        <v-list-item link>
+          <template #prepend>
+            <v-icon size="small" icon="add" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.addAccount') }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+      <v-divider class="pb-1" />
+      <v-list density="compact" class="py-0 pb-1">
+        <v-list-item link>
+          <template #prepend>
+            <v-icon size="small" icon="credit_score" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.manageSubscription') }}</span>
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item link>
+          <template #prepend>
+            <v-icon size="small" icon="credit_card" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.billingSettings') }}</span>
+          </v-list-item-title>
+        </v-list-item>
+        <v-list-item link>
+          <template #prepend>
+            <v-icon size="small" icon="security" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.securitySettings') }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+      <v-divider class="pb-1" />
+      <v-list density="compact" class="py-0 pb-1">
+        <v-list-item class="py-2" link @click="purchaseCredits">
+          <template #prepend>
+            <v-icon size="small" icon="toll" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.credits') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle class="sub-link">
+            <span>{{ t('labels.addMoreCredits') }}</span>
+          </v-list-item-subtitle>
+          <template v-slot:append>
+            <v-badge class="prog-3-5" content="3 / 5" inline></v-badge>
+          </template>
+        </v-list-item>
+        <v-list-item class="py-2" link @click="cloudStorage">
+          <template #prepend>
+            <v-icon size="small" icon="cloud_done" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.cloudStorage') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            <v-progress-linear class="mt-2" :model-value="50" color="minsk_500" bg-color="shark_200" rounded />
+          </v-list-item-subtitle>
+          <template v-slot:append>
+            <v-badge class="prog-1-5" content="1 / 3" inline></v-badge>
+          </template>
+        </v-list-item>
+      </v-list>
+      <v-divider class="pb-1" />
+      <v-list density="compact" class="py-0 pb-1">
+        <v-list-item class="py-2" link>
+          <template #prepend>
+            <v-icon size="small"><font-awesome-icon :icon="faApple" /></v-icon>
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.ios') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle class="sub-link">
+            <span>{{ t('labels.findOutMore') }}</span>
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item class="py-2" link>
+          <template #prepend>
+            <v-icon size="small"><font-awesome-icon :icon="faAndroid" /></v-icon>
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.android') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle class="sub-link">
+            <span>{{ t('labels.findOutMore') }}</span>
+          </v-list-item-subtitle>
+        </v-list-item>
+        <v-list-item class="py-2" link>
+          <template #prepend>
+            <v-icon size="small">
+              <font-awesome-icon :icon="faAndroid" />
+            </v-icon>
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.arVrAddon') }}</span>
+          </v-list-item-title>
+          <v-list-item-subtitle>
+            <span>+{{ t('labels.perMonth', { price: addonPrice }) }}</span>
+          </v-list-item-subtitle>
+        </v-list-item>
+      </v-list>
+      <v-divider class="pb-1" />
+      <v-list density="compact" class="py-0 pb-0">
+        <v-list-item link @click="close">
+          <template #prepend>
+            <v-icon size="small" icon="west" />
+          </template>
+          <v-list-item-title>
+            <span>{{ t('labels.backToPortal') }}</span>
+          </v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { faAndroid, faApple } from '@fortawesome/free-brands-svg-icons';
+import { useDemoStore } from '@/stores/demo.store';
+import { useViewerStore } from '@/stores/viewer.store';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+type Emits = {
+  close: [void];
+};
+
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+const { profileDropdown } = useDemoStore();
+const { options } = storeToRefs(useViewerStore());
+
+const addonPrice = ref<string>('2.95');
+
+const userAvatar = computed(() => {
+  const name = options.value.user?.name || 'Unknown User';
+  return options.value.user?.avatarUrl || name[0];
+});
+
+async function purchaseCredits(): Promise<void> {
+  if (options.value.onPurchaseCredits) {
+    await options.value.onPurchaseCredits();
+  }
+}
+
+async function cloudStorage(): Promise<void> {
+  if (options.value.onCloudStorage) {
+    // TODO: implement
+    await options.value.onCloudStorage([]);
+  }
+}
+
+async function close(): Promise<void> {
+  if (options.value.onExit) {
+    await options.value.onExit();
+  }
+  emit('close');
+}
+</script>
+
+<style lang="scss">
+#demo-menu-card {
+  width: 312px;
+  border-radius: var(--base, 8px);
+
+  /* Box shadow/md */
+  box-shadow:
+    0px 2px 4px -2px rgba(29, 29, 73, 0.1),
+    0px 4px 6px -1px rgba(29, 29, 73, 0.1);
+
+  .v-list-item {
+    .v-icon--size-small {
+      font-size: 24px;
+    }
+  }
+
+  .v-list-item-subtitle {
+    &.sub-link {
+      color: #2e3176;
+      text-decoration-line: underline;
+    }
+    .v-progress-linear__background {
+      opacity: 1 !important;
+    }
+  }
+
+  .v-list-item__spacer {
+    width: 12px;
+  }
+
+  .v-badge {
+    &.prog-1-5 .v-badge__wrapper {
+      & {
+        border: 1px solid rgb(var(--v-theme-minsk_200)) !important;
+        background: rgb(var(--v-theme-minsk_050)) !important;
+      }
+      .v-badge__badge {
+        color: rgb(var(--v-theme-minsk_900)) !important;
+      }
+    }
+    &.prog-2-5 .v-badge__wrapper {
+      & {
+        border: 1px solid rgb(var(--v-theme-minsk_200)) !important;
+        background: rgb(var(--v-theme-minsk_050)) !important;
+      }
+      .v-badge__badge {
+        color: rgb(var(--v-theme-minsk_900)) !important;
+      }
+    }
+    &.prog-3-5 .v-badge__wrapper {
+      & {
+        border: 1px solid rgb(var(--v-theme-lightning_200)) !important;
+        background: rgb(var(--v-theme-lightning_050)) !important;
+      }
+      .v-badge__badge {
+        color: rgb(var(--v-theme-lightning_800)) !important;
+      }
+    }
+    &.prog-4-5 .v-badge__wrapper {
+      & {
+        border: 1px solid rgb(var(--v-theme-lightning_200)) !important;
+        background: rgb(var(--v-theme-lightning_050)) !important;
+      }
+      .v-badge__badge {
+        color: rgb(var(--v-theme-lightning_800)) !important;
+      }
+    }
+    &.prog-5-5 .v-badge__wrapper {
+      & {
+        border: 1px solid rgb(var(--v-theme-amaranth_200)) !important;
+        background: rgb(var(--v-theme-amaranth_050)) !important;
+      }
+      .v-badge__badge {
+        color: rgb(var(--v-theme-amaranth_700)) !important;
+      }
+    }
+  }
+
+  .v-badge__wrapper {
+    & {
+      margin: 0 !important;
+      padding: 1px 6px !important;
+      border-radius: var(--base, 8px) !important;
+    }
+    .v-badge__badge {
+      & {
+        background: unset !important;
+        padding: 0 !important;
+        font-size: 12px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 16px; /* 133.333% */
+      }
+    }
+  }
+
+  .v-ripple__container {
+    border-radius: var(--base, 4px);
+  }
+
+  .grid-avatar {
+    display: grid;
+    flex: none;
+    grid-template-areas: 'prepend content append';
+    grid-template-columns: max-content 1fr auto;
+    outline: none;
+    max-width: 100%;
+    padding: 4px 16px;
+    position: relative;
+    text-decoration: none;
+    .v-btn {
+      height: 28px !important;
+      .v-btn__content {
+        font-size: 12px !important;
+      }
+    }
+    .v-badge__wrapper {
+      & {
+        color: rgb(var(--v-theme-minsk_900)) !important;
+        margin: 0 !important;
+        padding: 1px 6px !important;
+        border-radius: var(--base, 8px) !important;
+      }
+      .v-badge__badge {
+        & {
+          color: rgb(var(--v-theme-minsk_900)) !important;
+          cursor: pointer !important;
+          border-radius: var(--sm, 3.333px);
+          background: #fff !important;
+          box-shadow:
+            0px 0.714px 1.429px -0.714px rgba(29, 29, 73, 0.1),
+            0px 1.429px 2.143px -0.357px rgba(29, 29, 73, 0.1);
+          padding: 0 !important;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 16px; /* 133.333% */
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/demo/DemoInfoModal.vue

@@ -0,0 +1,60 @@
+<template>
+  <v-dialog v-model="modalState" max-width="680">
+    <v-card>
+      <v-card-title class="text-center text-h5">
+        <span>{{ demoTitle }}</span>
+      </v-card-title>
+      <v-card-text class="text-justify" v-for="subtitle in demoSubtitles" :key="subtitle">
+        <p>{{ subtitle }}</p>
+      </v-card-text>
+      <v-card-actions class="mt-4">
+        <v-btn data-testid="close" color="error" @click="modalState = false" :disabled="!isModalOpen">
+          <span>{{ t('labels.continueWithDemo') }}</span>
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          v-if="demoType === DemoType.Licence"
+          data-testid="confirm"
+          variant="flat"
+          color="success"
+          @click="enquire"
+        >
+          <span>{{ t('labels.enquireAboutIntegration') }}</span>
+        </v-btn>
+        <v-btn v-else data-testid="confirm" variant="flat" color="success" @click="purchase">
+          <span>{{ t('labels.purchase3dicom') }}</span>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { openUrl } from '@/functions/openUrl';
+import { useDemoStore } from '@/stores/demo.store';
+import { PRICING_URL, SUPPORT_URL } from '@/constants';
+import { useI18n } from 'vue-i18n';
+import { DemoType } from '@3cr/viewer-types-ts';
+
+interface Props {
+  isModalOpen?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isModalOpen: true
+});
+
+const { t } = useI18n();
+const { demoTitle, demoSubtitles, demoType } = storeToRefs(useDemoStore());
+
+const modalState = defineModel('modal', { default: false });
+
+function enquire(): void {
+  openUrl(SUPPORT_URL);
+}
+
+function purchase(): void {
+  openUrl(PRICING_URL);
+}
+</script>