bfg-common 1.5.92 → 1.5.94

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -1,227 +1,227 @@
-<template>
-  <Teleport to="body">
-    <div
-      :class="['feedback-dialog', { 'light-bulb': selectedTab }]"
-      id="feedback-dialog"
-    >
-      <ui-modal
-        show
-        :width="!options.isAnnotateImage ? '560px' : '880px'"
-        :title="title"
-        test-id="feedback-modal"
-        class="feedback"
-        @hide="onHideModal"
-      >
-        <template #headerDescription>
-          <common-layout-the-header-feedback-new-subtitle />
-        </template>
-
-        <template #content>
-          <ui-modal-block-standard>
-            <template v-if="!options.isAnnotateImage">
-              <common-layout-the-header-feedback-new-tabs
-                v-model="selectedTab"
-                class="metrics-tabs"
-              />
-
-              <div
-                v-if="selectedTab === 'light-bulb'"
-                class="feedback__visit-portal"
-              >
-                <span>{{ descriptions[0] }}</span>
-                <b>Aha</b>
-                <span>{{ descriptions[1] }}</span>
-              </div>
-            </template>
-
-            <template v-if="selectedTab !== 'light-bulb'">
-              <template v-if="!options.isAnnotateImage">
-                <common-layout-the-header-feedback-new-description
-                  v-model="feedbackForm.description"
-                  v-model:is-valid="isValidForm"
-                  :selected-tab="selectedTab"
-                />
-
-                <common-layout-the-header-feedback-new-email
-                  v-model="feedbackForm.email"
-                />
-              </template>
-
-              <common-layout-the-header-feedback-new-additional-details
-                v-model="options"
-              />
-            </template>
-          </ui-modal-block-standard>
-        </template>
-
-        <template #footerLeftContent><span /></template>
-
-        <template #footerContent>
-          <div class="flex gap-4">
-            <ui-button
-              v-if="selectedTab !== 'light-bulb'"
-              test-id="feedback-modal-hide-btn"
-              size="md"
-              variant="outline"
-              min-width="96px"
-              @click="onHideModal"
-            >
-              {{ localization.common.cancel }}
-            </ui-button>
-            <ui-button
-              test-id="feedback-modal-submit-btn"
-              size="md"
-              :disabled="isDisabledButton"
-              min-width="96px"
-              @click="onSubmit"
-            >
-              <ui-icon
-                v-if="selectedTab === 'light-bulb'"
-                name="new-tab"
-                width="20"
-                height="20"
-                class="feedback__btn-icon"
-              />
-              {{ modalFooterButtonNames }}
-            </ui-button>
-          </div>
-        </template>
-      </ui-modal>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
-import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
-import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
-import { UI_E_FeedbackType } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/enums'
-
-const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const selectedTab = ref<UI_T_FeedbackTab>()
-const isValidForm = ref<boolean>(true)
-const options = ref<UI_I_FeedbackCanvasOptions>({
-  isAnnotateImage: false,
-  hasTakeScreenshot: false,
-})
-
-const title = computed<string>(() => {
-  const { common, feedback } = localization.value
-
-  return !options.value.isAnnotateImage
-    ? common.sendFeedback
-    : options.value.hasTakeScreenshot
-    ? feedback.annotateScreenshot
-    : feedback.annotateImage
-})
-const modalFooterButtonNames = computed<string>(() => {
-  const { visitIdeasPortal, send, save } = localization.value.common
-
-  return options.value.isAnnotateImage
-    ? save
-    : selectedTab.value === 'light-bulb'
-    ? visitIdeasPortal
-    : send
-})
-
-const isDisabledButton = computed<boolean>(() => {
-  return !options.value.isAnnotateImage && !selectedTab.value
-})
-
-const onHideModal = (): void => {
-  !options.value.isAnnotateImage
-    ? emits('hide')
-    : (options.value.isAnnotateImage = false)
-}
-const onSubmit = (): void => {
-  if (options.value.isAnnotateImage) {
-    options.value.isAnnotateImage = false
-    return
-  }
-
-  if (selectedTab.value === 'light-bulb') {
-    const targetUrl = 'https://customer.aobfg.ru/' // Ваш URL
-    window.open(targetUrl, '_blank')
-    return
-  }
-
-  isValidForm.value = !!feedbackForm.value.description
-
-  if (!isValidForm.value) return
-  const canvasData = (
-    document.getElementById('feedbackImg') as HTMLCanvasElement
-  ).toDataURL()
-  const canvasBlankData = (
-    document.getElementById('feedbackImgBlank') as HTMLCanvasElement
-  ).toDataURL()
-
-  const image = canvasData.match(/base64,(.+)/)?.[1] || ''
-  feedbackForm.value.image = canvasData === canvasBlankData ? '' : image
-  feedbackForm.value.type = UI_E_FeedbackType[selectedTab.value]
-
-  emits('submit')
-}
-
-const descriptions = ref<string[]>(
-  localization.value.common.useOurExternalIdeasPortal.split('{0}')
-)
-</script>
-
-<style lang="scss">
-:root {
-  --feedback-tooltip-trigger-color: #9da6ad;
-  --feedback-tooltip-acctive-trigger-color: #008fd6;
-  --feedback-tooltip-hover-trigger-color: #4d5d69;
-  --feedback-text-color: #4d5d69;
-  --feedback-tooltip-close-color: #213444;
-  --feedback-tab-active-bg-color: #008fd60f;
-}
-:root.dark-theme {
-  --feedback-tooltip-trigger-color: #9da6ad;
-  --feedback-tooltip-acctive-trigger-color: #2ba2de;
-  --feedback-tooltip-hover-trigger-color: #e9eaec;
-  --feedback-text-color: #e9eaec;
-  --feedback-tooltip-close-color: #e9eaec;
-  --feedback-tab-active-bg-color: #2ba2de14;
-}
-</style>
-<style lang="scss" scoped>
-#feedback-dialog {
-  :deep(.modal-header) {
-    padding-bottom: 0;
-
-    &.scrolled {
-      border-bottom: 0;
-    }
-  }
-  &.light-bulb {
-    :deep(.modal-footer-container) {
-      padding-top: 20px;
-    }
-  }
-  :deep(.modal-container-standard) {
-    padding-top: 0;
-    padding-right: 12px;
-  }
-}
-.feedback {
-  &__visit-portal {
-    color: var(--feedback-text-color);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 15.73px;
-    margin-top: 24px;
-  }
-  &__btn-icon {
-    margin-right: 5px;
-  }
-}
-</style>
+<template>
+  <Teleport to="body">
+    <div
+      id="feedback-dialog"
+      :class="['feedback-dialog', { 'light-bulb': selectedTab }]"
+    >
+      <ui-modal
+        show
+        :width="!options.isAnnotateImage ? '560px' : '880px'"
+        :title="title"
+        test-id="feedback-modal"
+        class="feedback"
+        @hide="onHideModal"
+      >
+        <template #headerDescription>
+          <common-layout-the-header-feedback-new-subtitle />
+        </template>
+
+        <template #content>
+          <ui-modal-block-standard>
+            <template v-if="!options.isAnnotateImage">
+              <common-layout-the-header-feedback-new-tabs
+                v-model="selectedTab"
+                class="metrics-tabs"
+              />
+
+              <div
+                v-if="selectedTab === 'light-bulb'"
+                class="feedback__visit-portal"
+              >
+                <span>{{ descriptions[0] }}</span>
+                <b>Aha</b>
+                <span>{{ descriptions[1] }}</span>
+              </div>
+            </template>
+
+            <template v-if="selectedTab !== 'light-bulb'">
+              <template v-if="!options.isAnnotateImage">
+                <common-layout-the-header-feedback-new-description
+                  v-model="feedbackForm.description"
+                  v-model:is-valid="isValidForm"
+                  :selected-tab="selectedTab"
+                />
+
+                <common-layout-the-header-feedback-new-email
+                  v-model="feedbackForm.email"
+                />
+              </template>
+
+              <common-layout-the-header-feedback-new-additional-details
+                v-model="options"
+              />
+            </template>
+          </ui-modal-block-standard>
+        </template>
+
+        <template #footerLeftContent><span /></template>
+
+        <template #footerContent>
+          <div class="flex gap-4">
+            <ui-button
+              v-if="selectedTab !== 'light-bulb'"
+              test-id="feedback-modal-hide-btn"
+              size="md"
+              variant="outline"
+              min-width="96px"
+              @click="onHideModal"
+            >
+              {{ localization.common.cancel }}
+            </ui-button>
+            <ui-button
+              test-id="feedback-modal-submit-btn"
+              size="md"
+              :disabled="isDisabledButton"
+              min-width="96px"
+              @click="onSubmit"
+            >
+              <ui-icon
+                v-if="selectedTab === 'light-bulb'"
+                name="new-tab"
+                width="20"
+                height="20"
+                class="feedback__btn-icon"
+              />
+              {{ modalFooterButtonNames }}
+            </ui-button>
+          </div>
+        </template>
+      </ui-modal>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
+import { UI_E_FeedbackType } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/enums'
+
+const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedTab = ref<UI_T_FeedbackTab>()
+const isValidForm = ref<boolean>(true)
+const options = ref<UI_I_FeedbackCanvasOptions>({
+  isAnnotateImage: false,
+  hasTakeScreenshot: false,
+})
+
+const title = computed<string>(() => {
+  const { common, feedback } = localization.value
+
+  return !options.value.isAnnotateImage
+    ? common.sendFeedback
+    : options.value.hasTakeScreenshot
+    ? feedback.annotateScreenshot
+    : feedback.annotateImage
+})
+const modalFooterButtonNames = computed<string>(() => {
+  const { visitIdeasPortal, send, save } = localization.value.common
+
+  return options.value.isAnnotateImage
+    ? save
+    : selectedTab.value === 'light-bulb'
+    ? visitIdeasPortal
+    : send
+})
+
+const isDisabledButton = computed<boolean>(() => {
+  return !options.value.isAnnotateImage && !selectedTab.value
+})
+
+const onHideModal = (): void => {
+  !options.value.isAnnotateImage
+    ? emits('hide')
+    : (options.value.isAnnotateImage = false)
+}
+const onSubmit = (): void => {
+  if (options.value.isAnnotateImage) {
+    options.value.isAnnotateImage = false
+    return
+  }
+
+  if (selectedTab.value === 'light-bulb') {
+    const targetUrl = 'https://customer.aobfg.ru/' // Ваш URL
+    window.open(targetUrl, '_blank')
+    return
+  }
+
+  isValidForm.value = !!feedbackForm.value.description
+
+  if (!isValidForm.value) return
+  const canvasData = (
+    document.getElementById('feedbackImg') as HTMLCanvasElement
+  ).toDataURL()
+  const canvasBlankData = (
+    document.getElementById('feedbackImgBlank') as HTMLCanvasElement
+  ).toDataURL()
+
+  const image = canvasData.match(/base64,(.+)/)?.[1] || ''
+  feedbackForm.value.image = canvasData === canvasBlankData ? '' : image
+  feedbackForm.value.type = UI_E_FeedbackType[selectedTab.value]
+
+  emits('submit')
+}
+
+const descriptions = ref<string[]>(
+  localization.value.common.useOurExternalIdeasPortal.split('{0}')
+)
+</script>
+
+<style lang="scss">
+:root {
+  --feedback-tooltip-trigger-color: #9da6ad;
+  --feedback-tooltip-acctive-trigger-color: #008fd6;
+  --feedback-tooltip-hover-trigger-color: #4d5d69;
+  --feedback-text-color: #4d5d69;
+  --feedback-tooltip-close-color: #213444;
+  --feedback-tab-active-bg-color: #008fd60f;
+}
+:root.dark-theme {
+  --feedback-tooltip-trigger-color: #9da6ad;
+  --feedback-tooltip-acctive-trigger-color: #2ba2de;
+  --feedback-tooltip-hover-trigger-color: #e9eaec;
+  --feedback-text-color: #e9eaec;
+  --feedback-tooltip-close-color: #e9eaec;
+  --feedback-tab-active-bg-color: #2ba2de14;
+}
+</style>
+<style lang="scss" scoped>
+#feedback-dialog {
+  :deep(.modal-header) {
+    padding-bottom: 0;
+
+    &.scrolled {
+      border-bottom: 0;
+    }
+  }
+  &.light-bulb {
+    :deep(.modal-footer-container) {
+      padding-top: 20px;
+    }
+  }
+  :deep(.modal-container-standard) {
+    padding-top: 0;
+    padding-right: 12px;
+  }
+}
+.feedback {
+  &__visit-portal {
+    color: var(--feedback-text-color);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 15.73px;
+    margin-top: 24px;
+  }
+  &__btn-icon {
+    margin-right: 5px;
+  }
+}
+</style>