From 688523846e405458a18b2318a6849451f56b8fc0 Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Wed, 17 Apr 2024 11:41:31 +0530
Subject: [PATCH] feat: Add message signature

---
 .../dashboard/settings/personal/Index.vue     | 13 +++
 .../settings/personal/MessageSignature.vue    | 84 +++++++++++++++++++
 .../settings/personal/PersonalWrapper.vue     | 52 ++++++++++++
 3 files changed, 149 insertions(+)
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue

diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
index a25a50db5..b3b382591 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/Index.vue
@@ -8,10 +8,23 @@
           Profile Settings
         </h2>
         <user-basic-profile username="John Doe" size="72px" />
+
+        <personal-wrapper
+          header="Personal message signature"
+          description="Create a unique message signature to appear at the end of every message you send from any inbox. You can also include an inline image, which is supported in live-chat, email, and API inboxes."
+          :show-action-button="true"
+          button-text="Save message signature"
+        >
+          <template #settingsItem>
+            <message-signature />
+          </template>
+        </personal-wrapper>
       </div>
     </div>
   </div>
 </template>
 <script setup>
 import UserBasicProfile from './UserBasicProfile.vue';
+import MessageSignature from './MessageSignature.vue';
+import PersonalWrapper from './PersonalWrapper.vue';
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
new file mode 100644
index 000000000..7f5ec0859
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/MessageSignature.vue
@@ -0,0 +1,84 @@
+<template>
+  <woot-message-editor
+    id="message-signature-input"
+    v-model="messageSignature"
+    class="message-editor h-[10rem]"
+    :is-format-mode="true"
+    :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
+    :enabled-menu-options="customEditorMenuList"
+    :enable-suggestions="false"
+    :show-image-resize-toolbar="true"
+  />
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+import { MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+
+export default {
+  components: {
+    WootMessageEditor,
+  },
+  mixins: [alertMixin],
+  data() {
+    return {
+      messageSignature: '',
+      enableMessageSignature: false,
+      isUpdating: false,
+      errorMessage: '',
+      customEditorMenuList: MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentUser: 'getCurrentUser',
+      currentUserId: 'getCurrentUserID',
+    }),
+  },
+  mounted() {
+    this.initValues();
+  },
+  methods: {
+    initValues() {
+      const { message_signature: messageSignature } = this.currentUser;
+      this.messageSignature = messageSignature || '';
+    },
+    async updateSignature() {
+      try {
+        await this.$store.dispatch('updateProfile', {
+          message_signature: this.messageSignature || '',
+        });
+        this.errorMessage = this.$t(
+          'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_SUCCESS'
+        );
+      } catch (error) {
+        this.errorMessage = this.$t(
+          'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.API_ERROR'
+        );
+        if (error?.response?.data?.message) {
+          this.errorMessage = error.response.data.message;
+        }
+      } finally {
+        this.isUpdating = false;
+        this.initValues();
+        this.showAlert(this.errorMessage);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.message-editor {
+  @apply px-3;
+
+  ::v-deep {
+    .ProseMirror-menubar {
+      @apply left-2;
+    }
+  }
+}
+</style>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
new file mode 100644
index 000000000..0a0c10c52
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/personal/PersonalWrapper.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="flex flex-col items-start w-full gap-6">
+    <div
+      class="flex flex-col w-full gap-4 divide-y divide-slate-200 dark:divide-slate-700"
+    >
+      <h4
+        v-if="header"
+        class="text-lg font-medium text-slate-900 dark:text-slate-25"
+      >
+        {{ header }}
+      </h4>
+      <p
+        v-if="description"
+        class="pt-4 mb-0 text-sm font-normal text-slate-600 dark:text-slate-400"
+      >
+        {{ description }}
+      </p>
+    </div>
+    <div v-if="$slots.settingsItem" class="flex flex-col w-full gap-6">
+      <slot name="settingsItem" />
+      <woot-button
+        v-if="showActionButton"
+        color-scheme="primary"
+        class="rounded-xl w-fit"
+        @click="$emit('click')"
+      >
+        {{ buttonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  header: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  showActionButton: {
+    type: Boolean,
+    default: true,
+  },
+  buttonText: {
+    type: String,
+    default: 'Save',
+  },
+});
+</script>