feat: do not send contact details to the widget (#9223)

* refactor: use has_email instead of email

* feat: remove usage of details directly in forms

* test: update payload

* test: fix transcript test

* refactor: use computed hasEmail

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/widget/api/conversation.js

@@ -38,10 +38,9 @@ const setUserLastSeenAt = async ({ lastSeen }) => {
     { contact_last_seen_at: lastSeen }
   );
 };
-const sendEmailTranscript = async ({ email }) => {
+const sendEmailTranscript = async () => {
   return API.post(
-    `/api/v1/widget/conversations/transcript${window.location.search}`,
-    { email }
+    `/api/v1/widget/conversations/transcript${window.location.search}`
   );
 };
 const toggleStatus = async () => {

app/javascript/widget/components/ChatFooter.vue

@@ -87,7 +87,10 @@ export default {
       return !allowMessagesAfterResolved && status === 'resolved';
     },
     showEmailTranscriptButton() {
-      return this.currentUser && this.currentUser.email;
+      return this.hasEmail;
+    },
+    hasEmail() {
+      return this.currentUser && this.currentUser.has_email;
     },
     hasReplyTo() {
       return (
@@ -141,12 +144,9 @@ export default {
       this.inReplyTo = message;
     },
     async sendTranscript() {
-      const { email } = this.currentUser;
-      if (email) {
+      if (this.hasEmail) {
         try {
-          await sendEmailTranscript({
-            email,
-          });
+          await sendEmailTranscript();
           window.bus.$emit(BUS_EVENTS.SHOW_ALERT, {
             message: this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'),
             type: 'success',

app/javascript/widget/components/PreChat/Form.vue

@@ -1,7 +1,7 @@
 <template>
   <FormulateForm
     v-model="formValues"
-    class="flex flex-1 flex-col p-6 overflow-y-auto"
+    class="flex flex-col flex-1 p-6 overflow-y-auto"
     @submit="onSubmit"
   >
     <div
@@ -49,7 +49,7 @@
     />
 
     <custom-button
-      class="font-medium mt-2 mb-5"
+      class="mt-2 mb-5 font-medium"
       block
       :bg-color="widgetColor"
       :text-color="textColor"
@@ -133,9 +133,10 @@ export default {
       return this.preChatFormEnabled ? this.options.preChatFields : [];
     },
     filteredPreChatFields() {
-      const isUserEmailAvailable = !!this.currentUser.email;
-      const isUserPhoneNumberAvailable = !!this.currentUser.phone_number;
+      const isUserEmailAvailable = this.currentUser.has_email;
+      const isUserPhoneNumberAvailable = this.currentUser.has_phone_number;
       const isUserIdentifierAvailable = !!this.currentUser.identifier;
+
       const isUserNameAvailable = !!(
         isUserIdentifierAvailable ||
         isUserEmailAvailable ||
@@ -302,11 +303,10 @@ export default {
     },
     onSubmit() {
       const { emailAddress, fullName, phoneNumber, message } = this.formValues;
-      const { email } = this.currentUser;
       this.$emit('submit', {
         fullName,
         phoneNumber,
-        emailAddress: emailAddress || email,
+        emailAddress,
         message,
         activeCampaignId: this.activeCampaign.id,
         conversationCustomAttributes: this.conversationCustomAttributes,

app/javascript/widget/store/modules/specs/contact/getters.spec.js

@@ -3,8 +3,8 @@ import { getters } from '../../contacts';
 describe('#getters', () => {
   it('getCurrentUser', () => {
     const user = {
-      email: 'thoma@sphadikam.com',
-      name: 'Adu Thoma',
+      has_email: true,
+      has_name: true,
       avatar_url: '',
       identifier_hash: 'malana_hash',
     };
@@ -12,8 +12,8 @@ describe('#getters', () => {
       currentUser: user,
     };
     expect(getters.getCurrentUser(state)).toEqual({
-      email: 'thoma@sphadikam.com',
-      name: 'Adu Thoma',
+      has_email: true,
+      has_name: true,
       avatar_url: '',
       identifier_hash: 'malana_hash',
     });

app/javascript/widget/store/modules/specs/contact/mutations.spec.js

@@ -4,8 +4,8 @@ describe('#mutations', () => {
   describe('#SET_CURRENT_USER', () => {
     it('set current user', () => {
       const user = {
-        email: 'thoma@sphadikam.com',
-        name: 'Adu Thoma',
+        has_email: true,
+        has_name: true,
         avatar_url: '',
         identifier_hash: 'malana_hash',
       };