bfg-common 1.2.57 → 1.2.59

package/components/common/feedback/Buttons.vue

@@ -1,232 +1,232 @@
-<template>
-  <div class="buttons">
-    <div class="buttons-info">
-      <div class="icon-wrap">
-        <atoms-the-icon
-          id="showHelpInfo"
-          fill="#0072a3"
-          width="24px"
-          height="24px"
-          name="info-circle"
-          @click="isShowHelpInfo = !isShowHelpInfo"
-        />
-      </div>
-      <span class="info-text">{{ localization.helpUsImprove }}</span>
-    </div>
-    <atoms-tooltip-signpost
-      v-if="isShowHelpInfo"
-      test-id="feedback-button"
-      elem-id="showHelpInfo"
-      class="help-info"
-      @hide="isShowHelpInfo = false"
-    >
-      <h3>{{ localization.feedbackHelp }}</h3>
-      <p>
-        {{ localization.anyFeedbackYouProvideMay }}
-        <a id="privacy-notice-link" target="_blank" href="#">
-          VMware's Privacy Notice.
-        </a>
-
-        {{ localization.youAreResponsibleForObfuscatingOrRemoving }}
-      </p>
-    </atoms-tooltip-signpost>
-    <div class="buttons-body">
-      <span class="text">{{ localization.selectAType }}</span>
-      <div class="button-wrap">
-        <button
-          v-for="item in props.items"
-          id="feedback-button"
-          :key="item.key"
-          :class="[
-            'btn btn-outline feedback-button',
-            { active: item.key === props.select },
-          ]"
-          @click="onSelect(item.key)"
-        >
-          <atoms-the-icon2
-            class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
-            :name="item.iconName"
-          />
-          <span>{{ item.text }}</span>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_FeedbackButtonsItem } from './models/interfaces'
-import { UI_I_Localization } from '~/models/interfaces'
-
-const props = defineProps<{
-  select: number | null
-  items: UI_I_FeedbackButtonsItem[]
-}>()
-const emits = defineEmits<{
-  (event: 'update:select', num: number): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onSelect = (value: number): void => {
-  emits('update:select', value)
-}
-const isShowHelpInfo = ref(false)
-</script>
-
-<style scoped lang="scss">
-.buttons {
-  .buttons-info {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-bottom: 20px;
-
-    :deep(.icon-info-standart) {
-      width: 20px !important;
-      min-width: 20px !important;
-      height: 20px;
-      min-height: 20px;
-    }
-    .icon-wrap {
-      cursor: pointer;
-      height: 24px;
-      width: 24px;
-      .info-icon {
-        height: 24px;
-      }
-    }
-
-    .info-text {
-      margin-left: 5px;
-    }
-  }
-  .buttons-body {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    margin-bottom: 20px;
-    .text {
-      padding-top: 5px;
-      min-width: 140px;
-      margin-right: 10px;
-    }
-    .email {
-      width: 100%;
-    }
-    .button-wrap {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-start;
-      font-size: 13px;
-      font-weight: 400;
-      letter-spacing: normal;
-
-      .btn {
-        transform: translate(0, 3px);
-        text-transform: capitalize;
-        padding: 5px;
-        .text {
-          color: var(--icon-fill-hover-color);
-        }
-
-        &.btn-outline.feedback-button {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-        }
-        &.btn-outline.feedback-button .feedback-icon {
-          width: 16px;
-          height: 16px;
-          margin-right: 3px;
-        }
-
-        color: var(--icon-fill-color);
-        border: 1px solid var(--btn-border-color);
-        border-bottom: 5px solid var(--btn-border-color);
-        .has-solid.clr-i-outline.clr-i-outline-path-2 {
-          fill: var(--icon-fill-color);
-        }
-      }
-    }
-    .button-wrap {
-      .btn.btn-outline.feedback-button:hover {
-        transform: translate(0px, 0px);
-        color: var(--icon-fill-hover-color);
-        border: 1px solid var(--btn-border-hover-color);
-        border-bottom: 5px solid var(--btn-border-hover-color);
-        .has-solid.clr-i-outline.clr-i-outline-path-2 {
-          fill: var(--icon-fill-hover-color);
-        }
-      }
-      .btn.btn-outline.feedback-button.active {
-        border: 1px solid var(--btn-border-hover-color);
-        border-bottom: 5px solid var(--btn-border-hover-color);
-      }
-    }
-
-    &__last {
-      margin-top: -20px;
-    }
-  }
-}
-.tooltip {
-  position: relative;
-  display: inline-block;
-
-  & .tooltiptext {
-    text-align: center;
-    padding: 5px 2px;
-    border-radius: 2px;
-    border: 1px solid var(--global-font-color);
-    color: var(--global-font-color);
-    background-color: var(--global-bg-color);
-    position: absolute;
-    z-index: 1;
-  }
-}
-.help-info {
-  display: block;
-  text-align: left;
-  width: 360px;
-  color: var(--modal-first-title);
-
-  h3 {
-    font-size: 22px;
-    color: inherit;
-    margin-top: 0px;
-    text-transform: capitalize;
-  }
-
-  p {
-    margin-top: 24px;
-    text-transform: none;
-    white-space: break-spaces;
-  }
-  a {
-    color: var(--a-link-color);
-    text-decoration: none;
-  }
-}
-</style>
-<style>
-:root {
-  --modal-secondary-title: #565656;
-  --modal-first-title: #565656;
-  --icon-fill-color: #1d1c1c;
-  --icon-fill-hover-color: rgb(0, 121, 184);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: #dedede;
-  --a-link-color: #0072a3;
-}
-:root.dark-theme {
-  --modal-secondary-title: #e9ecef;
-  --modal-first-title: #adbbc4;
-  --icon-fill-color: rgb(233, 236, 239);
-  --icon-fill-hover-color: rgb(73, 175, 217);
-  --btn-border-hover-color: #0079b8;
-  --btn-border-color: rgb(14, 22, 27);
-  --a-link-color: #4aaed9;
-}
-</style>
+<template>
+  <div class="buttons">
+    <div class="buttons-info">
+      <div class="icon-wrap">
+        <atoms-the-icon
+          id="showHelpInfo"
+          fill="#0072a3"
+          width="24px"
+          height="24px"
+          name="info-circle"
+          @click="isShowHelpInfo = !isShowHelpInfo"
+        />
+      </div>
+      <span class="info-text">{{ localization.helpUsImprove }}</span>
+    </div>
+    <atoms-tooltip-signpost
+      v-if="isShowHelpInfo"
+      test-id="feedback-button"
+      elem-id="showHelpInfo"
+      class="help-info"
+      @hide="isShowHelpInfo = false"
+    >
+      <h3>{{ localization.feedbackHelp }}</h3>
+      <p>
+        {{ localization.anyFeedbackYouProvideMay }}
+        <a id="privacy-notice-link" target="_blank" href="#">
+          VMware's Privacy Notice.
+        </a>
+
+        {{ localization.youAreResponsibleForObfuscatingOrRemoving }}
+      </p>
+    </atoms-tooltip-signpost>
+    <div class="buttons-body">
+      <span class="text">{{ localization.selectAType }}</span>
+      <div class="button-wrap">
+        <button
+          v-for="item in props.items"
+          id="feedback-button"
+          :key="item.key"
+          :class="[
+            'btn btn-outline feedback-button',
+            { active: item.key === props.select },
+          ]"
+          @click="onSelect(item.key)"
+        >
+          <atoms-the-icon2
+            class="feedback-icon btn-icon has-solid clr-i-outline clr-i-outline-path-2"
+            :name="item.iconName"
+          />
+          <span>{{ item.text }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_FeedbackButtonsItem } from './models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+
+const props = defineProps<{
+  select: number | null
+  items: UI_I_FeedbackButtonsItem[]
+}>()
+const emits = defineEmits<{
+  (event: 'update:select', num: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelect = (value: number): void => {
+  emits('update:select', value)
+}
+const isShowHelpInfo = ref(false)
+</script>
+
+<style scoped lang="scss">
+.buttons {
+  .buttons-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 20px;
+
+    :deep(.icon-info-standart) {
+      width: 20px !important;
+      min-width: 20px !important;
+      height: 20px;
+      min-height: 20px;
+    }
+    .icon-wrap {
+      cursor: pointer;
+      height: 24px;
+      width: 24px;
+      .info-icon {
+        height: 24px;
+      }
+    }
+
+    .info-text {
+      margin-left: 5px;
+    }
+  }
+  .buttons-body {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    .text {
+      padding-top: 5px;
+      min-width: 140px;
+      margin-right: 10px;
+    }
+    .email {
+      width: 100%;
+    }
+    .button-wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: 13px;
+      font-weight: 400;
+      letter-spacing: normal;
+
+      .btn {
+        transform: translate(0, 3px);
+        text-transform: capitalize;
+        padding: 5px;
+        .text {
+          color: var(--icon-fill-hover-color);
+        }
+
+        &.btn-outline.feedback-button {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
+        &.btn-outline.feedback-button .feedback-icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 3px;
+        }
+
+        color: var(--icon-fill-color);
+        border: 1px solid var(--btn-border-color);
+        border-bottom: 5px solid var(--btn-border-color);
+        .has-solid.clr-i-outline.clr-i-outline-path-2 {
+          fill: var(--icon-fill-color);
+        }
+      }
+    }
+    .button-wrap {
+      .btn.btn-outline.feedback-button:hover {
+        transform: translate(0px, 0px);
+        color: var(--icon-fill-hover-color);
+        border: 1px solid var(--btn-border-hover-color);
+        border-bottom: 5px solid var(--btn-border-hover-color);
+        .has-solid.clr-i-outline.clr-i-outline-path-2 {
+          fill: var(--icon-fill-hover-color);
+        }
+      }
+      .btn.btn-outline.feedback-button.active {
+        border: 1px solid var(--btn-border-hover-color);
+        border-bottom: 5px solid var(--btn-border-hover-color);
+      }
+    }
+
+    &__last {
+      margin-top: -20px;
+    }
+  }
+}
+.tooltip {
+  position: relative;
+  display: inline-block;
+
+  & .tooltiptext {
+    text-align: center;
+    padding: 5px 2px;
+    border-radius: 2px;
+    border: 1px solid var(--global-font-color);
+    color: var(--global-font-color);
+    background-color: var(--global-bg-color);
+    position: absolute;
+    z-index: 1;
+  }
+}
+.help-info {
+  display: block;
+  text-align: left;
+  width: 360px;
+  color: var(--modal-first-title);
+
+  h3 {
+    font-size: 22px;
+    color: inherit;
+    margin-top: 0px;
+    text-transform: capitalize;
+  }
+
+  p {
+    margin-top: 24px;
+    text-transform: none;
+    white-space: break-spaces;
+  }
+  a {
+    color: var(--a-link-color);
+    text-decoration: none;
+  }
+}
+</style>
+<style>
+:root {
+  --modal-secondary-title: #565656;
+  --modal-first-title: #565656;
+  --icon-fill-color: #1d1c1c;
+  --icon-fill-hover-color: rgb(0, 121, 184);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: #dedede;
+  --a-link-color: #0072a3;
+}
+:root.dark-theme {
+  --modal-secondary-title: #e9ecef;
+  --modal-first-title: #adbbc4;
+  --icon-fill-color: rgb(233, 236, 239);
+  --icon-fill-hover-color: rgb(73, 175, 217);
+  --btn-border-hover-color: #0079b8;
+  --btn-border-color: rgb(14, 22, 27);
+  --a-link-color: #4aaed9;
+}
+</style>

package/components/common/feedback/Feedback.vue

@@ -15,32 +15,38 @@
               {{ props.title }}
             </h3>
           </div>
-          <button v-if="!props.isHideCloseIcon" id="feedback-modal-close-icon" class="close" @click="hide">
+          <button
+            v-if="!props.isHideCloseIcon"
+            id="feedback-modal-close-icon"
+            class="close"
+            @click="hide"
+          >
             <atoms-the-icon class="close-icon" name="close" />
           </button>
         </div>
 
-        <common-feedback-buttons
-          v-model:select="selectedTab"
-          :items="tabsItems"
-        />
+        <common-feedback-buttons v-model:select="type" :items="tabsItems" />
         <div class="modal-body">
           <common-feedback-message
-            v-show="selectedTab !== 2"
+            v-show="type !== 2"
             v-model:description="description"
             v-model:email="email"
-            :selected-tab="selectedTab"
+            :selected-tab="type"
             @screen-shot="onScreenShot"
           />
-          <common-feedback-visit-portal v-show="selectedTab === 2" />
+          <common-feedback-visit-portal v-show="type === 2" />
         </div>
         <div
           :class="{
-            'modal-footer': selectedTab !== 2,
-            'modal-no-footer': selectedTab === 2,
+            'modal-footer': type !== 2,
+            'modal-no-footer': type === 2,
           }"
         >
-          <button id="feedback-modal-cancel-button" class="btn btn-outline" @click="hide">
+          <button
+            id="feedback-modal-cancel-button"
+            class="btn btn-outline"
+            @click="hide"
+          >
             {{ localization.cancel }}
           </button>
           <button
@@ -70,8 +76,10 @@
 import { UI_I_Localization } from '~/models/interfaces'
 import {
   UI_I_FeedbackButtonsItem,
+  UI_I_FeedbackForm,
   UI_I_MessageImg,
 } from '~/components/common/feedback/models/interfaces'
+import { UI_T_FeedbackType } from '~/components/common/feedback/models/types'
 import { feedbackTabs } from '~/components/common/feedback/config/feedbackTabs'
 
 const props = defineProps<{
@@ -84,7 +92,7 @@ const props = defineProps<{
   isHideCloseIcon?: boolean
 }>()
 const emits = defineEmits<{
-  (event: 'submit', value: any): void
+  (event: 'submit', value: UI_I_FeedbackForm): void
   (event: 'hide'): void
 }>()
 
@@ -93,41 +101,47 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 const tabsItems = computed<UI_I_FeedbackButtonsItem[]>(() =>
   feedbackTabs(localization.value)
 )
+const reset = (): void => {
+  email.value = ''
+  description.value = ''
+  type.value = undefined
+}
 const hide = (): void => {
   emits('hide')
 
-  email.value = ''
-  description.value = ''
-  selectedTab.value = null
+  reset()
 }
 
 const submit = (): void => {
+  if (type.value !== 0 && type.value !== 1) return
+
   const canvas = document.getElementById('feedbackImg') as HTMLCanvasElement
 
+  const image = canvas?.toDataURL().match(/base64,(.+)/)?.[1] || ''
   emits('submit', {
-    type: selectedTab.value,
+    image,
+    type: type.value,
     description: description.value,
     email: email.value,
-    image: canvas?.toDataURL() || ''
   })
-  description.value = ''
-  selectedTab.value = null
+
+  reset()
 }
 const computeWidth = computed<string | undefined>(() =>
-  isFeedbackImageDrawn.value && selectedTab.value !== 2
+  isFeedbackImageDrawn.value && type.value !== 2
     ? feedbackImageDrawnWidth.value
     : props.width
 )
 const computeHeight = computed<string>(() =>
-  !isFeedbackImageDrawn.value && selectedTab.value !== 2
+  !isFeedbackImageDrawn.value && type.value !== 2
     ? ''
-    : selectedTab.value !== 2
+    : type.value !== 2
     ? '100%'
     : '420px'
 )
 const isFeedbackImageDrawn = ref<boolean>(false)
 const feedbackImageDrawnWidth = ref<string>('')
-const selectedTab = ref<number | null>(null)
+const type = ref<UI_T_FeedbackType>(undefined)
 const description = ref<string>('')
 const email = ref<string>('')
 
@@ -135,7 +149,6 @@ const onScreenShot = (value: UI_I_MessageImg): void => {
   isFeedbackImageDrawn.value = value.hasTakeScreenshot
   feedbackImageDrawnWidth.value = value.width
 }
-
 </script>
 
 <style scoped lang="scss">