From 579efd933b80394d4d28ffe00e5c507f548fad2e Mon Sep 17 00:00:00 2001 From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Date: Thu, 31 Oct 2024 11:57:13 +0530 Subject: [PATCH] feat(v4): Update the campaigns page design (#10371) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Screenshot 2024-10-30 at 8 58 12โ€ฏPM Fixes https://linear.app/chatwoot/project/campaign-redesign-f82bede26ca7/overview --------- Co-authored-by: Pranav Co-authored-by: Shivam Mishra --- .../Campaigns/CampaignCard/CampaignCard.vue | 141 +++++++ .../CampaignCard/LiveChatCampaignDetails.vue | 54 +++ .../CampaignCard/SMSCampaignDetails.vue | 41 ++ .../Campaigns/CampaignLayout.vue | 52 +++ .../EmptyState/CampaignEmptyStateContent.js | 212 ++++++++++ .../EmptyState/LiveChatCampaignEmptyState.vue | 39 ++ .../EmptyState/SMSCampaignEmptyState.vue | 38 ++ .../Pages/CampaignPage/CampaignList.vue | 39 ++ .../ConfirmDeleteCampaignDialog.vue | 49 +++ .../EditLiveChatCampaignDialog.vue | 76 ++++ .../LiveChatCampaignDialog.vue | 54 +++ .../LiveChatCampaign/LiveChatCampaignForm.vue | 323 +++++++++++++++ .../SMSCampaign/SMSCampaignDialog.vue | 49 +++ .../SMSCampaign/SMSCampaignForm.vue | 189 +++++++++ .../dashboard/components-next/CardLayout.vue | 9 +- .../components-next/Editor/Editor.vue | 173 ++++++++ .../components-next/EmptyStateLayout.vue | 2 +- .../EmptyState/Article/ArticleEmptyState.vue | 2 +- .../Category/CategoryEmptyState.vue | 2 +- .../EmptyState/Portal/PortalEmptyState.vue | 2 +- .../HelpCenter/HelpCenterLayout.vue | 2 +- .../Pages/CategoryPage/CategoryForm.vue | 17 +- .../components-next/button/Button.vue | 6 +- .../components-next/combobox/ComboBox.vue | 80 ++-- .../combobox/ComboBoxDropdown.vue | 107 +++++ .../combobox/TagMultiSelectComboBox.vue | 183 ++++++++ .../TagMultiSelectComboxBox.story.vue | 55 +++ .../components-next/dialog/Dialog.vue | 7 +- .../dashboard/components-next/input/Input.vue | 9 +- .../components-next/sidebar/Sidebar.vue | 19 +- .../components-next/textarea/TextArea.vue | 50 ++- .../components-next/thumbnail/Thumbnail.vue | 2 +- .../layout/config/sidebarItems/campaigns.js | 14 +- .../layout/config/sidebarItems/primaryMenu.js | 2 +- .../components/widgets/WootWriter/Editor.vue | 18 +- app/javascript/dashboard/helper/inbox.js | 37 +- .../dashboard/helper/specs/inbox.spec.js | 75 +++- .../dashboard/i18n/locale/en/campaign.json | 250 ++++++----- .../dashboard/i18n/locale/en/settings.json | 2 + .../dashboard/campaigns/campaigns.routes.js | 60 +++ .../pages/CampaignsPageRouteView.vue | 28 ++ .../campaigns/pages/LiveChatCampaignsPage.vue | 88 ++++ .../campaigns/pages/SMSCampaignsPage.vue | 75 ++++ .../conversation/contact/ConversationForm.vue | 3 +- .../routes/dashboard/dashboard.routes.js | 2 + .../settings/campaigns/AddCampaign.vue | 389 ------------------ .../dashboard/settings/campaigns/Campaign.vue | 106 ----- .../settings/campaigns/CampaignCard.vue | 115 ------ .../settings/campaigns/CampaignsTable.vue | 80 ---- .../settings/campaigns/EditCampaign.vue | 304 -------------- .../dashboard/settings/campaigns/Index.vue | 55 --- .../settings/campaigns/campaigns.routes.js | 50 --- .../dashboard/settings/settings.routes.js | 2 - .../dashboard/store/modules/campaigns.js | 6 +- .../dashboard/store/modules/inboxes.js | 2 +- .../modules/specs/campaigns/getters.spec.js | 32 +- .../composables/specs/useCampaign.spec.js | 47 --- .../shared/composables/useCampaign.js | 43 -- app/javascript/shared/mixins/inboxMixin.js | 13 +- 59 files changed, 2523 insertions(+), 1458 deletions(-) create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js create mode 100644 app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue create mode 100644 app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue create mode 100644 app/javascript/dashboard/components-next/Editor/Editor.vue create mode 100644 app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue create mode 100644 app/javascript/dashboard/components-next/combobox/TagMultiSelectComboBox.vue create mode 100644 app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/campaigns.routes.js create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/pages/CampaignsPageRouteView.vue create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/pages/LiveChatCampaignsPage.vue create mode 100644 app/javascript/dashboard/routes/dashboard/campaigns/pages/SMSCampaignsPage.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignCard.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/CampaignsTable.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/campaigns/campaigns.routes.js delete mode 100644 app/javascript/shared/composables/specs/useCampaign.spec.js delete mode 100644 app/javascript/shared/composables/useCampaign.js diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue new file mode 100644 index 000000000..dbdbb5b45 --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue @@ -0,0 +1,141 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue new file mode 100644 index 000000000..6f8c548d4 --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/LiveChatCampaignDetails.vue @@ -0,0 +1,54 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue new file mode 100644 index 000000000..0c54c43eb --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/SMSCampaignDetails.vue @@ -0,0 +1,41 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue new file mode 100644 index 000000000..11006bfe3 --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/CampaignLayout.vue @@ -0,0 +1,52 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js b/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js new file mode 100644 index 000000000..4f409196f --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js @@ -0,0 +1,212 @@ +export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [ + { + id: 1, + title: 'Chatbot Assistance', + inbox: { + id: 2, + name: 'PaperLayer Website', + channel_type: 'Channel::WebWidget', + phone_number: '', + }, + sender: { + id: 1, + name: 'Alexa Rivera', + }, + message: 'Hello! ๐Ÿ‘‹ Need help with our chatbot features? Feel free to ask!', + campaign_status: 'active', + enabled: true, + campaign_type: 'ongoing', + trigger_rules: { + url: 'https://www.chatwoot.com/features/chatbot/', + time_on_page: 10, + }, + trigger_only_during_business_hours: true, + created_at: '2024-10-24T13:10:26.636Z', + updated_at: '2024-10-24T13:10:26.636Z', + }, + { + id: 2, + title: 'Pricing Information Support', + inbox: { + id: 2, + name: 'PaperLayer Website', + channel_type: 'Channel::WebWidget', + phone_number: '', + }, + sender: { + id: 1, + name: 'Jamie Lee', + }, + message: 'Hello! ๐Ÿ‘‹ Any questions on pricing? Iโ€™m here to help!', + campaign_status: 'active', + enabled: false, + campaign_type: 'ongoing', + trigger_rules: { + url: 'https://www.chatwoot.com/pricings', + time_on_page: 10, + }, + trigger_only_during_business_hours: false, + created_at: '2024-10-24T13:11:08.763Z', + updated_at: '2024-10-24T13:11:08.763Z', + }, + { + id: 3, + title: 'Product Setup Assistance', + inbox: { + id: 2, + name: 'PaperLayer Website', + channel_type: 'Channel::WebWidget', + phone_number: '', + }, + sender: { + id: 1, + name: 'Chatwoot', + }, + message: 'Hi! Chatwoot here. Need help setting up? Let me know!', + campaign_status: 'active', + enabled: false, + campaign_type: 'ongoing', + trigger_rules: { + url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/', + time_on_page: 10, + }, + trigger_only_during_business_hours: false, + created_at: '2024-10-24T13:11:44.285Z', + updated_at: '2024-10-24T13:11:44.285Z', + }, + { + id: 4, + title: 'General Assistance Campaign', + inbox: { + id: 2, + name: 'PaperLayer Website', + channel_type: 'Channel::WebWidget', + phone_number: '', + }, + sender: { + id: 1, + name: 'Chris Barlow', + }, + message: + 'Hi there! ๐Ÿ‘‹ Iโ€™m here for any questions you may have. Letโ€™s chat!', + campaign_status: 'active', + enabled: true, + campaign_type: 'ongoing', + trigger_rules: { + url: 'https://siv.com', + time_on_page: 200, + }, + trigger_only_during_business_hours: false, + created_at: '2024-10-29T19:54:33.741Z', + updated_at: '2024-10-29T19:56:26.296Z', + }, +]; + +export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [ + { + id: 1, + title: 'Customer Feedback Request', + inbox: { + id: 6, + name: 'PaperLayer Mobile', + channel_type: 'Channel::Sms', + phone_number: '+29818373149903', + provider: 'default', + }, + message: + 'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review', + campaign_status: 'active', + enabled: true, + campaign_type: 'one_off', + scheduled_at: 1729775588, + audience: [ + { id: 4, type: 'Label' }, + { id: 5, type: 'Label' }, + { id: 6, type: 'Label' }, + ], + trigger_rules: {}, + trigger_only_during_business_hours: false, + created_at: '2024-10-24T13:13:08.496Z', + updated_at: '2024-10-24T13:15:38.698Z', + }, + { + id: 2, + title: 'Welcome New Customer', + inbox: { + id: 6, + name: 'PaperLayer Mobile', + channel_type: 'Channel::Sms', + phone_number: '+29818373149903', + provider: 'default', + }, + message: 'Welcome aboard! ๐ŸŽ‰ Let us know if you have any questions.', + campaign_status: 'completed', + enabled: true, + campaign_type: 'one_off', + scheduled_at: 1729732500, + audience: [ + { id: 1, type: 'Label' }, + { id: 6, type: 'Label' }, + { id: 5, type: 'Label' }, + { id: 2, type: 'Label' }, + { id: 4, type: 'Label' }, + ], + trigger_rules: {}, + trigger_only_during_business_hours: false, + created_at: '2024-10-24T13:14:00.168Z', + updated_at: '2024-10-24T13:15:38.707Z', + }, + { + id: 3, + title: 'New Business Welcome', + inbox: { + id: 6, + name: 'PaperLayer Mobile', + channel_type: 'Channel::Sms', + phone_number: '+29818373149903', + provider: 'default', + }, + message: 'Hello! Weโ€™re excited to have your business with us!', + campaign_status: 'active', + enabled: true, + campaign_type: 'one_off', + scheduled_at: 1730368440, + audience: [ + { id: 1, type: 'Label' }, + { id: 3, type: 'Label' }, + { id: 6, type: 'Label' }, + { id: 4, type: 'Label' }, + { id: 2, type: 'Label' }, + { id: 5, type: 'Label' }, + ], + trigger_rules: {}, + trigger_only_during_business_hours: false, + created_at: '2024-10-30T07:54:49.915Z', + updated_at: '2024-10-30T07:54:49.915Z', + }, + { + id: 4, + title: 'New Member Onboarding', + inbox: { + id: 6, + name: 'PaperLayer Mobile', + channel_type: 'Channel::Sms', + phone_number: '+29818373149903', + provider: 'default', + }, + message: 'Welcome to the team! Reach out if you have questions.', + campaign_status: 'completed', + enabled: true, + campaign_type: 'one_off', + scheduled_at: 1730304840, + audience: [ + { id: 1, type: 'Label' }, + { id: 3, type: 'Label' }, + { id: 6, type: 'Label' }, + ], + trigger_rules: {}, + trigger_only_during_business_hours: false, + created_at: '2024-10-29T16:14:10.374Z', + updated_at: '2024-10-30T16:15:03.157Z', + }, +]; diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue new file mode 100644 index 000000000..4461a7da7 --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/LiveChatCampaignEmptyState.vue @@ -0,0 +1,39 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue new file mode 100644 index 000000000..d0ed60abe --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/EmptyState/SMSCampaignEmptyState.vue @@ -0,0 +1,38 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue new file mode 100644 index 000000000..80e7437a6 --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue @@ -0,0 +1,39 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue new file mode 100644 index 000000000..f55c88e46 --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/ConfirmDeleteCampaignDialog.vue @@ -0,0 +1,49 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue new file mode 100644 index 000000000..458ee1f1c --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/EditLiveChatCampaignDialog.vue @@ -0,0 +1,76 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue new file mode 100644 index 000000000..2c4b9848c --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue @@ -0,0 +1,54 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue new file mode 100644 index 000000000..1a9bc8cdf --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue @@ -0,0 +1,323 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue new file mode 100644 index 000000000..b190b031b --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue @@ -0,0 +1,49 @@ + + + diff --git a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue new file mode 100644 index 000000000..653e58a9a --- /dev/null +++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue @@ -0,0 +1,189 @@ + + +