diff --git a/.codeclimate.yml b/.codeclimate.yml index 974681a09..d8b8d985b 100644 --- a/.codeclimate.yml +++ b/.codeclimate.yml @@ -54,3 +54,5 @@ exclude_patterns: - 'app/javascript/widget/i18n/index.js' - 'app/javascript/survey/i18n/index.js' - 'app/javascript/shared/constants/locales.js' + - 'app/javascript/dashboard/helper/specs/macrosFixtures.js' + - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js' diff --git a/.env.example b/.env.example index 12262576e..62b08a7b1 100644 --- a/.env.example +++ b/.env.example @@ -34,6 +34,11 @@ REDIS_SENTINELS= # You can find list of master using "SENTINEL masters" command REDIS_SENTINEL_MASTER_NAME= +# By default Chatwoot will pass REDIS_PASSWORD as the password value for sentinels +# Use the following environment variable to customize passwords for sentinels. +# Use empty string if sentinels are configured with out passwords +# REDIS_SENTINEL_PASSWORD= + # Redis premium breakage in heroku fix # enable the following configuration # ref: https://github.com/chatwoot/chatwoot/issues/2420 @@ -51,7 +56,7 @@ RAILS_MAX_THREADS=5 # The email from which all outgoing emails are sent # could user either `email@yourdomain.com` or `BrandName ` -MAILER_SENDER_EMAIL="Chatwoot " +MAILER_SENDER_EMAIL=Chatwoot #SMTP domain key is set up for HELO checking SMTP_DOMAIN=chatwoot.com diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index d9409af96..26b053b5f 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -6,6 +6,7 @@ labels: 'Bug' assignees: '' --- + **Describe the bug** A clear and concise description of what the bug is. @@ -16,11 +17,11 @@ Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' -4. See error +4. See the error **Expected behavior** -A clear and concise description of what you expected to happen. +Share a clear and concise description of what you expected to happen. **Screenshots** @@ -28,27 +29,50 @@ If applicable, add screenshots to help explain your problem. **Browser logs** -Share the browser logs to debug the issue further +Share the browser logs to debug the issue further. **Server logs** -Share the server logs to debug the issue further +Share the server logs to debug the issue further. **Environment** -Describe whether you are using Chatwoot Cloud (app.chatwoot.com) or a self hosted installation of Chatwoot. If you are using a self hosted installation of Chatwoot describe the type of deployment (Docker/Linux VM installation/Heroku) +Describe whether you are using Chatwoot Cloud (app.chatwoot.com) or a self-hosted installation of Chatwoot. If you are using a self-hosted installation of Chatwoot, describe the type of deployment (Docker/Linux VM installation/Heroku/Kubernetes/Other). -**Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] +- [ ] app.chatwoot.com (Chatwoot Cloud) +- [ ] Self-hosted +- - [ ] Linux VM +- - [ ] Docker +- - [ ] Kubernetes +- - [ ] Heroku +- - [ ] Other (Please specify) + + +**Desktop (please complete the following information)** (If applicable) + - OS: [e.g. Linux, Windows, MacOS] + - Browser [e.g. chrome, firefox, safari] - Version [e.g. 22] -**Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] +**Smartphone (please complete the following information)** (If applicable) + - Device: [e.g. iPhone6, Pixel7] - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] + - Browser [e.g. stock browser, firefox, safari] - Version [e.g. 22] +**Docker** (If applicable) + +Please share the output of the following. +- `docker version` +- `docker info` +- `docker-compose version` + +**Cloud Provider** (If applicable) +- [ ] AWS +- [ ] GCP +- [ ] Azure +- [ ] DigitalOcean +- [ ] Others + **Additional context** Add any other context about the problem here. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 4ce1b084c..cd4d83b38 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -2,8 +2,7 @@ ## Description -Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. - +Please include a summary of the change and issue(s) fixed. Also, mention relevant motivation, context, and any dependencies that this change requires. Fixes # (issue) ## Type of change @@ -12,18 +11,18 @@ Please delete options that are not relevant. - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) -- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) +- [ ] Breaking change (fix or feature that would cause existing functionality not to work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? -Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration +Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. ## Checklist: - [ ] My code follows the style guidelines of this project -- [ ] I have performed a self-review of my own code +- [ ] 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 - [ ] My changes generate no new warnings diff --git a/.gitignore b/.gitignore index 11a8c50e3..fc77a7b55 100644 --- a/.gitignore +++ b/.gitignore @@ -60,3 +60,5 @@ test/cypress/videos/* /config/master.key /config/*.enc + +.vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..9e26dfeeb --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1 @@ +{} \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock index 5b14d5b5e..686c3a37b 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -427,14 +427,14 @@ GEM netrc (0.11.0) newrelic_rpm (8.9.0) nio4r (2.5.8) - nokogiri (1.13.7) + nokogiri (1.13.9) mini_portile2 (~> 2.8.0) racc (~> 1.4) - nokogiri (1.13.7-arm64-darwin) + nokogiri (1.13.9-arm64-darwin) racc (~> 1.4) - nokogiri (1.13.7-x86_64-darwin) + nokogiri (1.13.9-x86_64-darwin) racc (~> 1.4) - nokogiri (1.13.7-x86_64-linux) + nokogiri (1.13.9-x86_64-linux) racc (~> 1.4) oauth (0.5.10) orm_adapter (0.5.0) @@ -808,4 +808,4 @@ RUBY VERSION ruby 3.0.4p208 BUNDLED WITH - 2.3.18 + 2.3.16 diff --git a/app/builders/messages/instagram/message_builder.rb b/app/builders/messages/instagram/message_builder.rb index 3b8ead18c..1be960d21 100644 --- a/app/builders/messages/instagram/message_builder.rb +++ b/app/builders/messages/instagram/message_builder.rb @@ -72,6 +72,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder def build_message return if @outgoing_echo && already_sent_from_chatwoot? + return if message_content.blank? && all_unsupported_files? @message = conversation.messages.create!(message_params) @@ -117,6 +118,13 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder cw_message.present? end + def all_unsupported_files? + return if attachments.empty? + + attachments_type = attachments.pluck(:type).uniq.first + unsupported_file_type?(attachments_type) + end + ### Sample response # { # "object": "instagram", diff --git a/app/builders/messages/message_builder.rb b/app/builders/messages/message_builder.rb index e9bf0802b..69ed786ce 100644 --- a/app/builders/messages/message_builder.rb +++ b/app/builders/messages/message_builder.rb @@ -35,7 +35,13 @@ class Messages::MessageBuilder file: uploaded_attachment ) - attachment.file_type = file_type(uploaded_attachment&.content_type) if uploaded_attachment.is_a?(ActionDispatch::Http::UploadedFile) + attachment.file_type = if uploaded_attachment.is_a?(String) + file_type_by_signed_id( + uploaded_attachment + ) + else + file_type(uploaded_attachment&.content_type) + end end end diff --git a/app/builders/messages/messenger/message_builder.rb b/app/builders/messages/messenger/message_builder.rb index 3c406f1e0..d3b5bf6b9 100644 --- a/app/builders/messages/messenger/message_builder.rb +++ b/app/builders/messages/messenger/message_builder.rb @@ -2,7 +2,8 @@ class Messages::Messenger::MessageBuilder include ::FileTypeHelper def process_attachment(attachment) - return if attachment['type'].to_sym == :template + # This check handles very rare case if there are multiple files to attach with only one usupported file + return if unsupported_file_type?(attachment['type']) attachment_obj = @message.attachments.new(attachment_params(attachment).except(:remote_file_url)) attachment_obj.save! @@ -80,4 +81,10 @@ class Messages::Messenger::MessageBuilder ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception {} end + + private + + def unsupported_file_type?(attachment_type) + [:template, :unsupported_type].include? attachment_type.to_sym + end end diff --git a/app/controllers/api/v1/accounts/articles_controller.rb b/app/controllers/api/v1/accounts/articles_controller.rb index d650b19d9..a7891ffd4 100644 --- a/app/controllers/api/v1/accounts/articles_controller.rb +++ b/app/controllers/api/v1/accounts/articles_controller.rb @@ -5,9 +5,10 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController before_action :set_current_page, only: [:index] def index - @articles_count = @portal.articles.count - @articles = @portal.articles - @articles = @articles.search(list_params) if list_params.present? + @portal_articles = @portal.articles + @all_articles = @portal_articles.search(list_params) + @articles_count = @all_articles.count + @articles = @all_articles.page(@current_page) end def create @@ -37,7 +38,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController end def portal - @portal ||= Current.account.portals.find_by(slug: params[:portal_id]) + @portal ||= Current.account.portals.find_by!(slug: params[:portal_id]) end def article_params diff --git a/app/controllers/api/v1/accounts/categories_controller.rb b/app/controllers/api/v1/accounts/categories_controller.rb index bc18b61b8..e28e601d5 100644 --- a/app/controllers/api/v1/accounts/categories_controller.rb +++ b/app/controllers/api/v1/accounts/categories_controller.rb @@ -5,6 +5,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle before_action :set_current_page, only: [:index] def index + @current_locale = params[:locale] @categories = @portal.categories.search(params) end diff --git a/app/controllers/api/v1/accounts/macros_controller.rb b/app/controllers/api/v1/accounts/macros_controller.rb index e7946a54e..a13d74995 100644 --- a/app/controllers/api/v1/accounts/macros_controller.rb +++ b/app/controllers/api/v1/accounts/macros_controller.rb @@ -1,6 +1,6 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController - before_action :check_authorization before_action :fetch_macro, only: [:show, :update, :destroy, :execute] + before_action :check_authorization, only: [:show, :update, :destroy, :execute] def index @macros = Macro.with_visibility(current_user, params) @@ -14,6 +14,8 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController render json: { error: @macro.errors.messages }, status: :unprocessable_entity and return unless @macro.valid? @macro.save! + process_attachments + @macro end def show @@ -25,10 +27,21 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController head :ok end + def attach_file + file_blob = ActiveStorage::Blob.create_and_upload!( + key: nil, + io: params[:attachment].tempfile, + filename: params[:attachment].original_filename, + content_type: params[:attachment].content_type + ) + render json: { blob_key: file_blob.key, blob_id: file_blob.id } + end + def update ActiveRecord::Base.transaction do @macro.update!(macros_with_user) @macro.set_visibility(current_user, permitted_params) + process_attachments @macro.save! rescue StandardError => e Rails.logger.error e @@ -42,6 +55,19 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController head :ok end + private + + def process_attachments + actions = @macro.actions.filter_map { |k, _v| k if k['action_name'] == 'send_attachment' } + return if actions.blank? + + actions.each do |action| + blob_id = action['action_params'] + blob = ActiveStorage::Blob.find_by(id: blob_id) + @macro.files.attach(blob) + end + end + def permitted_params params.permit( :name, :account_id, :visibility, @@ -56,4 +82,8 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController def fetch_macro @macro = Current.account.macros.find_by(id: params[:id]) end + + def check_authorization + authorize(@macro) if @macro.present? + end end diff --git a/app/controllers/api/v1/accounts/portals_controller.rb b/app/controllers/api/v1/accounts/portals_controller.rb index 6ac000b58..62a98a872 100644 --- a/app/controllers/api/v1/accounts/portals_controller.rb +++ b/app/controllers/api/v1/accounts/portals_controller.rb @@ -14,7 +14,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController @portal.members << agents end - def show; end + def show + @all_articles = @portal.articles + @articles = @all_articles.search(locale: params[:locale]) + end def create @portal = Current.account.portals.build(portal_params) diff --git a/app/controllers/api/v1/widget/base_controller.rb b/app/controllers/api/v1/widget/base_controller.rb index 9ec702e6c..229cf27e9 100644 --- a/app/controllers/api/v1/widget/base_controller.rb +++ b/app/controllers/api/v1/widget/base_controller.rb @@ -50,7 +50,9 @@ class Api::V1::Widget::BaseController < ApplicationController end def contact_name - params[:contact][:name] || contact_email.split('@')[0] if contact_email.present? + return if @contact.email.present? || @contact.phone_number.present? || @contact.identifier.present? + + permitted_params.dig(:contact, :name) || (contact_email.split('@')[0] if contact_email.present?) end def contact_phone_number diff --git a/app/controllers/api/v1/widget/conversations_controller.rb b/app/controllers/api/v1/widget/conversations_controller.rb index 83206de90..9b8c4da81 100644 --- a/app/controllers/api/v1/widget/conversations_controller.rb +++ b/app/controllers/api/v1/widget/conversations_controller.rb @@ -17,7 +17,8 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController @contact = ContactIdentifyAction.new( contact: @contact, params: { email: contact_email, phone_number: contact_phone_number, name: contact_name }, - retain_original_contact_name: true + retain_original_contact_name: true, + discard_invalid_attrs: true ).perform end diff --git a/app/controllers/platform/api/v1/accounts_controller.rb b/app/controllers/platform/api/v1/accounts_controller.rb index 9c8f60f38..2873cc22c 100644 --- a/app/controllers/platform/api/v1/accounts_controller.rb +++ b/app/controllers/platform/api/v1/accounts_controller.rb @@ -1,18 +1,17 @@ class Platform::Api::V1::AccountsController < PlatformController def create @resource = Account.new(account_params) + update_resource_features @resource.save! @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource) - render json: @resource end - def show - render json: @resource - end + def show; end def update - @resource.update!(account_params) - render json: @resource + @resource.assign_attributes(account_params) + update_resource_features + @resource.save! end def destroy @@ -27,6 +26,18 @@ class Platform::Api::V1::AccountsController < PlatformController end def account_params - params.permit(:name, :locale) + permitted_params.except(:features) + end + + def update_resource_features + return if permitted_params[:features].blank? + + permitted_params[:features].each do |key, value| + value.present? ? @resource.enable_features(key) : @resource.disable_features(key) + end + end + + def permitted_params + params.permit(:name, :locale, :domain, :support_email, :status, features: {}, limits: {}, custom_attributes: {}) end end diff --git a/app/controllers/public/api/v1/inboxes/contacts_controller.rb b/app/controllers/public/api/v1/inboxes/contacts_controller.rb index 1fde3051e..b3ebd4ade 100644 --- a/app/controllers/public/api/v1/inboxes/contacts_controller.rb +++ b/app/controllers/public/api/v1/inboxes/contacts_controller.rb @@ -7,7 +7,7 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon @contact_inbox = ::ContactInboxWithContactBuilder.new( source_id: source_id, inbox: @inbox_channel.inbox, - contact_attributes: permitted_params.except(:identifier, :identifier_hash) + contact_attributes: permitted_params.except(:identifier_hash) ).perform end diff --git a/app/controllers/public/api/v1/inboxes_controller.rb b/app/controllers/public/api/v1/inboxes_controller.rb index a57e72e40..65fad57b1 100644 --- a/app/controllers/public/api/v1/inboxes_controller.rb +++ b/app/controllers/public/api/v1/inboxes_controller.rb @@ -3,9 +3,15 @@ class Public::Api::V1::InboxesController < PublicController before_action :set_contact_inbox before_action :set_conversation + def show + @inbox_channel = ::Channel::Api.find_by!(identifier: params[:id]) + end + private def set_inbox_channel + return if params[:inbox_id].blank? + @inbox_channel = ::Channel::Api.find_by!(identifier: params[:inbox_id]) end diff --git a/app/controllers/public/api/v1/portals/articles_controller.rb b/app/controllers/public/api/v1/portals/articles_controller.rb index 0dfa2ea9b..ae0fb2b6a 100644 --- a/app/controllers/public/api/v1/portals/articles_controller.rb +++ b/app/controllers/public/api/v1/portals/articles_controller.rb @@ -1,7 +1,7 @@ class Public::Api::V1::Portals::ArticlesController < PublicController before_action :ensure_custom_domain_request, only: [:show, :index] before_action :portal - before_action :set_category + before_action :set_category, except: [:index] before_action :set_article, only: [:show] layout 'portal' @@ -20,7 +20,7 @@ class Public::Api::V1::Portals::ArticlesController < PublicController end def set_category - @category = @portal.categories.find_by!(slug: params[:category_slug]) + @category = @portal.categories.find_by!(slug: params[:category_slug]) if params[:category_slug].present? end def portal diff --git a/app/helpers/file_type_helper.rb b/app/helpers/file_type_helper.rb index db3f6249d..03b807aad 100644 --- a/app/helpers/file_type_helper.rb +++ b/app/helpers/file_type_helper.rb @@ -8,6 +8,12 @@ module FileTypeHelper :file end + # Used in case of DIRECT_UPLOADS_ENABLED=true + def file_type_by_signed_id(signed_id) + blob = ActiveStorage::Blob.find_signed(signed_id) + file_type(blob&.content_type) + end + def image_file?(content_type) [ 'image/jpeg', diff --git a/app/javascript/dashboard/api/helpCenter/categories.js b/app/javascript/dashboard/api/helpCenter/categories.js index b6eae3f32..01658497e 100644 --- a/app/javascript/dashboard/api/helpCenter/categories.js +++ b/app/javascript/dashboard/api/helpCenter/categories.js @@ -7,8 +7,8 @@ class CategoriesAPI extends PortalsAPI { super('categories', { accountScoped: true }); } - get({ portalSlug }) { - return axios.get(`${this.url}/${portalSlug}/categories`); + get({ portalSlug, locale }) { + return axios.get(`${this.url}/${portalSlug}/categories?locale=${locale}`); } create({ portalSlug, categoryObj }) { diff --git a/app/javascript/dashboard/api/helpCenter/portals.js b/app/javascript/dashboard/api/helpCenter/portals.js index 520453540..28220b0b5 100644 --- a/app/javascript/dashboard/api/helpCenter/portals.js +++ b/app/javascript/dashboard/api/helpCenter/portals.js @@ -6,6 +6,10 @@ class PortalsAPI extends ApiClient { super('portals', { accountScoped: true }); } + getPortal({ portalSlug, locale }) { + return axios.get(`${this.url}/${portalSlug}?locale=${locale}`); + } + updatePortal({ portalSlug, portalObj }) { return axios.patch(`${this.url}/${portalSlug}`, portalObj); } diff --git a/app/javascript/dashboard/api/inbox/conversation.js b/app/javascript/dashboard/api/inbox/conversation.js index 9f6b8baf1..22548499d 100644 --- a/app/javascript/dashboard/api/inbox/conversation.js +++ b/app/javascript/dashboard/api/inbox/conversation.js @@ -105,6 +105,16 @@ class ConversationApi extends ApiClient { custom_attributes: customAttributes, }); } + + fetchParticipants(conversationId) { + return axios.get(`${this.url}/${conversationId}/participants`); + } + + updateParticipants({ conversationId, userIds }) { + return axios.patch(`${this.url}/${conversationId}/participants`, { + user_ids: userIds, + }); + } } export default new ConversationApi(); diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js index 5e58aa049..f5ce5d856 100644 --- a/app/javascript/dashboard/components/index.js +++ b/app/javascript/dashboard/components/index.js @@ -5,9 +5,12 @@ import Button from './ui/WootButton'; import Code from './Code'; import ColorPicker from './widgets/ColorPicker'; import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue'; +import ConfirmModal from './widgets/modal/ConfirmationModal.vue'; +import ContextMenu from './ui/ContextMenu.vue'; import DeleteModal from './widgets/modal/DeleteModal.vue'; import DropdownItem from 'shared/components/ui/dropdown/DropdownItem'; import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu'; +import FeatureToggle from './widgets/FeatureToggle'; import HorizontalBar from './widgets/chart/HorizontalBarChart'; import Input from './widgets/forms/Input.vue'; import Label from './ui/Label'; @@ -21,8 +24,6 @@ import SubmitButton from './buttons/FormSubmitButton'; import Tabs from './ui/Tabs/Tabs'; import TabsItem from './ui/Tabs/TabsItem'; import Thumbnail from './widgets/Thumbnail.vue'; -import ConfirmModal from './widgets/modal/ConfirmationModal.vue'; -import ContextMenu from './ui/ContextMenu.vue'; const WootUIKit = { AvatarUploader, @@ -31,9 +32,12 @@ const WootUIKit = { Code, ColorPicker, ConfirmDeleteModal, + ConfirmModal, + ContextMenu, DeleteModal, DropdownItem, DropdownMenu, + FeatureToggle, HorizontalBar, Input, Label, @@ -47,8 +51,6 @@ const WootUIKit = { Tabs, TabsItem, Thumbnail, - ConfirmModal, - ContextMenu, install(Vue) { const keys = Object.keys(this); keys.pop(); // remove 'install' from keys diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue index de10dda4a..2dd23544f 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue @@ -26,7 +26,7 @@ :class="{ 'text-truncate': shouldTruncate }" > {{ label }} - + {{ childItemCount }} @@ -76,7 +76,7 @@ export default { type: String, default: '', }, - isHelpCenterSidebar: { + showChildCount: { type: Boolean, default: false, }, @@ -127,11 +127,16 @@ $label-badge-size: var(--space-slab); color: var(--w-500); border-color: var(--w-25); } + &.is-active .count-view { + background: var(--w-75); + color: var(--w-500); + } } .menu-label { flex-grow: 1; - line-height: var(--space-two); + display: inline-flex; + align-items: center; } .inbox-icon { @@ -175,10 +180,6 @@ $label-badge-size: var(--space-slab); font-weight: var(--font-weight-bold); margin-left: var(--space-smaller); padding: var(--space-zero) var(--space-smaller); - - &.is-active { - background: var(--w-50); - color: var(--w-500); - } + line-height: var(--font-size-small); } diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue index 8661a488f..644258f50 100644 --- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue +++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue @@ -4,16 +4,15 @@ {{ $t(`SIDEBAR.${menuItem.label}`) }} -
+
- - + />
{{ $t(`SIDEBAR.${menuItem.label}`) }} - + {{ `${menuItem.count}` }} -
  • +
  • @@ -78,9 +73,6 @@
    • -

    - {{ $t('SIDEBAR.HELP_CENTER.CATEGORY_EMPTY_MESSAGE') }} -

    @@ -104,14 +96,6 @@ export default { type: Object, default: () => ({}), }, - isHelpCenterSidebar: { - type: Boolean, - default: false, - }, - isCategoryEmpty: { - type: Boolean, - default: false, - }, }, computed: { ...mapGetters({ @@ -161,8 +145,8 @@ export default { this.menuItem.toStateName === 'settings_applications' ); }, - isArticlesView() { - return this.$store.state.route.name === this.menuItem.toStateName; + isCurrentRoute() { + return this.$store.state.route.name.includes(this.menuItem.toStateName); }, computedClass() { @@ -181,12 +165,11 @@ export default { } return ' '; } - if (this.isHelpCenterSidebar) { - if (this.isArticlesView) { - return 'is-active'; - } - return ' '; + + if (this.isCurrentRoute) { + return 'is-active'; } + return ''; }, }, @@ -222,6 +205,9 @@ export default { onClickOpen() { this.$emit('open'); }, + showChildCount(count) { + return Number.isInteger(count); + }, }, }; @@ -277,6 +263,11 @@ export default { color: var(--w-500); border-color: var(--w-25); } + + &.is-active .count-view { + background: var(--w-75); + color: var(--w-600); + } } .secondary-menu--icon { @@ -306,15 +297,12 @@ export default { top: -1px; } -.sidebar-item .button.menu-item--new { - display: inline-flex; - height: var(--space-medium); - margin: var(--space-smaller) 0; - padding: var(--space-smaller); - color: var(--s-500); +.sidebar-item .menu-item--new { + padding: var(--space-small) 0; - &:hover { - color: var(--w-500); + .button { + display: inline-flex; + color: var(--s-500); } } @@ -340,11 +328,6 @@ export default { font-weight: var(--font-weight-bold); margin-left: var(--space-smaller); padding: var(--space-zero) var(--space-smaller); - - &.is-active { - background: var(--w-50); - color: var(--w-500); - } } .submenu-icons { @@ -356,10 +339,4 @@ export default { margin-left: var(--space-small); } } - -.empty-text { - color: var(--s-500); - font-size: var(--font-size-small); - margin: var(--space-smaller); -} diff --git a/app/javascript/dashboard/components/ui/TimeAgo.vue b/app/javascript/dashboard/components/ui/TimeAgo.vue index c262a8aa0..c796ed0f6 100644 --- a/app/javascript/dashboard/components/ui/TimeAgo.vue +++ b/app/javascript/dashboard/components/ui/TimeAgo.vue @@ -1,17 +1,15 @@ diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue index 46c64fc53..b3dd67dc3 100644 --- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue +++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue @@ -32,6 +32,7 @@ v-for="attribute in filterAttributes" :key="attribute.key" :value="attribute.key" + :disabled="attribute.disabled" > {{ attribute.name }} @@ -173,6 +174,10 @@ export default { type: Array, default: () => [], }, + customAttributeType: { + type: String, + default: '', + }, }, computed: { attributeKey: { diff --git a/app/javascript/dashboard/components/widgets/TableFooter.vue b/app/javascript/dashboard/components/widgets/TableFooter.vue index c89b37b01..e28099bff 100644 --- a/app/javascript/dashboard/components/widgets/TableFooter.vue +++ b/app/javascript/dashboard/components/widgets/TableFooter.vue @@ -83,75 +83,71 @@ export default { }, pageSize: { type: Number, - default: 15, + default: 25, }, totalCount: { type: Number, default: 0, }, - onPageChange: { - type: Function, - default: () => {}, - }, }, computed: { isFooterVisible() { return this.totalCount && !(this.firstIndex > this.totalCount); }, firstIndex() { - const firstIndex = this.pageSize * (this.currentPage - 1) + 1; - return firstIndex; + return this.pageSize * (this.currentPage - 1) + 1; }, lastIndex() { - const index = Math.min(this.totalCount, this.pageSize * this.currentPage); - return index; + return Math.min(this.totalCount, this.pageSize * this.currentPage); }, searchButtonClass() { return this.searchQuery !== '' ? 'show' : ''; }, hasLastPage() { - const isDisabled = - this.currentPage === Math.ceil(this.totalCount / this.pageSize); - return isDisabled; + return !!Math.ceil(this.totalCount / this.pageSize); }, hasFirstPage() { - const isDisabled = this.currentPage === 1; - return isDisabled; + return this.currentPage === 1; }, hasNextPage() { - const isDisabled = - this.currentPage === Math.ceil(this.totalCount / this.pageSize); - return isDisabled; + return this.currentPage === Math.ceil(this.totalCount / this.pageSize); }, hasPrevPage() { - const isDisabled = this.currentPage === 1; - return isDisabled; + return this.currentPage === 1; }, }, methods: { onNextPage() { - if (this.hasNextPage) return; + if (this.hasNextPage) { + return; + } const newPage = this.currentPage + 1; this.onPageChange(newPage); }, onPrevPage() { - if (this.hasPrevPage) return; - + if (this.hasPrevPage) { + return; + } const newPage = this.currentPage - 1; this.onPageChange(newPage); }, onFirstPage() { - if (this.hasFirstPage) return; - + if (this.hasFirstPage) { + return; + } const newPage = 1; this.onPageChange(newPage); }, onLastPage() { - if (this.hasLastPage) return; - + if (this.hasLastPage) { + return; + } const newPage = Math.ceil(this.totalCount / this.pageSize); this.onPageChange(newPage); }, + onPageChange(page) { + this.$emit('page-change', page); + }, }, }; diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.spec.js b/app/javascript/dashboard/components/widgets/Thumbnail.spec.js index c10cd3d16..1ea5e6cc6 100644 --- a/app/javascript/dashboard/components/widgets/Thumbnail.spec.js +++ b/app/javascript/dashboard/components/widgets/Thumbnail.spec.js @@ -2,49 +2,47 @@ import { mount } from '@vue/test-utils'; import Avatar from './Avatar.vue'; import Thumbnail from './Thumbnail.vue'; -describe(`when there are NO errors loading the thumbnail`, () => { - it(`should render the agent thumbnail`, () => { +describe('Thumbnail.vue', () => { + it('should render the agent thumbnail if valid image is passed', () => { const wrapper = mount(Thumbnail, { propsData: { src: 'https://some_valid_url.com', }, data() { return { + hasImageLoaded: true, imgError: false, }; }, }); - expect(wrapper.find('#image').exists()).toBe(true); + expect(wrapper.find('.user-thumbnail').exists()).toBe(true); const avatarComponent = wrapper.findComponent(Avatar); - expect(avatarComponent.exists()).toBe(false); + expect(avatarComponent.isVisible()).toBe(false); }); -}); -describe(`when there ARE errors loading the thumbnail`, () => { - it(`should render the agent avatar`, () => { + it('should render the avatar component if invalid image is passed', () => { const wrapper = mount(Thumbnail, { propsData: { src: 'https://some_invalid_url.com', }, data() { return { + hasImageLoaded: true, imgError: true, }; }, }); expect(wrapper.find('#image').exists()).toBe(false); const avatarComponent = wrapper.findComponent(Avatar); - expect(avatarComponent.exists()).toBe(true); + expect(avatarComponent.isVisible()).toBe(true); }); -}); -describe(`when Avatar shows`, () => { - it(`initials shold correspond to username`, () => { + it('should the initial of the name if no image is passed', () => { const wrapper = mount(Avatar, { propsData: { username: 'Angie Rojas', }, }); - expect(wrapper.find('span').text()).toBe('AR'); + expect(wrapper.find('div').text()).toBe('AR'); }); }); diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.vue b/app/javascript/dashboard/components/widgets/Thumbnail.vue index 4bfc729de..c827135df 100644 --- a/app/javascript/dashboard/components/widgets/Thumbnail.vue +++ b/app/javascript/dashboard/components/widgets/Thumbnail.vue @@ -1,74 +1,29 @@ + + + + diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue index 4a1713165..a8a5f3cb3 100644 --- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue +++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue @@ -17,7 +17,10 @@ @click="snoozeConversation(option.snoozedUntil)" /> - + - + - + -

    {{ option.label }}

    +

    {{ option.label }}

    @@ -50,7 +50,6 @@ export default { padding: var(--space-smaller); border-radius: var(--border-radius-small); overflow: hidden; - .menu-label { margin: 0; font-size: var(--font-size-mini); diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue index 08922bc37..04870ccc1 100644 --- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue +++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue @@ -1,11 +1,14 @@ @@ -60,12 +60,12 @@ export default { }, pageSize: { type: Number, - default: 15, + default: 25, }, }, methods: { onPageChange(page) { - this.$emit('on-page-change', page); + this.$emit('page-change', page); }, }, }; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue index 562d6bd07..b4626e108 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue @@ -2,6 +2,7 @@
    + ({ id: category.id, @@ -216,6 +225,13 @@ export default { return this.selectedPortal ? this.selectedPortal.name : ''; }, }, + + watch: { + '$route.params.portalSlug'() { + this.fetchPortalsAndItsCategories(); + }, + }, + mounted() { window.addEventListener('resize', this.handleResize); this.handleResize(); @@ -232,7 +248,7 @@ export default { }, updated() { const slug = this.$route.params.portalSlug; - if (slug) { + if (slug !== this.lastActivePortalSlug) { this.lastActivePortalSlug = slug; this.updateUISettings({ last_active_portal_slug: slug, @@ -251,12 +267,14 @@ export default { toggleSidebar() { this.isSidebarOpen = !this.isSidebarOpen; }, - fetchPortalsAndItsCategories() { - this.$store.dispatch('portals/index').then(() => { - this.$store.dispatch('categories/index', { - portalSlug: this.selectedPortalSlug, - }); - }); + async fetchPortalsAndItsCategories() { + await this.$store.dispatch('portals/index'); + const selectedPortalParam = { + portalSlug: this.selectedPortalSlug, + locale: this.selectedLocaleInPortal, + }; + this.$store.dispatch('portals/show', selectedPortalParam); + this.$store.dispatch('categories/index', selectedPortalParam); this.$store.dispatch('agents/get'); }, toggleKeyShortcutModal() { @@ -277,12 +295,15 @@ export default { closePortalPopover() { this.showPortalPopover = false; }, - onClickOpenAddCatogoryModal() { + onClickOpenAddCategoryModal() { this.showAddCategoryModal = true; }, onClickCloseAddCategoryModal() { this.showAddCategoryModal = false; }, + toggleAccountModal() { + this.showAccountModal = !this.showAccountModal; + }, }, }; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue index 0354ad22b..045bd77cd 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue @@ -376,7 +376,6 @@ export default { } } .portal-title { - color: var(--s-900); margin-bottom: 0; } .portal-count { @@ -389,14 +388,17 @@ export default { } } .portal-locales { - margin-top: var(--space-medium); - margin-bottom: var(--space-small); + margin-bottom: var(--space-large); .locale-title { color: var(--s-800); font-weight: var(--font-weight-medium); margin-bottom: var(--space-small); } } + + .portal--heading { + margin-bottom: var(--space-normal); + } } .portal-settings--icon { padding: var(--space-smaller); diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue index 796d029d6..e13c60061 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue @@ -35,11 +35,12 @@
    @@ -51,15 +52,18 @@ :label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')" :placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')" :help-text="domainHelpText" - @input="$v.slug.$touch" + @blur="$v.slug.$touch" />
    @@ -77,8 +81,8 @@ diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue index 668b44d51..7230c6a27 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue @@ -2,7 +2,7 @@
    -
    +
    @@ -144,25 +139,23 @@ diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue index 39f017fef..31f661a55 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue @@ -1,11 +1,121 @@ - + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue index 2de1f787c..5004aec5b 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroEditor.vue @@ -1,9 +1,149 @@ - + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue new file mode 100644 index 000000000..fb7d992a2 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue new file mode 100644 index 000000000..09e8ba9ef --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue @@ -0,0 +1,155 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue new file mode 100644 index 000000000..f774937a9 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNodes.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue new file mode 100644 index 000000000..076dad07b --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue @@ -0,0 +1,183 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue new file mode 100644 index 000000000..29419db85 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacrosTableRow.vue @@ -0,0 +1,74 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue new file mode 100644 index 000000000..d17afe774 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Pill.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/constants.js b/app/javascript/dashboard/routes/dashboard/settings/macros/constants.js new file mode 100644 index 000000000..b13a9bbd9 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/constants.js @@ -0,0 +1,52 @@ +export const MACRO_ACTION_TYPES = [ + { + key: 'assign_team', + label: 'Assign a team', + inputType: 'search_select', + }, + { + key: 'assign_agent', + label: 'Assign an agent', + inputType: 'search_select', + }, + { + key: 'add_label', + label: 'Add a label', + inputType: 'multi_select', + }, + { + key: 'send_email_transcript', + label: 'Send an email transcript', + inputType: 'email', + }, + { + key: 'mute_conversation', + label: 'Mute conversation', + inputType: null, + }, + { + key: 'snooze_conversation', + label: 'Snooze conversation', + inputType: null, + }, + { + key: 'resolve_conversation', + label: 'Resolve conversation', + inputType: null, + }, + { + key: 'send_attachment', + label: 'Send Attachment', + inputType: 'attachment', + }, + { + key: 'send_message', + label: 'Send a message', + inputType: 'textarea', + }, + { + key: 'add_private_note', + label: 'Add a private note', + inputType: 'textarea', + }, +]; diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js new file mode 100644 index 000000000..3fc204ac0 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macroHelper.js @@ -0,0 +1,51 @@ +import { MACRO_ACTION_TYPES as macroActionTypes } from 'dashboard/routes/dashboard/settings/macros/constants.js'; +export const emptyMacro = { + name: '', + actions: [ + { + action_name: 'assign_team', + action_params: [], + }, + ], + visibility: 'global', +}; + +export const resolveActionName = key => { + return macroActionTypes.find(i => i.key === key).label; +}; + +export const resolveTeamIds = (teams, ids) => { + return ids + .map(id => { + const team = teams.find(i => i.id === id); + return team ? team.name : ''; + }) + .join(', '); +}; + +export const resolveLabels = (labels, ids) => { + return ids + .map(id => { + const label = labels.find(i => i.title === id); + return label ? label.title : ''; + }) + .join(', '); +}; + +export const resolveAgents = (agents, ids) => { + return ids + .map(id => { + const agent = agents.find(i => i.id === id); + return agent ? agent.name : ''; + }) + .join(', '); +}; + +export const getFileName = (id, actionType, files) => { + if (!id || !files) return ''; + if (actionType === 'send_attachment') { + const file = files.find(item => item.blob_id === id); + if (file) return file.filename.toString(); + } + return ''; +}; diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js index 9752b79fb..23306a8bf 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/macros.routes.js @@ -8,10 +8,14 @@ export default { { path: frontendURL('accounts/:accountId/settings/macros'), component: SettingsContent, - props: { - headerTitle: 'MACROS.HEADER', - icon: 'flash-settings', - showNewButton: false, + props: params => { + const showBackButton = params.name !== 'macros_wrapper'; + return { + headerTitle: 'MACROS.HEADER', + headerButtonText: 'MACROS.HEADER_BTN_TXT', + icon: 'flash-settings', + showBackButton, + }; }, children: [ { diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js index f2fe95b50..632c14d2c 100755 --- a/app/javascript/dashboard/store/index.js +++ b/app/javascript/dashboard/store/index.js @@ -2,14 +2,16 @@ import Vue from 'vue'; import Vuex from 'vuex'; import accounts from './modules/accounts'; -import agents from './modules/agents'; import agentBots from './modules/agentBots'; +import agents from './modules/agents'; +import articles from './modules/helpCenterArticles'; import attributes from './modules/attributes'; import auth from './modules/auth'; import automations from './modules/automations'; import bulkActions from './modules/bulkActions'; import campaigns from './modules/campaigns'; import cannedResponse from './modules/cannedResponse'; +import categories from './modules/helpCenterCategories'; import contactConversations from './modules/contactConversations'; import contactLabels from './modules/contactLabels'; import contactNotes from './modules/contactNotes'; @@ -21,6 +23,7 @@ import conversations from './modules/conversations'; import conversationSearch from './modules/conversationSearch'; import conversationStats from './modules/conversationStats'; import conversationTypingStatus from './modules/conversationTypingStatus'; +import conversationWatchers from './modules/conversationWatchers'; import csat from './modules/csat'; import customViews from './modules/customViews'; import dashboardApps from './modules/dashboardApps'; @@ -30,28 +33,29 @@ import inboxes from './modules/inboxes'; import inboxMembers from './modules/inboxMembers'; import integrations from './modules/integrations'; import labels from './modules/labels'; +import macros from './modules/macros'; import notifications from './modules/notifications'; +import portals from './modules/helpCenterPortals'; import reports from './modules/reports'; import teamMembers from './modules/teamMembers'; import teams from './modules/teams'; import userNotificationSettings from './modules/userNotificationSettings'; import webhooks from './modules/webhooks'; -import articles from './modules/helpCenterArticles'; -import portals from './modules/helpCenterPortals'; -import categories from './modules/helpCenterCategories'; Vue.use(Vuex); export default new Vuex.Store({ modules: { accounts, - agents, agentBots, + agents, + articles, attributes, auth, automations, bulkActions, campaigns, cannedResponse, + categories, contactConversations, contactLabels, contactNotes, @@ -63,6 +67,7 @@ export default new Vuex.Store({ conversationSearch, conversationStats, conversationTypingStatus, + conversationWatchers, csat, customViews, dashboardApps, @@ -72,14 +77,13 @@ export default new Vuex.Store({ inboxMembers, integrations, labels, + macros, notifications, + portals, reports, teamMembers, teams, userNotificationSettings, webhooks, - articles, - portals, - categories, }, }); diff --git a/app/javascript/dashboard/store/modules/conversationWatchers.js b/app/javascript/dashboard/store/modules/conversationWatchers.js new file mode 100644 index 000000000..d8da9cdb8 --- /dev/null +++ b/app/javascript/dashboard/store/modules/conversationWatchers.js @@ -0,0 +1,90 @@ +import Vue from 'vue'; +import types from '../mutation-types'; +import { throwErrorMessage } from 'dashboard/store/utils/api'; + +import ConversationInboxApi from '../../api/inbox/conversation'; + +const state = { + records: {}, + uiFlags: { + isFetching: false, + isUpdating: false, + }, +}; + +export const getters = { + getUIFlags($state) { + return $state.uiFlags; + }, + getByConversationId: _state => conversationId => { + return _state.records[conversationId]; + }, +}; + +export const actions = { + show: async ({ commit }, { conversationId }) => { + commit(types.SET_CONVERSATION_WATCHERS_UI_FLAG, { + isFetching: true, + }); + + try { + const response = await ConversationInboxApi.fetchParticipants( + conversationId + ); + commit(types.SET_CONVERSATION_WATCHERS, { + conversationId, + data: response.data, + }); + } catch (error) { + throwErrorMessage(error); + } finally { + commit(types.SET_CONVERSATION_WATCHERS_UI_FLAG, { + isFetching: false, + }); + } + }, + + update: async ({ commit }, { conversationId, userIds }) => { + commit(types.SET_CONVERSATION_WATCHERS_UI_FLAG, { + isUpdating: true, + }); + + try { + const response = await ConversationInboxApi.updateParticipants({ + conversationId, + userIds, + }); + commit(types.SET_CONVERSATION_WATCHERS, { + conversationId, + data: response.data, + }); + } catch (error) { + throwErrorMessage(error); + } finally { + commit(types.SET_CONVERSATION_WATCHERS_UI_FLAG, { + isUpdating: false, + }); + } + }, +}; + +export const mutations = { + [types.SET_CONVERSATION_WATCHERS_UI_FLAG]($state, data) { + $state.uiFlags = { + ...$state.uiFlags, + ...data, + }; + }, + + [types.SET_CONVERSATION_WATCHERS]($state, { data, conversationId }) { + Vue.set($state.records, conversationId, data); + }, +}; + +export default { + namespaced: true, + state, + getters, + actions, + mutations, +}; diff --git a/app/javascript/dashboard/store/modules/conversations/actions.js b/app/javascript/dashboard/store/modules/conversations/actions.js index 22c6721c1..eb13afd4c 100644 --- a/app/javascript/dashboard/store/modules/conversations/actions.js +++ b/app/javascript/dashboard/store/modules/conversations/actions.js @@ -199,10 +199,6 @@ const actions = { } }, - updateConversationRead({ commit }, timestamp) { - commit(types.SET_CONVERSATION_LAST_SEEN, timestamp); - }, - updateMessage({ commit }, message) { commit(types.ADD_MESSAGE, message); }, @@ -252,6 +248,12 @@ const actions = { meta: { sender }, } = conversation; commit(types.UPDATE_CONVERSATION, conversation); + + dispatch('conversationLabels/setConversationLabel', { + id: conversation.id, + data: conversation.labels, + }); + dispatch('contacts/setContact', sender); }, diff --git a/app/javascript/dashboard/store/modules/conversations/getters.js b/app/javascript/dashboard/store/modules/conversations/getters.js index c5b34af60..75d9aef44 100644 --- a/app/javascript/dashboard/store/modules/conversations/getters.js +++ b/app/javascript/dashboard/store/modules/conversations/getters.js @@ -91,9 +91,6 @@ const getters = { value => value.id === Number(conversationId) ); }, - getConversationLastSeen: _state => { - return _state.conversationLastSeen; - }, }; export default getters; diff --git a/app/javascript/dashboard/store/modules/conversations/index.js b/app/javascript/dashboard/store/modules/conversations/index.js index 8df08089c..bbcafedaf 100644 --- a/app/javascript/dashboard/store/modules/conversations/index.js +++ b/app/javascript/dashboard/store/modules/conversations/index.js @@ -13,7 +13,6 @@ const state = { currentInbox: null, selectedChatId: null, appliedFilters: [], - conversationLastSeen: null, }; // mutations @@ -34,9 +33,6 @@ export const mutations = { _state.allConversations = []; _state.selectedChatId = null; }, - [types.SET_CONVERSATION_LAST_SEEN](_state, timestamp) { - _state.conversationLastSeen = timestamp; - }, [types.SET_ALL_MESSAGES_LOADED](_state) { const [chat] = getSelectedChatConversation(_state); Vue.set(chat, 'allMessagesLoaded', true); diff --git a/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js b/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js index ebea5d444..2d212ded3 100644 --- a/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js +++ b/app/javascript/dashboard/store/modules/helpCenterCategories/actions.js @@ -2,13 +2,13 @@ import categoriesAPI from 'dashboard/api/helpCenter/categories.js'; import { throwErrorMessage } from 'dashboard/store/utils/api'; import types from '../../mutation-types'; export const actions = { - index: async ({ commit }, { portalSlug }) => { + index: async ({ commit }, { portalSlug, locale }) => { try { commit(types.SET_UI_FLAG, { isFetching: true }); if (portalSlug) { const { data: { payload }, - } = await categoriesAPI.get({ portalSlug }); + } = await categoriesAPI.get({ portalSlug, locale }); commit(types.CLEAR_CATEGORIES); const categoryIds = payload.map(category => category.id); commit(types.ADD_MANY_CATEGORIES, payload); diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js index 2be7dc03f..bfae85d27 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js @@ -7,14 +7,12 @@ export const actions = { try { commit(types.SET_UI_FLAG, { isFetching: true }); const { - data: { payload, meta }, + data: { payload }, } = await portalAPIs.get(); commit(types.CLEAR_PORTALS); const portalSlugs = payload.map(portal => portal.slug); commit(types.ADD_MANY_PORTALS_ENTRY, payload); commit(types.ADD_MANY_PORTALS_IDS, portalSlugs); - - commit(types.SET_PORTALS_META, meta); } catch (error) { throwErrorMessage(error); } finally { @@ -22,6 +20,21 @@ export const actions = { } }, + show: async ({ commit }, { portalSlug, locale }) => { + commit(types.SET_UI_FLAG, { isFetchingItem: true }); + try { + const response = await portalAPIs.getPortal({ portalSlug, locale }); + const { + data: { meta }, + } = response; + commit(types.SET_PORTALS_META, meta); + } catch (error) { + // Ignore error + } finally { + commit(types.SET_UI_FLAG, { isFetchingItem: false }); + } + }, + create: async ({ commit }, params) => { commit(types.SET_UI_FLAG, { isCreating: true }); try { diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js index c3cc790aa..b52f6b4ad 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/getters.js @@ -20,7 +20,5 @@ export const getters = { return portals; }, count: state => state.portals.allIds.length || 0, - getMeta: state => { - return state.meta; - }, + getMeta: state => state.meta, }; diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js index fecb17d4d..346eb9e33 100755 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/index.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/index.js @@ -10,8 +10,10 @@ export const defaultPortalFlags = { const state = { meta: { - count: 0, - currentPage: 1, + allArticlesCount: 0, + mineArticlesCount: 0, + draftArticlesCount: 0, + archivedArticlesCount: 0, }, portals: { diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js index 421b0dc7e..9ece174cd 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js @@ -44,9 +44,16 @@ export const mutations = { }, [types.SET_PORTALS_META]: ($state, data) => { - const { portals_count: count, current_page: currentPage } = data; - Vue.set($state.meta, 'count', count); - Vue.set($state.meta, 'currentPage', currentPage); + const { + all_articles_count: allArticlesCount = 0, + mine_articles_count: mineArticlesCount = 0, + draft_articles_count: draftArticlesCount = 0, + archived_articles_count: archivedArticlesCount = 0, + } = data; + Vue.set($state.meta, 'allArticlesCount', allArticlesCount); + Vue.set($state.meta, 'archivedArticlesCount', archivedArticlesCount); + Vue.set($state.meta, 'mineArticlesCount', mineArticlesCount); + Vue.set($state.meta, 'draftArticlesCount', draftArticlesCount); }, [types.ADD_PORTAL_ID]($state, portalSlug) { diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js index aeda57df0..6fdd054b3 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/actions.spec.js @@ -22,7 +22,6 @@ describe('#actions', () => { [types.CLEAR_PORTALS], [types.ADD_MANY_PORTALS_ENTRY, apiResponse.payload], [types.ADD_MANY_PORTALS_IDS, ['domain', 'campaign']], - [types.SET_PORTALS_META, { current_page: 1, portals_count: 1 }], [types.SET_UI_FLAG, { isFetching: false }], ]); }); @@ -66,6 +65,36 @@ describe('#actions', () => { }); }); + describe('#show', () => { + it('sends correct actions if API is success', async () => { + axios.get.mockResolvedValue({ + data: { meta: { all_articles_count: 1 } }, + }); + await actions.show( + { commit }, + { + portalSlug: 'handbook', + locale: 'en', + } + ); + expect(commit.mock.calls).toEqual([ + [types.SET_UI_FLAG, { isFetchingItem: true }], + [types.SET_PORTALS_META, { all_articles_count: 1 }], + [types.SET_UI_FLAG, { isFetchingItem: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.post.mockRejectedValue({ message: 'Incorrect header' }); + await expect( + actions.create({ commit, dispatch, state: { portals: {} } }, {}) + ).rejects.toThrow(Error); + expect(commit.mock.calls).toEqual([ + [types.SET_UI_FLAG, { isCreating: true }], + [types.SET_UI_FLAG, { isCreating: false }], + ]); + }); + }); + describe('#update', () => { it('sends correct actions if API is success', async () => { axios.patch.mockResolvedValue({ data: apiResponse.payload[1] }); diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js index d20cacd1b..2e58c1de7 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js @@ -107,12 +107,20 @@ describe('#mutations', () => { describe('#SET_PORTALS_META', () => { it('add meta to state', () => { mutations[types.SET_PORTALS_META](state, { - portals_count: 10, - current_page: 1, - }); - expect(state.meta).toEqual({ count: 10, currentPage: 1, + all_articles_count: 10, + archived_articles_count: 10, + draft_articles_count: 10, + mine_articles_count: 10, + }); + expect(state.meta).toEqual({ + count: 0, + currentPage: 1, + allArticlesCount: 10, + archivedArticlesCount: 10, + draftArticlesCount: 10, + mineArticlesCount: 10, }); }); }); diff --git a/app/javascript/dashboard/store/modules/specs/conversationWatchers/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversationWatchers/actions.spec.js new file mode 100644 index 000000000..115c505ce --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/conversationWatchers/actions.spec.js @@ -0,0 +1,62 @@ +import axios from 'axios'; +import { actions } from '../../conversationWatchers'; +import types from '../../../mutation-types'; + +const commit = jest.fn(); +global.axios = axios; +jest.mock('axios'); + +describe('#actions', () => { + describe('#get', () => { + it('sends correct actions if API is success', async () => { + axios.get.mockResolvedValue({ data: { id: 1 } }); + await actions.show({ commit }, { conversationId: 1 }); + expect(commit.mock.calls).toEqual([ + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isFetching: true }], + [ + types.SET_CONVERSATION_WATCHERS, + { conversationId: 1, data: { id: 1 } }, + ], + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isFetching: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.get.mockRejectedValue({ message: 'Incorrect header' }); + await expect( + actions.show({ commit }, { conversationId: 1 }) + ).rejects.toThrow(Error); + expect(commit.mock.calls).toEqual([ + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isFetching: true }], + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isFetching: false }], + ]); + }); + }); + + describe('#update', () => { + it('sends correct actions if API is success', async () => { + axios.patch.mockResolvedValue({ data: [{ id: 2 }] }); + await actions.update( + { commit }, + { conversationId: 2, userIds: [{ id: 2 }] } + ); + expect(commit.mock.calls).toEqual([ + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isUpdating: true }], + [ + types.SET_CONVERSATION_WATCHERS, + { conversationId: 2, data: [{ id: 2 }] }, + ], + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isUpdating: false }], + ]); + }); + it('sends correct actions if API is error', async () => { + axios.patch.mockRejectedValue({ message: 'Incorrect header' }); + await expect( + actions.update({ commit }, { conversationId: 1, content: 'hi' }) + ).rejects.toThrow(Error); + expect(commit.mock.calls).toEqual([ + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isUpdating: true }], + [types.SET_CONVERSATION_WATCHERS_UI_FLAG, { isUpdating: false }], + ]); + }); + }); +}); diff --git a/app/javascript/dashboard/store/modules/specs/conversationWatchers/fixtures.js b/app/javascript/dashboard/store/modules/specs/conversationWatchers/fixtures.js new file mode 100644 index 000000000..6b1ed4def --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/conversationWatchers/fixtures.js @@ -0,0 +1,14 @@ +export const data = [ + { + id: 1, + name: 'Uno', + }, + { + id: 2, + name: 'Dos', + }, + { + id: 3, + name: 'Tres', + }, +]; diff --git a/app/javascript/dashboard/store/modules/specs/conversationWatchers/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversationWatchers/getters.spec.js new file mode 100644 index 000000000..4bdcb3950 --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/conversationWatchers/getters.spec.js @@ -0,0 +1,22 @@ +import { getters } from '../../conversationWatchers'; +import watchersData from './fixtures'; + +describe('#getters', () => { + it('getByConversationId', () => { + const state = { records: { 1: watchersData } }; + expect(getters.getByConversationId(state)(1)).toEqual(watchersData); + }); + + it('getUIFlags', () => { + const state = { + uiFlags: { + isFetching: false, + isUpdating: false, + }, + }; + expect(getters.getUIFlags(state)).toEqual({ + isFetching: false, + isUpdating: false, + }); + }); +}); diff --git a/app/javascript/dashboard/store/modules/specs/conversationWatchers/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversationWatchers/mutations.spec.js new file mode 100644 index 000000000..781e8eaa8 --- /dev/null +++ b/app/javascript/dashboard/store/modules/specs/conversationWatchers/mutations.spec.js @@ -0,0 +1,37 @@ +import types from '../../../mutation-types'; +import { mutations } from '../../conversationWatchers'; + +describe('#mutations', () => { + describe('#SET_CONVERSATION_WATCHERS', () => { + it('sets an individual record', () => { + let state = { + records: {}, + }; + + mutations[types.SET_CONVERSATION_WATCHERS](state, { + data: [], + conversationId: 1, + }); + expect(state.records).toEqual({ 1: [] }); + }); + }); + + describe('#SET_CONVERSATION_WATCHERS_UI_FLAG', () => { + it('set ui flags', () => { + let state = { + uiFlags: { + isFetching: true, + isUpdating: false, + }, + }; + + mutations[types.SET_CONVERSATION_WATCHERS_UI_FLAG](state, { + isFetching: false, + }); + expect(state.uiFlags).toEqual({ + isFetching: false, + isUpdating: false, + }); + }); + }); +}); diff --git a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js index d566b1df7..852565230 100644 --- a/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js +++ b/app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js @@ -58,6 +58,7 @@ describe('#actions', () => { id: 1, messages: [], meta: { sender: { id: 1, name: 'john-doe' } }, + labels: ['support'], }; actions.updateConversation( { commit, rootState: { route: { name: 'home' } }, dispatch }, @@ -67,6 +68,10 @@ describe('#actions', () => { [types.UPDATE_CONVERSATION, conversation], ]); expect(dispatch.mock.calls).toEqual([ + [ + 'conversationLabels/setConversationLabel', + { id: 1, data: ['support'] }, + ], [ 'contacts/setContact', { @@ -375,15 +380,6 @@ describe('#actions', () => { expect(commit.mock.calls).toEqual([[types.CLEAR_CONVERSATION_FILTERS]]); }); }); - - describe('#updateConversationRead', () => { - it('commits the correct mutation and sets the contact_last_seen', () => { - actions.updateConversationRead({ commit }, 1649856659); - expect(commit.mock.calls).toEqual([ - [types.SET_CONVERSATION_LAST_SEEN, 1649856659], - ]); - }); - }); }); describe('#deleteMessage', () => { diff --git a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js index ef891deb2..7dc0dade5 100644 --- a/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js +++ b/app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js @@ -132,16 +132,6 @@ describe('#getters', () => { }); }); - describe('#getConversationLastSeen', () => { - it('getConversationLastSeen', () => { - const timestamp = 1649856659; - const state = { - conversationLastSeen: timestamp, - }; - expect(getters.getConversationLastSeen(state)).toEqual(timestamp); - }); - }); - describe('#getLastEmailInSelectedChat', () => { it('Returns cc in last email', () => { const state = {}; diff --git a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js index 1cba8e973..de0a8907c 100644 --- a/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js +++ b/app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js @@ -200,18 +200,6 @@ describe('#mutations', () => { ]); }); - describe('#SET_CONVERSATION_LAST_SEEN', () => { - it('sets conversation last seen timestamp', () => { - const state = { - conversationLastSeen: null, - }; - - mutations[types.SET_CONVERSATION_LAST_SEEN](state, 1649856659); - - expect(state.conversationLastSeen).toEqual(1649856659); - }); - }); - describe('#UPDATE_CONVERSATION_CUSTOM_ATTRIBUTES', () => { it('update conversation custom attributes', () => { const custom_attributes = { order_id: 1001 }; diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js index bcb6ad9a5..97801bb33 100755 --- a/app/javascript/dashboard/store/mutation-types.js +++ b/app/javascript/dashboard/store/mutation-types.js @@ -21,7 +21,6 @@ export default { CLEAR_CONTACT_CONVERSATIONS: 'CLEAR_CONTACT_CONVERSATIONS', SET_CONVERSATION_FILTERS: 'SET_CONVERSATION_FILTERS', CLEAR_CONVERSATION_FILTERS: 'CLEAR_CONVERSATION_FILTERS', - SET_CONVERSATION_LAST_SEEN: 'SET_CONVERSATION_LAST_SEEN', SET_CURRENT_CHAT_WINDOW: 'SET_CURRENT_CHAT_WINDOW', CLEAR_CURRENT_CHAT_WINDOW: 'CLEAR_CURRENT_CHAT_WINDOW', @@ -259,4 +258,7 @@ export default { ADD_MACRO: 'ADD_MACRO', EDIT_MACRO: 'EDIT_MACRO', DELETE_MACRO: 'DELETE_MACRO', + + SET_CONVERSATION_WATCHERS_UI_FLAG: 'SET_CONVERSATION_WATCHERS_UI_FLAG', + SET_CONVERSATION_WATCHERS: 'SET_CONVERSATION_WATCHERS', }; diff --git a/app/javascript/packs/portal.js b/app/javascript/packs/portal.js index 2f7736deb..5c1867658 100644 --- a/app/javascript/packs/portal.js +++ b/app/javascript/packs/portal.js @@ -3,8 +3,10 @@ // a relevant structure within app/javascript and only use these pack files to reference // that code so that it will be compiled. +import Vue from 'vue'; import Rails from '@rails/ujs'; import Turbolinks from 'turbolinks'; +import PublicArticleSearch from '../portal/components/PublicArticleSearch.vue'; import { navigateToLocalePage } from '../portal/portalHelpers'; @@ -13,4 +15,21 @@ import '../portal/application.scss'; Rails.start(); Turbolinks.start(); -document.addEventListener('DOMContentLoaded', navigateToLocalePage); +const initPageSetUp = () => { + navigateToLocalePage(); + const isSearchContainerAvailable = document.querySelector('#search-wrap'); + if (isSearchContainerAvailable) { + new Vue({ + components: { PublicArticleSearch }, + template: '', + }).$mount('#search-wrap'); + } +}; + +document.addEventListener('DOMContentLoaded', () => { + initPageSetUp(); +}); + +document.addEventListener('turbolinks:load', () => { + initPageSetUp(); +}); diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js index 2fdd6c57b..13e41a98e 100755 --- a/app/javascript/packs/sdk.js +++ b/app/javascript/packs/sdk.js @@ -18,6 +18,11 @@ const runSDK = ({ baseUrl, websiteToken }) => { } const chatwootSettings = window.chatwootSettings || {}; + let locale = chatwootSettings.locale || 'en'; + if (chatwootSettings.useBrowserLanguage) { + locale = window.navigator.language.replace('-', '_'); + } + window.$chatwoot = { baseUrl, hasLoaded: false, @@ -25,7 +30,8 @@ const runSDK = ({ baseUrl, websiteToken }) => { isOpen: false, position: chatwootSettings.position === 'left' ? 'left' : 'right', websiteToken, - locale: chatwootSettings.locale, + locale, + useBrowserLanguage: chatwootSettings.useBrowserLanguage || false, type: getBubbleView(chatwootSettings.type), launcherTitle: chatwootSettings.launcherTitle || '', showPopoutButton: chatwootSettings.showPopoutButton || false, @@ -58,7 +64,7 @@ const runSDK = ({ baseUrl, websiteToken }) => { IFrameHelper.events.popoutChatWindow({ baseUrl: window.$chatwoot.baseUrl, websiteToken: window.$chatwoot.websiteToken, - locale: window.$chatwoot.locale, + locale, }); }, diff --git a/app/javascript/portal/api/article.js b/app/javascript/portal/api/article.js new file mode 100644 index 000000000..d28f53c88 --- /dev/null +++ b/app/javascript/portal/api/article.js @@ -0,0 +1,14 @@ +import axios from 'axios'; + +class ArticlesAPI { + constructor() { + this.baseUrl = ''; + } + + searchArticles(portalSlug, locale, query) { + let baseUrl = `${this.baseUrl}/hc/${portalSlug}/${locale}/articles.json?query=${query}`; + return axios.get(baseUrl); + } +} + +export default new ArticlesAPI(); diff --git a/app/javascript/portal/components/PublicArticleSearch.vue b/app/javascript/portal/components/PublicArticleSearch.vue new file mode 100644 index 000000000..4ced0665b --- /dev/null +++ b/app/javascript/portal/components/PublicArticleSearch.vue @@ -0,0 +1,129 @@ + + + + diff --git a/app/javascript/portal/components/PublicSearchInput.vue b/app/javascript/portal/components/PublicSearchInput.vue new file mode 100644 index 000000000..5183f3293 --- /dev/null +++ b/app/javascript/portal/components/PublicSearchInput.vue @@ -0,0 +1,60 @@ + + + diff --git a/app/javascript/portal/components/SearchSuggestions.vue b/app/javascript/portal/components/SearchSuggestions.vue new file mode 100644 index 000000000..838d4ba7e --- /dev/null +++ b/app/javascript/portal/components/SearchSuggestions.vue @@ -0,0 +1,103 @@ + + + diff --git a/app/javascript/portal/portalHelpers.js b/app/javascript/portal/portalHelpers.js index d31d1b6ba..647059b73 100644 --- a/app/javascript/portal/portalHelpers.js +++ b/app/javascript/portal/portalHelpers.js @@ -1,8 +1,13 @@ export const navigateToLocalePage = () => { const allLocaleSwitcher = document.querySelector('.locale-switcher'); + if (!allLocaleSwitcher) { + return false; + } + const { portalSlug } = allLocaleSwitcher.dataset; allLocaleSwitcher.addEventListener('change', event => { window.location = `/hc/${portalSlug}/${event.target.value}/`; }); + return false; }; diff --git a/app/javascript/shared/assets/stylesheets/border-radius.scss b/app/javascript/shared/assets/stylesheets/border-radius.scss index 69a2a804a..76ea3c731 100644 --- a/app/javascript/shared/assets/stylesheets/border-radius.scss +++ b/app/javascript/shared/assets/stylesheets/border-radius.scss @@ -1,8 +1,8 @@ :root { - // border-radius - --border-radius-small: 0.3rem; - --border-radius-normal: 0.5rem; - --border-radius-medium: 0.7rem; - --border-radius-large: 0.9rem; - --border-radius-rounded: 50%; + --border-radius-small: 0.3rem; + --border-radius-normal: 0.5rem; + --border-radius-medium: 0.7rem; + --border-radius-large: 0.9rem; + --border-radius-full: 10rem; + --border-radius-rounded: 50%; } diff --git a/app/javascript/shared/assets/stylesheets/spacing.scss b/app/javascript/shared/assets/stylesheets/spacing.scss index c556c65b8..7ef494a7a 100644 --- a/app/javascript/shared/assets/stylesheets/spacing.scss +++ b/app/javascript/shared/assets/stylesheets/spacing.scss @@ -16,9 +16,10 @@ --space-jumbo: 6.4rem; --space-mega: 10rem; --space-giga: 24rem; - + --space-minus-micro: -0.2rem; --space-minus-smaller: -0.4rem; + --space-minus-half: -0.5rem; --space-minus-small: -0.8rem; --space-minus-one: -1rem; --space-minus-slab: -1.2rem; diff --git a/app/javascript/shared/components/CardButton.vue b/app/javascript/shared/components/CardButton.vue index d6d116ade..9eb443568 100644 --- a/app/javascript/shared/components/CardButton.vue +++ b/app/javascript/shared/components/CardButton.vue @@ -4,6 +4,11 @@ :key="action.uri" class="action-button button" :href="action.uri" + :style="{ + background: widgetColor, + borderColor: widgetColor, + color: textColor, + }" target="_blank" rel="noopener nofollow noreferrer" > @@ -13,13 +18,15 @@ v-else :key="action.payload" class="action-button button" + :style="{ borderColor: widgetColor, color: widgetColor }" @click="onClick" > {{ action.text }} - @@ -171,14 +175,19 @@ export default { width: 100%; &.active { - background-color: var(--w-25); - color: var(--w-800); + background: var(--s-25); + border-color: var(--s-50); font-weight: var(--font-weight-medium); } &:focus { background-color: var(--color-background-light); } + + &:hover { + color: var(--s-800); + background-color: var(--color-background); + } } .user-wrap { @@ -191,6 +200,7 @@ export default { justify-content: space-between; min-width: 0; width: 100%; + align-items: center; } .name { diff --git a/app/javascript/shared/constants/messages.js b/app/javascript/shared/constants/messages.js index ef3c0c142..ef77f5364 100644 --- a/app/javascript/shared/constants/messages.js +++ b/app/javascript/shared/constants/messages.js @@ -10,6 +10,13 @@ export const MESSAGE_TYPE = { ACTIVITY: 2, TEMPLATE: 3, }; + +export const CONVERSATION_STATUS = { + OPEN: 'open', + RESOLVED: 'resolved', + PENDING: 'pending', + SNOOZED: 'snoozed', +}; // Size in mega bytes export const MAXIMUM_FILE_UPLOAD_SIZE = 40; export const MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL = 5; diff --git a/app/javascript/shared/helpers/AudioNotificationHelper.js b/app/javascript/shared/helpers/AudioNotificationHelper.js index 7db280fa2..a80a12e14 100644 --- a/app/javascript/shared/helpers/AudioNotificationHelper.js +++ b/app/javascript/shared/helpers/AudioNotificationHelper.js @@ -4,30 +4,46 @@ import { IFrameHelper } from 'widget/helpers/utils'; import { showBadgeOnFavicon } from './faviconHelper'; export const initOnEvents = ['click', 'touchstart', 'keypress', 'keydown']; + +export const getAudioContext = () => { + let audioCtx; + try { + audioCtx = new (window.AudioContext || window.webkitAudioContext)(); + } catch { + // AudioContext is not available. + } + return audioCtx; +}; + export const getAlertAudio = async (baseUrl = '', type = 'dashboard') => { - const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); + const audioCtx = getAudioContext(); + const playsound = audioBuffer => { window.playAudioAlert = () => { - const source = audioCtx.createBufferSource(); - source.buffer = audioBuffer; - source.connect(audioCtx.destination); - source.loop = false; - source.start(); + if (audioCtx) { + const source = audioCtx.createBufferSource(); + source.buffer = audioBuffer; + source.connect(audioCtx.destination); + source.loop = false; + source.start(); + } }; }; - const resourceUrl = `${baseUrl}/audio/${type}/ding.mp3`; - const audioRequest = new Request(resourceUrl); + if (audioCtx) { + const resourceUrl = `${baseUrl}/audio/${type}/ding.mp3`; + const audioRequest = new Request(resourceUrl); - fetch(audioRequest) - .then(response => response.arrayBuffer()) - .then(buffer => { - audioCtx.decodeAudioData(buffer).then(playsound); - return new Promise(res => res()); - }) - .catch(() => { - // error - }); + fetch(audioRequest) + .then(response => response.arrayBuffer()) + .then(buffer => { + audioCtx.decodeAudioData(buffer).then(playsound); + return new Promise(res => res()); + }) + .catch(() => { + // error + }); + } }; export const notificationEnabled = (enableAudioAlerts, id, userId) => { diff --git a/app/javascript/shared/helpers/FileHelper.js b/app/javascript/shared/helpers/FileHelper.js index d9ca9f943..e58f52f16 100644 --- a/app/javascript/shared/helpers/FileHelper.js +++ b/app/javascript/shared/helpers/FileHelper.js @@ -11,11 +11,7 @@ export const formatBytes = (bytes, decimals = 2) => { }; export const fileSizeInMegaBytes = bytes => { - if (bytes === 0) { - return 0; - } - const sizeInMB = (bytes / (1024 * 1024)).toFixed(2); - return sizeInMB; + return bytes / (1024 * 1024); }; export const checkFileSizeLimit = (file, maximumUploadLimit) => { diff --git a/app/javascript/shared/helpers/specs/FileHelper.spec.js b/app/javascript/shared/helpers/specs/FileHelper.spec.js index a0d1ac52f..750eab52c 100644 --- a/app/javascript/shared/helpers/specs/FileHelper.spec.js +++ b/app/javascript/shared/helpers/specs/FileHelper.spec.js @@ -24,7 +24,7 @@ describe('#File Helpers', () => { expect(fileSizeInMegaBytes(0)).toBe(0); }); it('should return 19.07 if 20000000 is passed', () => { - expect(fileSizeInMegaBytes(20000000)).toBe('19.07'); + expect(fileSizeInMegaBytes(20000000)).toBeCloseTo(19.07, 2); }); }); describe('checkFileSizeLimit', () => { diff --git a/app/javascript/shared/mixins/specs/automationFixtures.js b/app/javascript/shared/mixins/specs/automationFixtures.js new file mode 100644 index 000000000..99bb9fd9d --- /dev/null +++ b/app/javascript/shared/mixins/specs/automationFixtures.js @@ -0,0 +1,763 @@ +import allLanguages from '../../../dashboard/components/widgets/conversation/advancedFilterItems/languages.js'; + +import allCountries from '../../../shared/constants/countries.js'; + +export const customAttributes = [ + { + id: 1, + attribute_display_name: 'Signed Up At', + attribute_display_type: 'date', + attribute_description: 'This is a test', + attribute_key: 'signed_up_at', + attribute_values: [], + attribute_model: 'conversation_attribute', + default_value: null, + created_at: '2022-01-26T08:06:39.470Z', + updated_at: '2022-01-26T08:06:39.470Z', + }, + { + id: 2, + attribute_display_name: 'Prime User', + attribute_display_type: 'checkbox', + attribute_description: 'Test', + attribute_key: 'prime_user', + attribute_values: [], + attribute_model: 'contact_attribute', + default_value: null, + created_at: '2022-01-26T08:07:29.664Z', + updated_at: '2022-01-26T08:07:29.664Z', + }, + { + id: 3, + attribute_display_name: 'Test', + attribute_display_type: 'text', + attribute_description: 'Test', + attribute_key: 'test', + attribute_values: [], + attribute_model: 'conversation_attribute', + default_value: null, + created_at: '2022-01-26T08:07:58.325Z', + updated_at: '2022-01-26T08:07:58.325Z', + }, + { + id: 4, + attribute_display_name: 'Link', + attribute_display_type: 'link', + attribute_description: 'Test', + attribute_key: 'link', + attribute_values: [], + attribute_model: 'conversation_attribute', + default_value: null, + created_at: '2022-02-07T07:31:51.562Z', + updated_at: '2022-02-07T07:31:51.562Z', + }, + { + id: 5, + attribute_display_name: 'My List', + attribute_display_type: 'list', + attribute_description: 'This is a sample list', + attribute_key: 'my_list', + attribute_values: ['item1', 'item2', 'item3'], + attribute_model: 'conversation_attribute', + default_value: null, + created_at: '2022-02-21T20:31:34.175Z', + updated_at: '2022-02-21T20:31:34.175Z', + }, + { + id: 6, + attribute_display_name: 'My Check', + attribute_display_type: 'checkbox', + attribute_description: 'Test Checkbox', + attribute_key: 'my_check', + attribute_values: [], + attribute_model: 'conversation_attribute', + default_value: null, + created_at: '2022-02-21T20:31:53.385Z', + updated_at: '2022-02-21T20:31:53.385Z', + }, + { + id: 7, + attribute_display_name: 'ConList', + attribute_display_type: 'list', + attribute_description: 'This is a test list\n', + attribute_key: 'conlist', + attribute_values: ['Hello', 'Test', 'Test2'], + attribute_model: 'contact_attribute', + default_value: null, + created_at: '2022-02-28T12:58:05.005Z', + updated_at: '2022-02-28T12:58:05.005Z', + }, + { + id: 8, + attribute_display_name: 'asdf', + attribute_display_type: 'link', + attribute_description: 'This is a some text', + attribute_key: 'asdf', + attribute_values: [], + attribute_model: 'contact_attribute', + default_value: null, + created_at: '2022-04-21T05:48:16.168Z', + updated_at: '2022-04-21T05:48:16.168Z', + }, +]; +export const emptyAutomation = { + name: null, + description: null, + event_name: 'conversation_created', + conditions: [ + { + attribute_key: 'status', + filter_operator: 'equal_to', + values: '', + query_operator: 'and', + }, + ], + actions: [ + { + action_name: 'assign_team', + action_params: [], + }, + ], +}; +export const filterAttributes = [ + { + key: 'status', + name: 'Status', + attributeI18nKey: 'STATUS', + inputType: 'multi_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'browser_language', + name: 'Browser Language', + attributeI18nKey: 'BROWSER_LANGUAGE', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'country_code', + name: 'Country', + attributeI18nKey: 'COUNTRY_NAME', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'referer', + name: 'Referrer Link', + attributeI18nKey: 'REFERER_LINK', + inputType: 'plain_text', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + { value: 'contains', label: 'Contains' }, + { value: 'does_not_contain', label: 'Does not contain' }, + ], + }, + { + key: 'inbox_id', + name: 'Inbox', + attributeI18nKey: 'INBOX', + inputType: 'multi_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'conversation_custom_attribute', + name: 'Conversation Custom Attributes', + disabled: true, + }, + { + key: 'signed_up_at', + name: 'Signed Up At', + inputType: 'date', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + { value: 'is_present', label: 'Is present' }, + { value: 'is_not_present', label: 'Is not present' }, + { value: 'is_greater_than', label: 'Is greater than' }, + { value: 'is_less_than', label: 'Is less than' }, + ], + }, + { + key: 'test', + name: 'Test', + inputType: 'plain_text', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + { value: 'is_present', label: 'Is present' }, + { value: 'is_not_present', label: 'Is not present' }, + ], + }, + { + key: 'link', + name: 'Link', + inputType: 'plain_text', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'my_list', + name: 'My List', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'my_check', + name: 'My Check', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'contact_custom_attribute', + name: 'Contact Custom Attributes', + disabled: true, + }, + { + key: 'prime_user', + name: 'Prime User', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'conlist', + name: 'ConList', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, + { + key: 'asdf', + name: 'asdf', + inputType: 'plain_text', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, +]; +export const automation = { + id: 164, + account_id: 1, + name: 'Attachment', + description: 'Yo', + event_name: 'conversation_created', + conditions: [ + { + values: [{ id: 'open', name: 'Open' }], + attribute_key: 'status', + filter_operator: 'equal_to', + query_operator: 'and', + }, + ], + actions: [{ action_name: 'send_attachment', action_params: [59] }], + created_on: 1652717181, + active: true, + files: [ + { + id: 50, + automation_rule_id: 164, + file_type: 'image/jpeg', + account_id: 1, + file_url: + 'http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBRQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--965b4c27f4c5e47c526f0f38266b25417b72e5dd/pfp.jpeg', + blob_id: 59, + filename: 'pfp.jpeg', + }, + ], +}; +export const agents = [ + { + id: 1, + account_id: 1, + availability_status: 'online', + auto_offline: true, + confirmed: true, + email: 'john@acme.inc', + available_name: 'Fayaz', + name: 'Fayaz', + role: 'administrator', + thumbnail: + 'https://www.gravatar.com/avatar/0d722ac7bc3b3c92c030d0da9690d981?d=404', + }, + { + id: 5, + account_id: 1, + availability_status: 'offline', + auto_offline: true, + confirmed: true, + email: 'john@doe.com', + available_name: 'John', + name: 'John', + role: 'agent', + thumbnail: + 'https://www.gravatar.com/avatar/6a6c19fea4a3676970167ce51f39e6ee?d=404', + }, +]; +export const booleanFilterOptions = [ + { + id: true, + name: 'True', + }, + { + id: false, + name: 'False', + }, +]; +export const teams = [ + { + id: 1, + name: 'sales team', + description: 'This is our internal sales team', + allow_auto_assign: true, + account_id: 1, + is_member: true, + }, + { + id: 2, + name: 'fayaz', + description: 'Test', + allow_auto_assign: true, + account_id: 1, + is_member: false, + }, +]; +export const campaigns = []; +export const contacts = [ + { + additional_attributes: {}, + availability_status: 'offline', + email: 'asd123123@asd.com', + id: 32, + name: 'asd123123', + phone_number: null, + identifier: null, + thumbnail: + 'https://www.gravatar.com/avatar/46000d9a1eef3e24a02ca9d6c2a8f494?d=404', + custom_attributes: {}, + conversations_count: 5, + last_activity_at: 1650519706, + }, + { + additional_attributes: {}, + availability_status: 'offline', + email: 'barry_allen@a.com', + id: 29, + name: 'barry_allen', + phone_number: null, + identifier: null, + thumbnail: + 'https://www.gravatar.com/avatar/ab5ff99efa3bc1f74db1dc2885f9e2ce?d=404', + custom_attributes: {}, + conversations_count: 1, + last_activity_at: 1643728899, + }, +]; +export const inboxes = [ + { + id: 1, + avatar_url: '', + channel_id: 1, + name: 'Acme Support', + channel_type: 'Channel::WebWidget', + greeting_enabled: false, + greeting_message: '', + working_hours_enabled: false, + enable_email_collect: true, + csat_survey_enabled: true, + enable_auto_assignment: true, + out_of_office_message: + 'We are unavailable at the moment. Leave a message we will respond once we are back.', + working_hours: [ + { + day_of_week: 0, + closed_all_day: true, + open_hour: null, + open_minutes: null, + close_hour: null, + close_minutes: null, + open_all_day: false, + }, + { + day_of_week: 1, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 2, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 3, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 4, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 5, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 6, + closed_all_day: true, + open_hour: null, + open_minutes: null, + close_hour: null, + close_minutes: null, + open_all_day: false, + }, + ], + timezone: 'America/Los_Angeles', + callback_webhook_url: null, + allow_messages_after_resolved: true, + widget_color: '#1f93ff', + website_url: 'https://acme.inc', + hmac_mandatory: false, + welcome_title: '', + welcome_tagline: '', + web_widget_script: + '\n \n ', + website_token: 'yZ7USzaEs7hrwUAHLGwjbxJ1', + selected_feature_flags: ['attachments', 'emoji_picker', 'end_conversation'], + reply_time: 'in_a_few_minutes', + hmac_token: 'rRJW1BHu4aFMMey4SE7tWr8A', + pre_chat_form_enabled: false, + pre_chat_form_options: { + pre_chat_fields: [ + { + name: 'emailAddress', + type: 'email', + label: 'Email Id', + enabled: false, + required: true, + field_type: 'standard', + }, + { + name: 'fullName', + type: 'text', + label: 'Full name', + enabled: false, + required: false, + field_type: 'standard', + }, + { + name: 'phoneNumber', + type: 'text', + label: 'Phone number', + enabled: false, + required: false, + field_type: 'standard', + }, + ], + pre_chat_message: 'Share your queries or comments here.', + }, + continuity_via_email: true, + phone_number: null, + }, + { + id: 2, + avatar_url: '', + channel_id: 1, + name: 'Email', + channel_type: 'Channel::Email', + greeting_enabled: false, + greeting_message: null, + working_hours_enabled: false, + enable_email_collect: true, + csat_survey_enabled: false, + enable_auto_assignment: true, + out_of_office_message: null, + working_hours: [ + { + day_of_week: 0, + closed_all_day: true, + open_hour: null, + open_minutes: null, + close_hour: null, + close_minutes: null, + open_all_day: false, + }, + { + day_of_week: 1, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 2, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 3, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 4, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 5, + closed_all_day: false, + open_hour: 9, + open_minutes: 0, + close_hour: 17, + close_minutes: 0, + open_all_day: false, + }, + { + day_of_week: 6, + closed_all_day: true, + open_hour: null, + open_minutes: null, + close_hour: null, + close_minutes: null, + open_all_day: false, + }, + ], + timezone: 'UTC', + callback_webhook_url: null, + allow_messages_after_resolved: true, + widget_color: null, + website_url: null, + hmac_mandatory: null, + welcome_title: null, + welcome_tagline: null, + web_widget_script: null, + website_token: null, + selected_feature_flags: null, + reply_time: null, + phone_number: null, + forward_to_email: '9ae8ebb96c7f2d6705009f5add6d1a2d@false', + email: 'fayaz@chatwoot.com', + imap_login: '', + imap_password: '', + imap_address: '', + imap_port: 0, + imap_enabled: false, + imap_enable_ssl: true, + smtp_login: '', + smtp_password: '', + smtp_address: '', + smtp_port: 0, + smtp_enabled: false, + smtp_domain: '', + smtp_enable_ssl_tls: false, + smtp_enable_starttls_auto: true, + smtp_openssl_verify_mode: 'none', + smtp_authentication: 'login', + }, +]; +export const labels = [ + { + id: 2, + title: 'testlabel', + }, + { + id: 1, + title: 'snoozes', + }, +]; +export const statusFilterOptions = [ + { id: 'open', name: 'Open' }, + { id: 'resolved', name: 'Resolved' }, + { id: 'pending', name: 'Pending' }, + { id: 'snoozed', name: 'Snoozed' }, + { id: 'all', name: 'All' }, +]; +export const languages = allLanguages; +export const countries = allCountries; +export const MESSAGE_CONDITION_VALUES = [ + { + id: 'incoming', + name: 'Incoming Message', + }, + { + id: 'outgoing', + name: 'Outgoing Message', + }, +]; + +export const automationToSubmit = { + name: 'Fayaz', + description: 'Hello', + event_name: 'conversation_created', + conditions: [ + { + attribute_key: 'status', + filter_operator: 'equal_to', + values: [{ id: 'open', name: 'Open' }], + query_operator: 'and', + custom_attribute_type: '', + }, + ], + actions: [ + { action_name: 'add_label', action_params: [{ id: 2, name: 'testlabel' }] }, + ], +}; + +export const savedAutomation = { + id: 165, + account_id: 1, + name: 'Fayaz', + description: 'Hello', + event_name: 'conversation_created', + conditions: [ + { + values: ['open'], + attribute_key: 'status', + filter_operator: 'equal_to', + }, + ], + actions: [ + { + action_name: 'add_label', + action_params: [2], + }, + ], + created_on: 1652776043, + active: true, +}; + +export const contactAttrs = [ + { + key: 'contact_list', + name: 'Contact List', + inputType: 'search_select', + filterOperators: [ + { + value: 'equal_to', + label: 'Equal to', + }, + { + value: 'not_equal_to', + label: 'Not equal to', + }, + ], + }, +]; +export const conversationAttrs = [ + { + key: 'text_attr', + name: 'Text Attr', + inputType: 'plain_text', + filterOperators: [ + { + value: 'equal_to', + label: 'Equal to', + }, + { + value: 'not_equal_to', + label: 'Not equal to', + }, + { + value: 'is_present', + label: 'Is present', + }, + { + value: 'is_not_present', + label: 'Is not present', + }, + ], + }, +]; +export const expectedOutputForCustomAttributeGenerator = [ + { + key: 'conversation_custom_attribute', + name: 'Conversation Custom Attributes', + disabled: true, + }, + { + key: 'text_attr', + name: 'Text Attr', + inputType: 'plain_text', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + { value: 'is_present', label: 'Is present' }, + { value: 'is_not_present', label: 'Is not present' }, + ], + }, + { + key: 'contact_custom_attribute', + name: 'Contact Custom Attributes', + disabled: true, + }, + { + key: 'contact_list', + name: 'Contact List', + inputType: 'search_select', + filterOperators: [ + { value: 'equal_to', label: 'Equal to' }, + { value: 'not_equal_to', label: 'Not equal to' }, + ], + }, +]; diff --git a/app/javascript/shared/mixins/specs/automationHelper.spec.js b/app/javascript/shared/mixins/specs/automationHelper.spec.js new file mode 100644 index 000000000..468f22d96 --- /dev/null +++ b/app/javascript/shared/mixins/specs/automationHelper.spec.js @@ -0,0 +1,323 @@ +import * as helpers from 'dashboard/helper/automationHelper'; +import { + OPERATOR_TYPES_1, + OPERATOR_TYPES_3, + OPERATOR_TYPES_4, +} from 'dashboard/routes/dashboard/settings/automation/operators'; +import { + customAttributes, + labels, + automation, + contactAttrs, + conversationAttrs, + expectedOutputForCustomAttributeGenerator, +} from './automationFixtures'; +import { AUTOMATIONS } from 'dashboard/routes/dashboard/settings/automation/constants'; + +describe('automationMethodsMixin', () => { + it('getCustomAttributeInputType returns the attribute input type', () => { + expect(helpers.getCustomAttributeInputType('date')).toEqual('date'); + expect(helpers.getCustomAttributeInputType('date')).not.toEqual( + 'some_random_value' + ); + expect(helpers.getCustomAttributeInputType('text')).toEqual('plain_text'); + expect(helpers.getCustomAttributeInputType('list')).toEqual( + 'search_select' + ); + expect(helpers.getCustomAttributeInputType('checkbox')).toEqual( + 'search_select' + ); + expect(helpers.getCustomAttributeInputType('some_random_text')).toEqual( + 'plain_text' + ); + }); + it('isACustomAttribute returns the custom attribute value if true', () => { + expect( + helpers.isACustomAttribute(customAttributes, 'signed_up_at') + ).toBeTruthy(); + expect(helpers.isACustomAttribute(customAttributes, 'status')).toBeFalsy(); + }); + it('getCustomAttributeListDropdownValues returns the attribute dropdown values', () => { + const myListValues = [ + { + id: 'item1', + name: 'item1', + }, + { + id: 'item2', + name: 'item2', + }, + { + id: 'item3', + name: 'item3', + }, + ]; + expect( + helpers.getCustomAttributeListDropdownValues(customAttributes, 'my_list') + ).toEqual(myListValues); + }); + + it('isCustomAttributeCheckbox checks if attribute is a checkbox', () => { + expect( + helpers.isCustomAttributeCheckbox(customAttributes, 'prime_user') + .attribute_display_type + ).toEqual('checkbox'); + expect( + helpers.isCustomAttributeCheckbox(customAttributes, 'my_check') + .attribute_display_type + ).toEqual('checkbox'); + expect( + helpers.isCustomAttributeCheckbox(customAttributes, 'my_list') + ).not.toEqual('checkbox'); + }); + it('isCustomAttributeList checks if attribute is a list', () => { + expect( + helpers.isCustomAttributeList(customAttributes, 'my_list') + .attribute_display_type + ).toEqual('list'); + }); + it('getOperatorTypes returns the correct custom attribute operators', () => { + expect(helpers.getOperatorTypes('list')).toEqual(OPERATOR_TYPES_1); + expect(helpers.getOperatorTypes('text')).toEqual(OPERATOR_TYPES_3); + expect(helpers.getOperatorTypes('number')).toEqual(OPERATOR_TYPES_1); + expect(helpers.getOperatorTypes('link')).toEqual(OPERATOR_TYPES_1); + expect(helpers.getOperatorTypes('date')).toEqual(OPERATOR_TYPES_4); + expect(helpers.getOperatorTypes('checkbox')).toEqual(OPERATOR_TYPES_1); + expect(helpers.getOperatorTypes('some_random')).toEqual(OPERATOR_TYPES_1); + }); + it('generateConditionOptions returns expected conditions options array', () => { + const testConditions = [ + { + id: 123, + title: 'Fayaz', + email: 'test@test.com', + }, + { + title: 'John', + id: 324, + email: 'test@john.com', + }, + ]; + + const expectedConditions = [ + { + id: 123, + name: 'Fayaz', + }, + { + id: 324, + name: 'John', + }, + ]; + expect(helpers.generateConditionOptions(testConditions)).toEqual( + expectedConditions + ); + }); + it('getActionOptions returns expected actions options array', () => { + const expectedOptions = [ + { + id: 'testlabel', + name: 'testlabel', + }, + { + id: 'snoozes', + name: 'snoozes', + }, + ]; + expect(helpers.getActionOptions({ labels, type: 'add_label' })).toEqual( + expectedOptions + ); + }); + it('getConditionOptions returns expected conditions options', () => { + const testOptions = [ + { + id: 'open', + name: 'Open', + }, + { + id: 'resolved', + name: 'Resolved', + }, + { + id: 'pending', + name: 'Pending', + }, + { + id: 'snoozed', + name: 'Snoozed', + }, + { + id: 'all', + name: 'All', + }, + ]; + const expectedOptions = [ + { + id: 'open', + name: 'Open', + }, + { + id: 'resolved', + name: 'Resolved', + }, + { + id: 'pending', + name: 'Pending', + }, + { + id: 'snoozed', + name: 'Snoozed', + }, + { + id: 'all', + name: 'All', + }, + ]; + expect( + helpers.getConditionOptions({ + customAttributes, + campaigns: [], + statusFilterOptions: testOptions, + type: 'status', + }) + ).toEqual(expectedOptions); + }); + it('getFileName returns the correct file name', () => { + expect( + helpers.getFileName(automation.actions[0], automation.files) + ).toEqual('pfp.jpeg'); + }); + it('getDefaultConditions returns the resp default condition model', () => { + const messageCreatedModel = [ + { + attribute_key: 'message_type', + filter_operator: 'equal_to', + values: '', + query_operator: 'and', + custom_attribute_type: '', + }, + ]; + const genericConditionModel = [ + { + attribute_key: 'status', + filter_operator: 'equal_to', + values: '', + query_operator: 'and', + custom_attribute_type: '', + }, + ]; + expect(helpers.getDefaultConditions('message_created')).toEqual( + messageCreatedModel + ); + expect(helpers.getDefaultConditions()).toEqual(genericConditionModel); + }); + it('getDefaultActions returns the resp default action model', () => { + const genericActionModel = [ + { + action_name: 'assign_team', + action_params: [], + }, + ]; + expect(helpers.getDefaultActions()).toEqual(genericActionModel); + }); + it('filterCustomAttributes filters the raw custom attributes', () => { + const filteredAttributes = [ + { key: 'signed_up_at', name: 'Signed Up At', type: 'date' }, + { key: 'prime_user', name: 'Prime User', type: 'checkbox' }, + { key: 'test', name: 'Test', type: 'text' }, + { key: 'link', name: 'Link', type: 'link' }, + { key: 'my_list', name: 'My List', type: 'list' }, + { key: 'my_check', name: 'My Check', type: 'checkbox' }, + { key: 'conlist', name: 'ConList', type: 'list' }, + { key: 'asdf', name: 'asdf', type: 'link' }, + ]; + expect(helpers.filterCustomAttributes(customAttributes)).toEqual( + filteredAttributes + ); + }); + it('getStandardAttributeInputType returns the resp default action model', () => { + expect( + helpers.getStandardAttributeInputType( + AUTOMATIONS, + 'message_created', + 'message_type' + ) + ).toEqual('search_select'); + expect( + helpers.getStandardAttributeInputType( + AUTOMATIONS, + 'conversation_created', + 'status' + ) + ).toEqual('multi_select'); + expect( + helpers.getStandardAttributeInputType( + AUTOMATIONS, + 'conversation_updated', + 'referer' + ) + ).toEqual('plain_text'); + }); + it('generateAutomationPayload returns the resp default action model', () => { + const testPayload = { + name: 'Test', + description: 'This is a test', + event_name: 'conversation_created', + conditions: [ + { + attribute_key: 'status', + filter_operator: 'equal_to', + values: [{ id: 'open', name: 'Open' }], + query_operator: 'and', + }, + ], + actions: [ + { + action_name: 'add_label', + action_params: [{ id: 2, name: 'testlabel' }], + }, + ], + }; + const expectedPayload = { + name: 'Test', + description: 'This is a test', + event_name: 'conversation_created', + conditions: [ + { + attribute_key: 'status', + filter_operator: 'equal_to', + values: ['open'], + }, + ], + actions: [ + { + action_name: 'add_label', + action_params: [2], + }, + ], + }; + expect(helpers.generateAutomationPayload(testPayload)).toEqual( + expectedPayload + ); + }); + it('isCustomAttribute returns the resp default action model', () => { + const attrs = helpers.filterCustomAttributes(customAttributes); + expect(helpers.isCustomAttribute(attrs, 'my_list')).toBeTruthy(); + expect(helpers.isCustomAttribute(attrs, 'my_check')).toBeTruthy(); + expect(helpers.isCustomAttribute(attrs, 'signed_up_at')).toBeTruthy(); + expect(helpers.isCustomAttribute(attrs, 'link')).toBeTruthy(); + expect(helpers.isCustomAttribute(attrs, 'prime_user')).toBeTruthy(); + expect(helpers.isCustomAttribute(attrs, 'hello')).toBeFalsy(); + }); + + it('generateCustomAttributes generates and returns correct condition attribute', () => { + expect( + helpers.generateCustomAttributes( + conversationAttrs, + contactAttrs, + 'Conversation Custom Attributes', + 'Contact Custom Attributes' + ) + ).toEqual(expectedOutputForCustomAttributeGenerator); + }); +}); diff --git a/app/javascript/shared/mixins/specs/automationMixin.spec.js b/app/javascript/shared/mixins/specs/automationMixin.spec.js new file mode 100644 index 000000000..e0f72c0d3 --- /dev/null +++ b/app/javascript/shared/mixins/specs/automationMixin.spec.js @@ -0,0 +1,448 @@ +import methodsMixin from '../../../dashboard/mixins/automations/methodsMixin'; +import validationsMixin from '../../../dashboard/mixins/automations/validationsMixin'; +import { + automation, + customAttributes, + agents, + booleanFilterOptions, + teams, + labels, + statusFilterOptions, + campaigns, + contacts, + inboxes, + languages, + countries, + MESSAGE_CONDITION_VALUES, + automationToSubmit, + savedAutomation, +} from './automationFixtures'; +import { + AUTOMATIONS, + AUTOMATION_ACTION_TYPES, +} from '../../../dashboard/routes/dashboard/settings/automation/constants.js'; + +import { createWrapper, createLocalVue } from '@vue/test-utils'; +import Vue from 'vue'; +import Vuex from 'vuex'; +const localVue = createLocalVue(); +localVue.use(Vuex); + +// Vuelidate required to test submit method +import Vuelidate from 'vuelidate'; +Vue.use(Vuelidate); + +const createComponent = ( + mixins, + data, + computed = {}, + methods = {}, + validations +) => { + const Component = { + render() {}, + mixins, + data, + computed, + methods, + validations, + }; + const Constructor = Vue.extend(Component); + const vm = new Constructor().$mount(); + return createWrapper(vm); +}; + +const generateComputedProperties = () => { + return { + statusFilterOptions() { + return statusFilterOptions; + }, + agents() { + return agents; + }, + customAttributes() { + return customAttributes; + }, + labels() { + return labels; + }, + teams() { + return teams; + }, + booleanFilterOptions() { + return booleanFilterOptions; + }, + campaigns() { + return campaigns; + }, + contacts() { + return contacts; + }, + inboxes() { + return inboxes; + }, + languages() { + return languages; + }, + countries() { + return countries; + }, + MESSAGE_CONDITION_VALUES() { + return MESSAGE_CONDITION_VALUES; + }, + }; +}; + +describe('automationMethodsMixin', () => { + it('getFileName returns the correct file name', () => { + const data = () => { + return {}; + }; + const wrapper = createComponent([methodsMixin], data); + expect( + wrapper.vm.getFileName(automation.actions[0], automation.files) + ).toEqual(automation.files[0].filename); + }); + + it('getAttributes returns all attributes', () => { + const data = () => { + return { + automationTypes: AUTOMATIONS, + }; + }; + const wrapper = createComponent([methodsMixin], data); + expect(wrapper.vm.getAttributes('conversation_created')).toEqual( + AUTOMATIONS.conversation_created.conditions + ); + }); + + it('getAttributes returns all respective attributes', () => { + const data = () => { + return { + allCustomAttributes: customAttributes, + automationTypes: AUTOMATIONS, + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + expect(wrapper.vm.getInputType('status')).toEqual('multi_select'); + expect(wrapper.vm.getInputType('my_list')).toEqual('search_select'); + }); + + it('getOperators returns all respective operators', () => { + const data = () => { + return { + allCustomAttributes: customAttributes, + automationTypes: AUTOMATIONS, + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + expect(wrapper.vm.getOperators('status')).toEqual( + AUTOMATIONS.conversation_created.conditions[0].filterOperators + ); + }); + + it('getAutomationType returns the correct automationType', () => { + const data = () => { + return { + automationTypes: AUTOMATIONS, + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + expect(wrapper.vm.getAutomationType('status')).toEqual( + AUTOMATIONS[automation.event_name].conditions[0] + ); + }); + + it('getConditionDropdownValues returns respective condition dropdown values', () => { + const computed = generateComputedProperties(); + const data = () => { + return { + allCustomAttributes: customAttributes, + }; + }; + const wrapper = createComponent([methodsMixin], data, computed); + expect(wrapper.vm.getConditionDropdownValues('status')).toEqual( + statusFilterOptions + ); + expect(wrapper.vm.getConditionDropdownValues('team_id')).toEqual(teams); + expect(wrapper.vm.getConditionDropdownValues('assignee_id')).toEqual( + agents + ); + expect(wrapper.vm.getConditionDropdownValues('contact')).toEqual(contacts); + expect(wrapper.vm.getConditionDropdownValues('inbox_id')).toEqual(inboxes); + expect(wrapper.vm.getConditionDropdownValues('campaigns')).toEqual( + campaigns + ); + expect(wrapper.vm.getConditionDropdownValues('browser_language')).toEqual( + languages + ); + expect(wrapper.vm.getConditionDropdownValues('country_code')).toEqual( + countries + ); + expect(wrapper.vm.getConditionDropdownValues('message_type')).toEqual( + MESSAGE_CONDITION_VALUES + ); + }); + + it('appendNewCondition appends a new condition to the automation data property', () => { + const condition = { + attribute_key: 'status', + filter_operator: 'equal_to', + values: '', + query_operator: 'and', + custom_attribute_type: '', + }; + const data = () => { + return { + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + wrapper.vm.appendNewCondition(); + expect(automation.conditions[automation.conditions.length - 1]).toEqual( + condition + ); + }); + + it('appendNewAction appends a new condition to the automation data property', () => { + const action = { + action_name: 'assign_team', + action_params: [], + }; + const data = () => { + return { + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + wrapper.vm.appendNewAction(); + expect(automation.actions[automation.actions.length - 1]).toEqual(action); + }); + + it('removeFilter removes the given condition in the automation', () => { + const data = () => { + return { + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + wrapper.vm.removeFilter(0); + expect(automation.conditions.length).toEqual(1); + }); + + it('removeAction removes the given action in the automation', () => { + const data = () => { + return { + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + wrapper.vm.removeAction(0); + expect(automation.actions.length).toEqual(1); + }); + + it('resetFilter resets the current automation conditions', () => { + const data = () => { + return { + automation: automationToSubmit, + automationTypes: AUTOMATIONS, + }; + }; + const conditionAfterReset = { + attribute_key: 'status', + filter_operator: 'equal_to', + values: '', + query_operator: 'and', + custom_attribute_type: '', + }; + const wrapper = createComponent([methodsMixin], data); + wrapper.vm.resetFilter(0, automationToSubmit.conditions[0]); + expect(automation.conditions[0]).toEqual(conditionAfterReset); + }); + + it('showUserInput returns boolean value based on the operator type', () => { + const data = () => { + return {}; + }; + const wrapper = createComponent([methodsMixin], data); + expect(wrapper.vm.showUserInput('is_present')).toBeFalsy(); + expect(wrapper.vm.showUserInput('is_not_present')).toBeFalsy(); + expect(wrapper.vm.showUserInput('equal_to')).toBeTruthy(); + expect(wrapper.vm.showUserInput('not_equal_to')).toBeTruthy(); + }); + + it('showActionInput returns boolean value based on the action type', () => { + const data = () => { + return { + automationActionTypes: AUTOMATION_ACTION_TYPES, + }; + }; + const wrapper = createComponent([methodsMixin], data); + expect(wrapper.vm.showActionInput('send_email_to_team')).toBeFalsy(); + expect(wrapper.vm.showActionInput('send_message')).toBeFalsy(); + expect(wrapper.vm.showActionInput('send_webhook_event')).toBeTruthy(); + expect(wrapper.vm.showActionInput('resolve_conversation')).toBeFalsy(); + expect(wrapper.vm.showActionInput('add_label')).toBeTruthy(); + }); + + it('resetAction resets the action to default state', () => { + const data = () => { + return { + automation, + }; + }; + const wrapper = createComponent([methodsMixin], data); + wrapper.vm.resetAction(0); + expect(automation.actions[0].action_params).toEqual([]); + }); + + it('manifestConditions resets the action to default state', () => { + const data = () => { + return { + automation: {}, + allCustomAttributes: customAttributes, + automationTypes: AUTOMATIONS, + }; + }; + const methods = { + getConditionDropdownValues() { + return statusFilterOptions; + }, + }; + + const manifestedConditions = [ + { + values: [ + { + id: 'open', + name: 'Open', + }, + ], + attribute_key: 'status', + filter_operator: 'equal_to', + query_operator: 'and', + }, + ]; + const wrapper = createComponent([methodsMixin], data, {}, methods); + expect(wrapper.vm.manifestConditions(savedAutomation)).toEqual( + manifestedConditions + ); + }); + + it('generateActionsArray return the manifested actions array', () => { + const data = () => { + return { + automationActionTypes: AUTOMATION_ACTION_TYPES, + }; + }; + const computed = { + labels() { + return labels; + }, + teams() { + return teams; + }, + }; + + const methods = { + getActionDropdownValues() { + return [ + { + id: 2, + name: 'testlabel', + }, + { + id: 1, + name: 'snoozes', + }, + ]; + }, + }; + const testAction = { + action_name: 'add_label', + action_params: [2], + }; + + const expectedActionArray = [ + { + id: 2, + name: 'testlabel', + }, + ]; + + const wrapper = createComponent([methodsMixin], data, computed, methods); + expect(wrapper.vm.generateActionsArray(testAction)).toEqual( + expectedActionArray + ); + }); + + it('manifestActions manifest the received action and generate the correct array', () => { + const data = () => { + return { + automation: {}, + allCustomAttributes: customAttributes, + automationTypes: AUTOMATIONS, + }; + }; + const methods = { + generateActionsArray() { + return [ + { + id: 2, + name: 'testlabel', + }, + ]; + }, + }; + const expectedActions = [ + { + action_name: 'add_label', + action_params: [ + { + id: 2, + name: 'testlabel', + }, + ], + }, + ]; + const wrapper = createComponent([methodsMixin], data, {}, methods); + expect(wrapper.vm.manifestActions(savedAutomation)).toEqual( + expectedActions + ); + }); + + it('getActionDropdownValues returns Action dropdown Values', () => { + const data = () => { + return {}; + }; + const computed = { + labels() { + return labels; + }, + teams() { + return teams; + }, + }; + const expectedActionDropdownValues = [ + { id: 'testlabel', name: 'testlabel' }, + { id: 'snoozes', name: 'snoozes' }, + ]; + const wrapper = createComponent([methodsMixin], data, computed); + expect(wrapper.vm.getActionDropdownValues('add_label')).toEqual( + expectedActionDropdownValues + ); + }); +}); + +describe('automationValidationsMixin', () => { + it('automationValidationsMixin is present', () => { + const data = () => { + return {}; + }; + const wrapper = createComponent([validationsMixin], data, {}, {}); + expect(typeof wrapper.vm.$options.validations).toBe('object'); + }); +}); diff --git a/app/javascript/survey/i18n/locale/is.json b/app/javascript/survey/i18n/locale/is.json new file mode 100644 index 000000000..2f16a5fa9 --- /dev/null +++ b/app/javascript/survey/i18n/locale/is.json @@ -0,0 +1,19 @@ +{ + "SURVEY": { + "DESCRIPTION": "Ef þú hefur tíma viljum við biðja þig um að skilja eftir endurgjöf eftir samtalið sem þú áttir við %{inboxName}.", + "RATING": { + "LABEL": "Gefðu samtalinu einkunn", + "SUCCESS_MESSAGE": "Takk fyrir" + }, + "FEEDBACK": { + "LABEL": "Hefur þú einhverjar athugasemdir?", + "PLACEHOLDER": "Athugasemd (valfrjálst)", + "BUTTON_TEXT": "Senda" + }, + "API": { + "SUCCESS_MESSAGE": "Könnunin var uppfærð", + "ERROR_MESSAGE": "Náði ekki að tengjast við Woot þjónin, Vinsamlegast reyndu aftur síðar" + } + }, + "POWERED_BY": "Keyrt af Chatwoot" +} diff --git a/app/javascript/widget/App.vue b/app/javascript/widget/App.vue index 17b610f09..7210cf654 100755 --- a/app/javascript/widget/App.vue +++ b/app/javascript/widget/App.vue @@ -134,10 +134,20 @@ export default { }); }); }, - setLocale(locale) { + setLocale(localeWithVariation) { const { enabledLanguages } = window.chatwootWebChannel; - if (enabledLanguages.some(lang => lang.iso_639_1_code === locale)) { - this.$root.$i18n.locale = locale; + const localeWithoutVariation = localeWithVariation.split('_')[0]; + const hasLocaleWithoutVariation = enabledLanguages.some( + lang => lang.iso_639_1_code === localeWithoutVariation + ); + const hasLocaleWithVariation = enabledLanguages.some( + lang => lang.iso_639_1_code === localeWithVariation + ); + + if (hasLocaleWithVariation) { + this.$root.$i18n.locale = localeWithVariation; + } else if (hasLocaleWithoutVariation) { + this.$root.$i18n.locale = localeWithoutVariation; } }, registerUnreadEvents() { diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss index 3f882eb38..a4957c3da 100755 --- a/app/javascript/widget/assets/scss/woot.scss +++ b/app/javascript/widget/assets/scss/woot.scss @@ -1,4 +1,5 @@ @import 'shared/assets/stylesheets/animations'; +@import 'shared/assets/stylesheets/colors'; @import 'reset'; @import 'tailwindcss/base'; diff --git a/app/javascript/widget/components/ChatAttachment.vue b/app/javascript/widget/components/ChatAttachment.vue index 0412ca5fb..bcf2e0ffa 100755 --- a/app/javascript/widget/components/ChatAttachment.vue +++ b/app/javascript/widget/components/ChatAttachment.vue @@ -1,5 +1,6 @@