From 4664402bf34052a63b3323016be3490c895faba2 Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Wed, 21 May 2025 10:05:14 +0530 Subject: [PATCH] feat: Delete a contact from the contacts page (#11529) # Pull Request Template ## Description **This PR includes:** 1. Adds the ability to delete a contact from the contacts list accordion section. 2. Improves the expand/collapse transition for the accordion. Fixes [CW-4375](https://linear.app/chatwoot/issue/CW-4375/allow-users-to-delete-a-contact-from-the-contacts-page) ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Loom video https://www.loom.com/share/8c897d24737f40f6b8b29fef76ba18e2?sid=70910b9d-f3db-4d54-8bfc-820db680e537 ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Pranav --- .../ContactsCard/ContactDeleteSection.vue | 65 +++++++++++++++++++ .../Contacts/ContactsCard/ContactsCard.vue | 25 ++++--- .../ConfirmContactDeleteDialog.vue | 6 +- .../components-next/button/Button.vue | 2 +- .../dashboard/i18n/locale/en/contact.json | 6 +- 5 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue new file mode 100644 index 000000000..47b779b61 --- /dev/null +++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue @@ -0,0 +1,65 @@ + + + diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue index a3b0bf37c..b2b0dbfa0 100644 --- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue +++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue @@ -7,6 +7,7 @@ import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/Contac import Button from 'dashboard/components-next/button/Button.vue'; import Avatar from 'dashboard/components-next/avatar/Avatar.vue'; import Flag from 'dashboard/components-next/flag/Flag.vue'; +import ContactDeleteSection from 'dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue'; import countries from 'shared/constants/countries'; const props = defineProps({ @@ -149,15 +150,15 @@ const onClickViewDetails = () => emit('showContact', props.id); /> diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue index d9c0deb1b..f43a50883 100644 --- a/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue +++ b/app/javascript/dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue @@ -47,11 +47,7 @@ defineExpose({ dialogRef }); ref="dialogRef" type="alert" :title="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.TITLE')" - :description=" - t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION', { - contactName: props.selectedContact.name, - }) - " + :description="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.DESCRIPTION')" :confirm-button-label="t('CONTACTS_LAYOUT.DETAILS.DELETE_DIALOG.CONFIRM')" @confirm="handleDialogConfirm" /> diff --git a/app/javascript/dashboard/components-next/button/Button.vue b/app/javascript/dashboard/components-next/button/Button.vue index c54bd395a..dde1d3d9a 100644 --- a/app/javascript/dashboard/components-next/button/Button.vue +++ b/app/javascript/dashboard/components-next/button/Button.vue @@ -117,7 +117,7 @@ const STYLE_CONFIG = { 'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 focus-visible:bg-n-ruby-9/10 outline-n-ruby-8', ghost: 'text-n-ruby-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent', - link: 'text-n-ruby-9 hover:enabled:underline focus-visible:underline outline-transparent', + link: 'text-n-ruby-9 dark:text-n-ruby-11 hover:enabled:underline focus-visible:underline outline-transparent', }, amber: { solid: diff --git a/app/javascript/dashboard/i18n/locale/en/contact.json b/app/javascript/dashboard/i18n/locale/en/contact.json index fc4509809..4c599ffe8 100644 --- a/app/javascript/dashboard/i18n/locale/en/contact.json +++ b/app/javascript/dashboard/i18n/locale/en/contact.json @@ -458,6 +458,10 @@ "PLACEHOLDER": "Add Twitter" } } + }, + "DELETE_CONTACT": { + "MESSAGE": "This action is permanent and irreversible.", + "BUTTON": "Delete now" } }, "DETAILS": { @@ -467,7 +471,7 @@ "DELETE_CONTACT": "Delete contact", "DELETE_DIALOG": { "TITLE": "Confirm Deletion", - "DESCRIPTION": "Are you sure you want to delete this {contactName} contact?", + "DESCRIPTION": "Are you sure you want to delete this contact?", "CONFIRM": "Yes, Delete", "API": { "SUCCESS_MESSAGE": "Contact deleted successfully",