From b919afa182c7c479b6b8f2d0e48125c5fa680d03 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 00:53:45 +0530
Subject: [PATCH 1/5] chore: Minor fix

---
 .../dashboard/components-next/Contacts/Pages/ContactsList.vue   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
index 8e94884bd..3be194847 100644
--- a/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
+++ b/app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue
@@ -37,8 +37,6 @@ const ROUTE_MAPPINGS = {
 };
 
 const onClickViewDetails = async id => {
-  await store.dispatch('contacts/show', { id });
-
   const dynamicRouteName =
     ROUTE_MAPPINGS[route.name] || 'contacts_dashboard_edit_index';
 

From 515778eabbb6a941962dc04b96759949aa165aae Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Thu, 21 Nov 2024 10:58:54 +0800
Subject: [PATCH 2/5] chore: Disable throwing error for malformed to address
 (#10464)

We don't need to raise error on sentry for malformed to address as it is already logged.

Fixes: https://linear.app/chatwoot/issue/CW-3151/standarderror-invalid-email-to-address-header-standarderror
---
 app/mailboxes/application_mailbox.rb       | 13 +++++-------
 spec/mailboxes/application_mailbox_spec.rb | 24 ++++++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/app/mailboxes/application_mailbox.rb b/app/mailboxes/application_mailbox.rb
index 6a1902ce4..4fe931b9f 100644
--- a/app/mailboxes/application_mailbox.rb
+++ b/app/mailboxes/application_mailbox.rb
@@ -8,12 +8,12 @@ class ApplicationMailbox < ActionMailbox::Base
 
   # routes as a reply to existing conversations
   routing(
-    ->(inbound_mail) { reply_uuid_mail?(inbound_mail) || in_reply_to_mail?(inbound_mail) } => :reply
+    ->(inbound_mail) { valid_to_address?(inbound_mail) && (reply_uuid_mail?(inbound_mail) || in_reply_to_mail?(inbound_mail)) } => :reply
   )
 
   # routes as a new conversation in email channel
   routing(
-    ->(inbound_mail) { EmailChannelFinder.new(inbound_mail.mail).perform.present? } => :support
+    ->(inbound_mail) { valid_to_address?(inbound_mail) && EmailChannelFinder.new(inbound_mail.mail).perform.present? } => :support
   )
 
   # catchall
@@ -37,8 +37,6 @@ class ApplicationMailbox < ActionMailbox::Base
     # checks if follow this pattern  send it to reply_mailbox
     # reply+<conversation-uuid>@<mailer-domain.com>
     def reply_uuid_mail?(inbound_mail)
-      validate_to_address(inbound_mail)
-
       inbound_mail.mail.to&.any? do |email|
         conversation_uuid = email.split('@')[0]
         conversation_uuid.match?(REPLY_EMAIL_UUID_PATTERN)
@@ -48,13 +46,12 @@ class ApplicationMailbox < ActionMailbox::Base
     # if mail.to returns a string, then it is a malformed `to` header
     # valid `to` header will be of type Mail::AddressContainer
     # validate if the to address is of type string
-    def validate_to_address(inbound_mail)
+    def valid_to_address?(inbound_mail)
       to_address_class = inbound_mail.mail.to&.class
-
-      return if to_address_class == Mail::AddressContainer
+      return true if to_address_class == Mail::AddressContainer
 
       Rails.logger.error "Email to address header is malformed `#{inbound_mail.mail.to}`"
-      raise StandardError, "Invalid email to address header #{inbound_mail.mail.to}"
+      false
     end
   end
 end
diff --git a/spec/mailboxes/application_mailbox_spec.rb b/spec/mailboxes/application_mailbox_spec.rb
index 733ec5523..f4f28d811 100644
--- a/spec/mailboxes/application_mailbox_spec.rb
+++ b/spec/mailboxes/application_mailbox_spec.rb
@@ -69,18 +69,26 @@ RSpec.describe ApplicationMailbox do
     end
 
     describe 'Invalid Mail To Address' do
-      it 'raises error when mail.to header is malformed' do
-        expect do
-          described_class.route mail_with_invalid_to_address
-        end.to raise_error(StandardError,
-                           'Invalid email to address header <vishnu@chatwoot.com>vishnu@chatwoot.com')
+      let(:logger) { double }
+
+      before do
+        allow(Rails).to receive(:logger).and_return(logger)
+        allow(logger).to receive(:error)
       end
 
-      it 'raises another error when mail.to header is malformed' do
+      it 'will not raise error when mail.to header is malformed format 1' do
+        expect(logger).to receive(:error).with("Email to address header is malformed `#{mail_with_invalid_to_address.mail.to}`")
+        expect do
+          described_class.route mail_with_invalid_to_address
+        end.not_to raise_error
+      end
+
+      it 'will not raise error when mail.to header is malformed format 2' do
+        expect(logger).to receive(:error).with("Email to address header is malformed `#{mail_with_invalid_to_address_2.mail.to}`")
+
         expect do
           described_class.route mail_with_invalid_to_address_2
-        end.to raise_error(StandardError,
-                           'Invalid email to address header vishnu@chatwoot.com www.chatwoot.com')
+        end.not_to raise_error
       end
     end
   end

From 3a334be58214db8017d629937f45c680d351fe5a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 21 Nov 2024 09:53:12 +0530
Subject: [PATCH 3/5] feat: add channel icon component (#10471)

This pull request introduces a new `ChannelIcon` component and refactors the existing code to use this component, which simplifies the icon management for different channel types and providers.
---
 .../components-next/icon/ChannelIcon.vue      | 17 ++++++
 .../components-next/icon/provider.js          | 36 +++++++++++
 .../icon/specs/provider.spec.js               | 59 +++++++++++++++++++
 .../components-next/sidebar/ChannelLeaf.vue   | 34 +----------
 4 files changed, 114 insertions(+), 32 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/icon/ChannelIcon.vue
 create mode 100644 app/javascript/dashboard/components-next/icon/provider.js
 create mode 100644 app/javascript/dashboard/components-next/icon/specs/provider.spec.js

diff --git a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
new file mode 100644
index 000000000..11117cc18
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useChannelIcon } from './provider';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  inbox: {
+    type: Object,
+    required: true,
+  },
+});
+
+const channelIcon = useChannelIcon(props.inbox);
+</script>
+
+<template>
+  <Icon :icon="channelIcon" />
+</template>
diff --git a/app/javascript/dashboard/components-next/icon/provider.js b/app/javascript/dashboard/components-next/icon/provider.js
new file mode 100644
index 000000000..5b00376d1
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+export function useChannelIcon(inbox) {
+  const channelTypeIconMap = {
+    'Channel::Api': 'i-ri-cloudy-fill',
+    'Channel::Email': 'i-ri-mail-fill',
+    'Channel::FacebookPage': 'i-ri-messenger-fill',
+    'Channel::Line': 'i-ri-line-fill',
+    'Channel::Sms': 'i-ri-chat-1-fill',
+    'Channel::Telegram': 'i-ri-telegram-fill',
+    'Channel::TwilioSms': 'i-ri-chat-1-fill',
+    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+    'Channel::WebWidget': 'i-ri-global-fill',
+    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+  };
+
+  const providerIconMap = {
+    microsoft: 'i-ri-microsoft-fill',
+    google: 'i-ri-google-fill',
+  };
+
+  const channelIcon = computed(() => {
+    const type = inbox.channel_type;
+    let icon = channelTypeIconMap[type];
+
+    if (type === 'Channel::Email' && inbox.provider) {
+      if (Object.keys(providerIconMap).includes(inbox.provider)) {
+        icon = providerIconMap[inbox.provider];
+      }
+    }
+
+    return icon ?? 'i-ri-global-fill';
+  });
+
+  return channelIcon;
+}
diff --git a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
new file mode 100644
index 000000000..df30d7138
--- /dev/null
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -0,0 +1,59 @@
+import { useChannelIcon } from '../provider';
+
+describe('useChannelIcon', () => {
+  it('returns correct icon for API channel', () => {
+    const inbox = { channel_type: 'Channel::Api' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-cloudy-fill');
+  });
+
+  it('returns correct icon for Facebook channel', () => {
+    const inbox = { channel_type: 'Channel::FacebookPage' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-messenger-fill');
+  });
+
+  it('returns correct icon for WhatsApp channel', () => {
+    const inbox = { channel_type: 'Channel::Whatsapp' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-whatsapp-fill');
+  });
+
+  describe('Email channel', () => {
+    it('returns mail icon for generic email channel', () => {
+      const inbox = { channel_type: 'Channel::Email' };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-mail-fill');
+    });
+
+    it('returns Microsoft icon for Microsoft email provider', () => {
+      const inbox = {
+        channel_type: 'Channel::Email',
+        provider: 'microsoft',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-microsoft-fill');
+    });
+
+    it('returns Google icon for Google email provider', () => {
+      const inbox = {
+        channel_type: 'Channel::Email',
+        provider: 'google',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-google-fill');
+    });
+  });
+
+  it('returns default icon for unknown channel type', () => {
+    const inbox = { channel_type: 'Channel::Unknown' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+
+  it('returns default icon when channel type is undefined', () => {
+    const inbox = {};
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+});
diff --git a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
index e3a2430a5..2a93089a9 100644
--- a/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
+++ b/app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
+import ChannelIcon from 'next/icon/ChannelIcon.vue';
 
 const props = defineProps({
   label: {
@@ -17,37 +18,6 @@ const props = defineProps({
   },
 });
 
-const channelTypeIconMap = {
-  'Channel::Api': 'i-ri-cloudy-fill',
-  'Channel::Email': 'i-ri-mail-fill',
-  'Channel::FacebookPage': 'i-ri-messenger-fill',
-  'Channel::Line': 'i-ri-line-fill',
-  'Channel::Sms': 'i-ri-chat-1-fill',
-  'Channel::Telegram': 'i-ri-telegram-fill',
-  'Channel::TwilioSms': 'i-ri-chat-1-fill',
-  'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-  'Channel::WebWidget': 'i-ri-global-fill',
-  'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-};
-
-const providerIconMap = {
-  microsoft: 'i-ri-microsoft-fill',
-  google: 'i-ri-google-fill',
-};
-
-const channelIcon = computed(() => {
-  const type = props.inbox.channel_type;
-  let icon = channelTypeIconMap[type];
-
-  if (type === 'Channel::Email' && props.inbox.provider) {
-    if (Object.keys(providerIconMap).includes(props.inbox.provider)) {
-      icon = providerIconMap[props.inbox.provider];
-    }
-  }
-
-  return icon ?? 'i-ri-global-fill';
-});
-
 const reauthorizationRequired = computed(() => {
   return props.inbox.reauthorization_required;
 });
@@ -58,7 +28,7 @@ const reauthorizationRequired = computed(() => {
     class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
     :class="{ 'bg-n-solid-blue': active }"
   >
-    <Icon :icon="channelIcon" class="size-3" />
+    <ChannelIcon :inbox="inbox" class="size-3" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
   <div

From 1a4f44555f9f22492e7bbbea1ebf28714740f330 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Thu, 21 Nov 2024 10:37:20 +0530
Subject: [PATCH 4/5] chore: Minor fix

---
 .../Contacts/ContactsForm/ContactsForm.vue    | 115 ++++++++++--------
 1 file changed, 61 insertions(+), 54 deletions(-)

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
index 5ee6c996e..866811ae2 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -33,11 +33,11 @@ const FORM_CONFIG = {
   FIRST_NAME: { field: 'firstName' },
   LAST_NAME: { field: 'lastName' },
   EMAIL_ADDRESS: { field: 'email' },
-  PHONE_NUMBER: { field: 'phone_number' },
-  CITY: { field: 'additional_attributes.city' },
-  COUNTRY: { field: 'additional_attributes.country' },
-  BIO: { field: 'additional_attributes.description' },
-  COMPANY_NAME: { field: 'additional_attributes.company_name' },
+  PHONE_NUMBER: { field: 'phoneNumber' },
+  CITY: { field: 'additionalAttributes.city' },
+  COUNTRY: { field: 'additionalAttributes.country' },
+  BIO: { field: 'additionalAttributes.description' },
+  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
 };
 
 const SOCIAL_CONFIG = {
@@ -54,14 +54,14 @@ const defaultState = {
   email: '',
   firstName: '',
   lastName: '',
-  phone_number: '',
-  additional_attributes: {
+  phoneNumber: '',
+  additionalAttributes: {
     description: '',
-    company_name: '',
-    country_code: '',
+    companyName: '',
+    countryCode: '',
     country: '',
     city: '',
-    social_profiles: {
+    socialProfiles: {
       facebook: '',
       github: '',
       instagram: '',
@@ -75,44 +75,48 @@ const state = reactive({ ...defaultState });
 
 const validationRules = {
   firstName: { required, minLength: minLength(2) },
-  email: { required, email },
+  email: { email },
 };
 
 const v$ = useVuelidate(validationRules, state);
 
-const updateState = () => {
-  if (props.isNewContact) return; // Added to prevent state update for new contact form
+const prepareStateBasedOnProps = () => {
+  if (props.isNewContact) {
+    return; // Added to prevent state update for new contact form
+  }
+
   const {
     id,
     name = '',
     email: emailAddress,
     phoneNumber,
+    additionalAttributes = {},
+  } = props.contactData || {};
+
+  const [firstName = '', lastName = ''] = name.split(' ');
+  const {
+    description,
+    companyName,
+    countryCode,
+    country,
+    city,
+    socialProfiles = {},
+  } = additionalAttributes || {};
+
+  Object.assign(state, {
+    id,
+    name,
+    firstName,
+    lastName,
+    email: emailAddress,
+    phoneNumber,
     additionalAttributes: {
       description,
       companyName,
       countryCode,
       country,
       city,
-      socialProfiles = {},
-    } = {},
-  } = props.contactData || {};
-
-  const [firstName = '', lastName = ''] = name.split(' ');
-
-  Object.assign(state, {
-    id,
-    name,
-    firstName,
-    lastName,
-    email: emailAddress,
-    phone_number: phoneNumber,
-    additional_attributes: {
-      description,
-      company_name: companyName,
-      country_code: countryCode,
-      country,
-      city,
-      social_profiles: socialProfiles,
+      socialProfiles,
     },
   });
 };
@@ -147,38 +151,39 @@ const getValidationKey = key => {
   return FORM_CONFIG[key]?.field;
 };
 
-// Creates a computed property for form field binding based on FORM_CONFIG
+// Creates a computed property for two-way form field binding
 const getFormBinding = key => {
-  // Get field path from config
-  // Example: FORM_CONFIG.name = { field: 'contact.name' }
   const field = FORM_CONFIG[key]?.field;
   if (!field) return null;
 
   return computed({
-    // Get value from state
-    // Example 1 (nested): field = 'contact.name' returns state.contact.name = "John Doe"
-    // Example 2 (root): field = 'email' returns state.email = "john@example.com"
     get: () => {
+      // Handle firstName/lastName fields
       if (field === 'firstName' || field === 'lastName') {
         return state[field]?.toString() || '';
       }
+
+      // Handle nested vs non-nested fields
       const [base, nested] = field.split('.');
+      // Example: 'email' → state.email
+      // Example: 'additionalAttributes.city' → state.additionalAttributes.city
       return (nested ? state[base][nested] : state[base])?.toString() || '';
     },
 
-    // Set value in state and emit update
-    // Example 1 (nested): field = 'contact.name', value = "Jane Doe" → state.contact.name = "Jane Doe"
-    // Example 2 (root): field = 'email', value = "jane@example.com" → state.email = "jane@example.com"
     set: async value => {
+      // Handle name fields specially to maintain the combined 'name' field
       if (field === 'firstName' || field === 'lastName') {
         state[field] = value;
-        // Combine first and last name into the name field
+        // Example: firstName="John", lastName="Doe" → name="John Doe"
         state.name = `${state.firstName} ${state.lastName}`.trim();
       } else {
+        // Handle nested vs non-nested fields
         const [base, nested] = field.split('.');
         if (nested) {
+          // Example: additionalAttributes.city = "New York"
           state[base][nested] = value;
         } else {
+          // Example: email = "test@example.com"
           state[base] = value;
         }
       }
@@ -192,7 +197,16 @@ const getFormBinding = key => {
   });
 };
 
-watch(() => props.contactData, updateState, { immediate: true, deep: true });
+const getMessageType = key => {
+  return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
+    ? 'error'
+    : 'info';
+};
+
+watch(() => props.contactData, prepareStateBasedOnProps, {
+  immediate: true,
+  deep: true,
+});
 
 // Expose state to parent component for avatar upload
 defineExpose({
@@ -210,7 +224,7 @@ defineExpose({
         <template v-for="item in editDetailsForm" :key="item.key">
           <ComboBox
             v-if="item.key === 'COUNTRY'"
-            v-model="state.additional_attributes.country"
+            v-model="state.additionalAttributes.country"
             :options="countryOptions"
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"
@@ -232,12 +246,7 @@ defineExpose({
             v-else
             v-model="getFormBinding(item.key).value"
             :placeholder="item.placeholder"
-            :message-type="
-              isValidationField(item.key) &&
-              v$[getValidationKey(item.key)]?.$error
-                ? 'error'
-                : 'info'
-            "
+            :message-type="getMessageType(item.key)"
             :custom-input-class="`h-8 !pt-1 !pb-1 ${
               !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
             }`"
@@ -274,9 +283,7 @@ defineExpose({
           />
           <input
             v-model="
-              state.additional_attributes.social_profiles[
-                item.key.toLowerCase()
-              ]
+              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
             "
             class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
             :placeholder="item.placeholder"

From 2309424cb19d5b1f9d95f11f29109ddeb2537914 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 21 Nov 2024 10:48:25 +0530
Subject: [PATCH 5/5] feat: Add Contact card and form component (#10466)

Co-authored-by: Pranav <pranavrajs@gmail.com>
---
 .../Contacts/ContactsCard/ContactsCard.vue    | 102 ++++++
 .../ContactsCard/story/ContactsCard.story.vue |  67 ++++
 .../Contacts/ContactsCard/story/fixtures.js   | 149 +++++++++
 .../Contacts/ContactsForm/ContactsForm.vue    | 297 ++++++++++++++++++
 .../ContactsForm/story/ContactsForm.story.vue |  80 +++++
 .../Contacts/ContactsForm/story/fixtures.js   |  20 ++
 .../dashboard/i18n/locale/en/contact.json     |  56 ++++
 7 files changed, 771 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
 create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
new file mode 100644
index 000000000..4ba3546ce
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  email: { type: String, default: '' },
+  additionalAttributes: { type: Object, default: () => ({}) },
+  phoneNumber: { type: String, default: '' },
+  thumbnail: { type: String, default: '' },
+  isExpanded: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
+
+const { t } = useI18n();
+
+const handleFormUpdate = updatedData => {
+  emit('updateContact', { id: props.id, updatedData });
+};
+
+const onClickViewDetails = async () => {
+  emit('showContact', props.id);
+};
+</script>
+
+<template>
+  <CardLayout :key="id" layout="row">
+    <div class="flex items-center justify-between gap-4">
+      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
+      <div class="flex flex-col gap-1">
+        <div class="flex items-center gap-2">
+          <span class="text-sm font-medium truncate text-n-slate-12">
+            {{ name }}
+          </span>
+          <template v-if="additionalAttributes?.companyName">
+            <span class="text-sm text-n-slate-11">
+              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
+            </span>
+            <span class="text-sm font-medium truncate text-n-slate-12">
+              {{ additionalAttributes.companyName }}
+            </span>
+          </template>
+        </div>
+        <div class="flex items-center gap-3">
+          <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
+          <div v-if="email" class="w-px h-3 bg-n-slate-6" />
+          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
+            {{ phoneNumber }}
+          </span>
+          <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
+            variant="link"
+            size="xs"
+            @click="onClickViewDetails"
+          />
+        </div>
+      </div>
+    </div>
+
+    <Button
+      icon="i-lucide-chevron-down"
+      variant="ghost"
+      color="slate"
+      size="xs"
+      :class="{ 'rotate-180': isExpanded }"
+      @click="emit('toggle')"
+    />
+
+    <template #after>
+      <transition
+        enter-active-class="overflow-hidden transition-all duration-300 ease-out"
+        leave-active-class="overflow-hidden transition-all duration-300 ease-in"
+        enter-from-class="overflow-hidden opacity-0 max-h-0"
+        enter-to-class="opacity-100 max-h-[360px]"
+        leave-from-class="opacity-100 max-h-[360px]"
+        leave-to-class="overflow-hidden opacity-0 max-h-0"
+      >
+        <div v-show="isExpanded" class="w-full">
+          <div class="p-6 border-t border-n-strong">
+            <ContactsForm
+              :contact-data="{
+                id,
+                name,
+                email,
+                phoneNumber,
+                additionalAttributes,
+              }"
+              @update="handleFormUpdate"
+            />
+          </div>
+        </div>
+      </transition>
+    </template>
+  </CardLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
new file mode 100644
index 000000000..3f8d5a411
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/ContactsCard.story.vue
@@ -0,0 +1,67 @@
+<script setup>
+import { ref } from 'vue';
+
+import ContactsCard from '../ContactsCard.vue';
+import contacts from './fixtures';
+
+const expandedCardId = ref(null);
+
+const toggleExpanded = id => {
+  expandedCardId.value = expandedCardId.value === id ? null : id;
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactsCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default with expandable function">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="contacts[0]"
+          :is-expanded="expandedCardId === contacts[0].id"
+          @toggle="toggleExpanded(contacts[0].id)"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Company Name and without phone number">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="{ ...contacts[1], phoneNumber: '' }"
+          :is-expanded="false"
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Expanded State">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="contacts[2]"
+          is-expanded
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Without Email and Phone">
+      <div class="flex flex-col p-4">
+        <ContactsCard
+          v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
+          :is-expanded="false"
+          @toggle="() => {}"
+          @update-contact="() => {}"
+          @show-contact="() => {}"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
new file mode 100644
index 000000000..67bdba9b4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/story/fixtures.js
@@ -0,0 +1,149 @@
+export default [
+  {
+    additionalAttributes: {
+      socialProfiles: {},
+    },
+    availabilityStatus: null,
+    email: 'johndoe@chatwoot.com',
+    id: 370,
+    name: 'John Doe',
+    phoneNumber: '+918634322418',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
+    customAttributes: {},
+    lastActivityAt: 1731608270,
+    createdAt: 1731586271,
+  },
+  {
+    additionalAttributes: {
+      city: 'kerala',
+      country: 'India',
+      description: 'Curious about the web. ',
+      companyName: 'Chatwoot',
+      countryCode: '',
+      socialProfiles: {
+        github: 'abozler',
+        twitter: 'ozler',
+        facebook: 'abozler',
+        linkedin: 'abozler',
+        instagram: 'ozler',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ozler@chatwoot.com',
+    id: 29,
+    name: 'Abraham Ozlers',
+    phoneNumber: '+246232222222',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
+    customAttributes: {
+      dateContact: '2024-02-01T00:00:00.000Z',
+      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
+      listContact: 'Not spam',
+      numberContact: '12',
+    },
+    lastActivityAt: 1712127410,
+    createdAt: 1712127389,
+  },
+  {
+    additionalAttributes: {
+      city: 'Kerala',
+      country: 'India',
+      description:
+        "I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
+      companyName: 'Chatwoot',
+      countryCode: 'IN',
+      socialProfiles: {
+        github: 'cmathersonj',
+        twitter: 'cmather',
+        facebook: 'cmathersonj',
+        linkedin: 'cmathersonj',
+        instagram: 'cmathersonjs',
+      },
+    },
+    availabilityStatus: null,
+    email: 'cmathersonj@va.test',
+    id: 22,
+    name: 'Candice Matherson',
+    phoneNumber: '+917474774742',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
+    customAttributes: {
+      dateContact: '2024-11-12T03:23:06.963Z',
+      linkContact: 'https://sd.sd',
+      textContact: 'hey',
+      numberContact: '12',
+      checkboxContact: true,
+    },
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: '',
+      country: '',
+      description: '',
+      companyName: '',
+      countryCode: '',
+      socialProfiles: {
+        github: '',
+        twitter: '',
+        facebook: '',
+        linkedin: '',
+        instagram: '',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ofolkardi@taobao.test',
+    id: 21,
+    name: 'Ophelia Folkard',
+    phoneNumber: '',
+    identifier: null,
+    thumbnail:
+      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
+    customAttributes: {},
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      socialProfiles: {},
+    },
+    availabilityStatus: null,
+    email: 'wcasteloth@exblog.jp',
+    id: 20,
+    name: 'Willy Castelot',
+    phoneNumber: '+919384',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
+    customAttributes: {},
+    lastActivityAt: 1712123233,
+    createdAt: 1712123233,
+  },
+  {
+    additionalAttributes: {
+      city: '',
+      country: '',
+      description: '',
+      companyName: '',
+      countryCode: '',
+      socialProfiles: {
+        github: '',
+        twitter: '',
+        facebook: '',
+        linkedin: '',
+        instagram: '',
+      },
+    },
+    availabilityStatus: null,
+    email: 'ederingtong@printfriendly.test',
+    id: 19,
+    name: 'Elisabeth Derington',
+    phoneNumber: '',
+    identifier: null,
+    thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
+    customAttributes: {},
+    lastActivityAt: 1712123232,
+    createdAt: 1712123232,
+  },
+];
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
new file mode 100644
index 000000000..866811ae2
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue
@@ -0,0 +1,297 @@
+<script setup>
+import { computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { required, email, minLength } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+import countries from 'shared/constants/countries.js';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
+
+const props = defineProps({
+  contactData: {
+    type: Object,
+    default: null,
+  },
+  isDetailsView: {
+    type: Boolean,
+    default: false,
+  },
+  isNewContact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const { t } = useI18n();
+
+const FORM_CONFIG = {
+  FIRST_NAME: { field: 'firstName' },
+  LAST_NAME: { field: 'lastName' },
+  EMAIL_ADDRESS: { field: 'email' },
+  PHONE_NUMBER: { field: 'phoneNumber' },
+  CITY: { field: 'additionalAttributes.city' },
+  COUNTRY: { field: 'additionalAttributes.country' },
+  BIO: { field: 'additionalAttributes.description' },
+  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
+};
+
+const SOCIAL_CONFIG = {
+  FACEBOOK: 'i-ri-facebook-circle-fill',
+  GITHUB: 'i-ri-github-fill',
+  INSTAGRAM: 'i-ri-instagram-line',
+  LINKEDIN: 'i-ri-linkedin-box-fill',
+  TWITTER: 'i-ri-twitter-x-fill',
+};
+
+const defaultState = {
+  id: 0,
+  name: '',
+  email: '',
+  firstName: '',
+  lastName: '',
+  phoneNumber: '',
+  additionalAttributes: {
+    description: '',
+    companyName: '',
+    countryCode: '',
+    country: '',
+    city: '',
+    socialProfiles: {
+      facebook: '',
+      github: '',
+      instagram: '',
+      linkedin: '',
+      twitter: '',
+    },
+  },
+};
+
+const state = reactive({ ...defaultState });
+
+const validationRules = {
+  firstName: { required, minLength: minLength(2) },
+  email: { email },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const prepareStateBasedOnProps = () => {
+  if (props.isNewContact) {
+    return; // Added to prevent state update for new contact form
+  }
+
+  const {
+    id,
+    name = '',
+    email: emailAddress,
+    phoneNumber,
+    additionalAttributes = {},
+  } = props.contactData || {};
+
+  const [firstName = '', lastName = ''] = name.split(' ');
+  const {
+    description,
+    companyName,
+    countryCode,
+    country,
+    city,
+    socialProfiles = {},
+  } = additionalAttributes || {};
+
+  Object.assign(state, {
+    id,
+    name,
+    firstName,
+    lastName,
+    email: emailAddress,
+    phoneNumber,
+    additionalAttributes: {
+      description,
+      companyName,
+      countryCode,
+      country,
+      city,
+      socialProfiles,
+    },
+  });
+};
+
+const countryOptions = computed(() =>
+  countries.map(({ name }) => ({ label: name, value: name }))
+);
+
+const editDetailsForm = computed(() =>
+  Object.keys(FORM_CONFIG).map(key => ({
+    key,
+    placeholder: t(
+      `CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.${key}.PLACEHOLDER`
+    ),
+  }))
+);
+
+const socialProfilesForm = computed(() =>
+  Object.entries(SOCIAL_CONFIG).map(([key, icon]) => ({
+    key,
+    placeholder: t(`CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.FORM.${key}.PLACEHOLDER`),
+    icon,
+  }))
+);
+
+const isValidationField = key => {
+  const field = FORM_CONFIG[key]?.field;
+  return ['firstName', 'email'].includes(field);
+};
+
+const getValidationKey = key => {
+  return FORM_CONFIG[key]?.field;
+};
+
+// Creates a computed property for two-way form field binding
+const getFormBinding = key => {
+  const field = FORM_CONFIG[key]?.field;
+  if (!field) return null;
+
+  return computed({
+    get: () => {
+      // Handle firstName/lastName fields
+      if (field === 'firstName' || field === 'lastName') {
+        return state[field]?.toString() || '';
+      }
+
+      // Handle nested vs non-nested fields
+      const [base, nested] = field.split('.');
+      // Example: 'email' → state.email
+      // Example: 'additionalAttributes.city' → state.additionalAttributes.city
+      return (nested ? state[base][nested] : state[base])?.toString() || '';
+    },
+
+    set: async value => {
+      // Handle name fields specially to maintain the combined 'name' field
+      if (field === 'firstName' || field === 'lastName') {
+        state[field] = value;
+        // Example: firstName="John", lastName="Doe" → name="John Doe"
+        state.name = `${state.firstName} ${state.lastName}`.trim();
+      } else {
+        // Handle nested vs non-nested fields
+        const [base, nested] = field.split('.');
+        if (nested) {
+          // Example: additionalAttributes.city = "New York"
+          state[base][nested] = value;
+        } else {
+          // Example: email = "test@example.com"
+          state[base] = value;
+        }
+      }
+
+      const isFormValid = await v$.value.$validate();
+      if (isFormValid) {
+        const { firstName, lastName, ...stateWithoutNames } = state;
+        emit('update', stateWithoutNames);
+      }
+    },
+  });
+};
+
+const getMessageType = key => {
+  return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
+    ? 'error'
+    : 'info';
+};
+
+watch(() => props.contactData, prepareStateBasedOnProps, {
+  immediate: true,
+  deep: true,
+});
+
+// Expose state to parent component for avatar upload
+defineExpose({
+  state,
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="flex flex-col items-start gap-2">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
+      </span>
+      <div class="grid w-full grid-cols-2 gap-4">
+        <template v-for="item in editDetailsForm" :key="item.key">
+          <ComboBox
+            v-if="item.key === 'COUNTRY'"
+            v-model="state.additionalAttributes.country"
+            :options="countryOptions"
+            :placeholder="item.placeholder"
+            class="[&>div>button]:h-8"
+            :class="{
+              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
+                !isDetailsView,
+              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
+                isDetailsView,
+            }"
+            @update:model-value="emit('update', state)"
+          />
+          <PhoneNumberInput
+            v-else-if="item.key === 'PHONE_NUMBER'"
+            v-model="getFormBinding(item.key).value"
+            :placeholder="item.placeholder"
+            :show-border="isDetailsView"
+          />
+          <Input
+            v-else
+            v-model="getFormBinding(item.key).value"
+            :placeholder="item.placeholder"
+            :message-type="getMessageType(item.key)"
+            :custom-input-class="`h-8 !pt-1 !pb-1 ${
+              !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
+            }`"
+            class="w-full"
+            @input="
+              isValidationField(item.key) &&
+                v$[getValidationKey(item.key)].$touch()
+            "
+            @blur="
+              isValidationField(item.key) &&
+                v$[getValidationKey(item.key)].$touch()
+            "
+          />
+        </template>
+      </div>
+    </div>
+    <div class="flex flex-col items-start gap-2">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.TITLE') }}
+      </span>
+      <div class="flex flex-wrap gap-2">
+        <div
+          v-for="item in socialProfilesForm"
+          :key="item.key"
+          class="flex items-center h-8 gap-2 px-2 rounded-lg"
+          :class="{
+            'bg-n-alpha-2 dark:bg-n-solid-2': isDetailsView,
+            'bg-n-alpha-2 dark:bg-n-solid-3': !isDetailsView,
+          }"
+        >
+          <Icon
+            :icon="item.icon"
+            class="flex-shrink-0 text-n-slate-11 size-4"
+          />
+          <input
+            v-model="
+              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
+            "
+            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
+            :placeholder="item.placeholder"
+            :size="item.placeholder.length"
+            @input="emit('update', state)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
new file mode 100644
index 000000000..4be69380c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/ContactsForm.story.vue
@@ -0,0 +1,80 @@
+<script setup>
+import ContactsForm from '../ContactsForm.vue';
+import contactData from './fixtures';
+
+const handleUpdate = updatedData => {
+  console.log('Form updated:', updatedData);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Contacts/ContactsForm"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default without border">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm :contact-data="contactData" @update="handleUpdate" />
+      </div>
+    </Variant>
+
+    <Variant title="Details View with border">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="contactData"
+          is-details-view
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Minimal Data">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="{
+            id: 21,
+            name: 'Ophelia Folkard',
+            email: 'ofolkardi@taobao.test',
+            phoneNumber: '',
+            additionalAttributes: {
+              city: '',
+              country: '',
+              description: '',
+              companyName: '',
+              countryCode: '',
+              socialProfiles: {
+                github: '',
+                twitter: '',
+                facebook: '',
+                linkedin: '',
+                instagram: '',
+              },
+            },
+          }"
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With All Social Profiles">
+      <div class="p-6 border rounded-lg border-n-strong">
+        <ContactsForm
+          :contact-data="{
+            ...contactData,
+            additionalAttributes: {
+              ...contactData.additionalAttributes,
+              socialProfiles: {
+                github: 'cmathersonj',
+                twitter: 'cmather',
+                facebook: 'cmathersonj',
+                linkedin: 'cmathersonj',
+                instagram: 'cmathersonjs',
+              },
+            },
+          }"
+          @update="handleUpdate"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
new file mode 100644
index 000000000..30eb6ee22
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/story/fixtures.js
@@ -0,0 +1,20 @@
+export default {
+  id: 370,
+  name: 'John Doe',
+  email: 'johndoe@chatwoot.com',
+  phoneNumber: '+918634322418',
+  additionalAttributes: {
+    city: 'Kerala',
+    country: 'India',
+    description: 'Curious about the web.',
+    companyName: 'Chatwoot',
+    countryCode: 'IN',
+    socialProfiles: {
+      github: 'johndoe',
+      twitter: 'johndoe',
+      facebook: 'johndoe',
+      linkedin: 'johndoe',
+      instagram: 'johndoe',
+    },
+  },
+};
diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json
index 54a06bb53..e0483d224 100644
--- a/app/javascript/dashboard/i18n/locale/en/contact.json
+++ b/app/javascript/dashboard/i18n/locale/en/contact.json
@@ -385,5 +385,61 @@
     "DROPDOWN_ITEM": {
       "ID": "(ID: {identifier})"
     }
+  },
+
+  "CONTACTS_LAYOUT": {
+    "CARD": {
+      "OF": "of",
+      "VIEW_DETAILS": "View details",
+      "EDIT_DETAILS_FORM": {
+        "TITLE": "Edit contact details",
+        "FORM": {
+          "FIRST_NAME": {
+            "PLACEHOLDER": "Enter the first name"
+          },
+          "LAST_NAME": {
+            "PLACEHOLDER": "Enter the last name"
+          },
+          "EMAIL_ADDRESS": {
+            "PLACEHOLDER": "Enter the email address"
+          },
+          "PHONE_NUMBER": {
+            "PLACEHOLDER": "Enter the phone number"
+          },
+          "CITY": {
+            "PLACEHOLDER": "Enter the city name"
+          },
+          "COUNTRY": {
+            "PLACEHOLDER": "Select country"
+          },
+          "BIO": {
+            "PLACEHOLDER": "Enter the bio"
+          },
+          "COMPANY_NAME": {
+            "PLACEHOLDER": "Enter the company name"
+          }
+        }
+      },
+      "SOCIAL_MEDIA": {
+        "TITLE": "Edit social links",
+        "FORM": {
+          "FACEBOOK": {
+            "PLACEHOLDER": "Add Facebook"
+          },
+          "GITHUB": {
+            "PLACEHOLDER": "Add Github"
+          },
+          "INSTAGRAM": {
+            "PLACEHOLDER": "Add Instagram"
+          },
+          "LINKEDIN": {
+            "PLACEHOLDER": "Add LinkedIn"
+          },
+          "TWITTER": {
+            "PLACEHOLDER": "Add Twitter"
+          }
+        }
+      }
+    }
   }
 }