bfg-common 1.2.54 → 1.2.56

package/components/common/feedback/Feedback.vue

@@ -26,17 +26,18 @@
         />
         <div class="modal-body">
           <common-feedback-message
-            v-show="selectedTab !== 3"
-            v-model:description-typed="descriptionText"
+            v-show="selectedTab !== 2"
+            v-model:description="description"
+            v-model:email="email"
             :selected-tab="selectedTab"
             @screen-shot="onScreenShot"
           />
-          <common-feedback-visit-portal v-show="selectedTab === 3" />
+          <common-feedback-visit-portal v-show="selectedTab === 2" />
         </div>
         <div
           :class="{
-            'modal-footer': selectedTab !== 3,
-            'modal-no-footer': selectedTab === 3,
+            'modal-footer': selectedTab !== 2,
+            'modal-no-footer': selectedTab === 2,
           }"
         >
           <button id="feedback-modal-cancel-button" class="btn btn-outline" @click="hide">
@@ -45,7 +46,7 @@
           <button
             class="btn btn-outline"
             :class="props.loading && 'modal-dialog__loader'"
-            :disabled="!descriptionText"
+            :disabled="!description"
             @click="submit"
           >
             <atoms-loader-pre-loader
@@ -83,7 +84,7 @@ const props = defineProps<{
   isHideCloseIcon?: boolean
 }>()
 const emits = defineEmits<{
-  (event: 'submit'): void
+  (event: 'submit', value: any): void
   (event: 'hide'): void
 }>()
 
@@ -94,31 +95,41 @@ const tabsItems = computed<UI_I_FeedbackButtonsItem[]>(() =>
 )
 const hide = (): void => {
   emits('hide')
-  descriptionText.value = ''
+
+  email.value = ''
+  description.value = ''
   selectedTab.value = null
 }
 
 const submit = (): void => {
-  emits('submit')
-  descriptionText.value = ''
+  const canvas = document.getElementById('feedbackImg') as HTMLCanvasElement
+
+  emits('submit', {
+    type: selectedTab.value,
+    description: description.value,
+    email: email.value,
+    image: canvas?.toDataURL() || ''
+  })
+  description.value = ''
   selectedTab.value = null
 }
 const computeWidth = computed<string | undefined>(() =>
-  isFeedbackImageDrawn.value && selectedTab.value !== 3
+  isFeedbackImageDrawn.value && selectedTab.value !== 2
     ? feedbackImageDrawnWidth.value
     : props.width
 )
 const computeHeight = computed<string>(() =>
-  !isFeedbackImageDrawn.value && selectedTab.value !== 3
+  !isFeedbackImageDrawn.value && selectedTab.value !== 2
     ? ''
-    : selectedTab.value !== 3
+    : selectedTab.value !== 2
     ? '100%'
     : '420px'
 )
 const isFeedbackImageDrawn = ref<boolean>(false)
 const feedbackImageDrawnWidth = ref<string>('')
 const selectedTab = ref<number | null>(null)
-const descriptionText = ref<string>('')
+const description = ref<string>('')
+const email = ref<string>('')
 
 const onScreenShot = (value: UI_I_MessageImg): void => {
   isFeedbackImageDrawn.value = value.hasTakeScreenshot

package/components/common/feedback/Message.vue

@@ -4,7 +4,7 @@
       <span class="text">{{ localization.description }}</span>
       <textarea
         id="feedback-message-textarea"
-        v-model="descriptionTextMain"
+        v-model="descriptionLocal"
         :disabled="!props.selectedTab"
         class="clr-textarea ng-pristine ng-invalid ng-touched textarea"
         :placeholder="descriptionTextPlaceholder"
@@ -14,6 +14,7 @@
       <span class="text">{{ localization.emailAddress }} </span>
       <input
         id="feedback-email-input"
+        v-model="email"
         type="email"
         class="email"
         :placeholder="localization.optionalInCaseWeNeed"
@@ -136,27 +137,37 @@ import { UI_I_MessageImg } from '~/components/common/feedback/models/interfaces'
 
 const props = defineProps<{
   selectedTab: number | null
-  descriptionTyped: string
+  description: string
+  email: string
 }>()
 const emits = defineEmits<{
   (event: 'screen-shot', value: UI_I_MessageImg): void
-  (event: 'update:description-typed', value: string): void
+  (event: 'update:description', value: string): void
+  (event: 'update:email', value: string): void
 }>()
 
-const descriptionTextMain = computed<string>({
+const descriptionLocal = computed<string>({
   get() {
-    return props.descriptionTyped
+    return props.description
   },
   set(value) {
-    emits('update:description-typed', value)
+    emits('update:description', value)
+  },
+})
+const email = computed<string>({
+  get() {
+    return props.email
+  },
+  set(value) {
+    emits('update:email', value)
   },
 })
 const localization = computed<UI_I_Localization>(() => useLocal())
 // const drawingPanel = computed(() => drawingPanelFunc(localization.value))
 
 const descriptionTextPlaceholder = computed<string>(() => {
-  if (props.selectedTab === 1) return localization.value.whatIsTheProblemHowCan
-  if (props.selectedTab === 2) return localization.value.tellUsWhatYouEnjoyedSo
+  if (props.selectedTab === 0) return localization.value.whatIsTheProblemHowCan
+  if (props.selectedTab === 1) return localization.value.tellUsWhatYouEnjoyedSo
   return localization.value.selectFeedbackType
 })
 const hasTakeScreenshot = ref<boolean>(false)

package/components/common/feedback/config/feedbackTabs.ts

@@ -7,17 +7,17 @@ export const feedbackTabs = (
   return [
     {
       text: `${localization.problem}`,
-      key: 1,
+      key: 0,
       iconName: 'warning-standart',
     },
     {
       text: `${localization.complement}`,
-      key: 2,
+      key: 1,
       iconName: 'heart',
     },
     {
       text: `${localization.idea}`,
-      key: 3,
+      key: 2,
       iconName: 'lightbulb',
     },
   ]

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.2.54",
+  "version": "1.2.56",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",