diff --git a/app/javascript/dashboard/api/helpCenter/portals.js b/app/javascript/dashboard/api/helpCenter/portals.js index 594050cdf..ec9528f73 100644 --- a/app/javascript/dashboard/api/helpCenter/portals.js +++ b/app/javascript/dashboard/api/helpCenter/portals.js @@ -1,9 +1,14 @@ +/* global axios */ import ApiClient from '../ApiClient'; class PortalsAPI extends ApiClient { constructor() { super('portals', { accountScoped: true }); } + + updatePortal({ portalSlug, params }) { + return axios.patch(`${this.url}/${portalSlug}`, params); + } } export default PortalsAPI; diff --git a/app/javascript/dashboard/assets/scss/_utility-helpers.scss b/app/javascript/dashboard/assets/scss/_utility-helpers.scss index 4120af396..a54b43b2f 100644 --- a/app/javascript/dashboard/assets/scss/_utility-helpers.scss +++ b/app/javascript/dashboard/assets/scss/_utility-helpers.scss @@ -42,7 +42,6 @@ overflow: hidden; } - .border-right { border-right: 1px solid var(--color-border); } @@ -66,3 +65,13 @@ display: flex; justify-content: space-between; } + +.flex-end { + display: flex; + justify-content: end; +} + +.flex-align-center { + align-items: center; + display: flex; +} diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss index 15edb4e76..870caf7ee 100644 --- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss +++ b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss @@ -91,10 +91,11 @@ font-size: $font-size-default; line-height: 1; padding-left: $space-medium; + } - .completed { - color: $success-color; - } + .completed { + color: $success-color; + margin-left: $space-smaller; } p { diff --git a/app/javascript/dashboard/components/ui/Wizard.vue b/app/javascript/dashboard/components/ui/Wizard.vue index 370d3812a..0c0d1eccc 100644 --- a/app/javascript/dashboard/components/ui/Wizard.vue +++ b/app/javascript/dashboard/components/ui/Wizard.vue @@ -2,7 +2,7 @@
-

- {{ item.title }} +
+

+ {{ item.title }} +

-

+
{{ items.indexOf(item) + 1 }} diff --git a/app/javascript/dashboard/helper/labelColor.js b/app/javascript/dashboard/helper/labelColor.js new file mode 100644 index 000000000..e779c50f0 --- /dev/null +++ b/app/javascript/dashboard/helper/labelColor.js @@ -0,0 +1,8 @@ +export const getRandomColor = () => { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i += 1) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +}; diff --git a/app/javascript/dashboard/i18n/locale/en/helpCenter.json b/app/javascript/dashboard/i18n/locale/en/helpCenter.json index 7f4c7c76d..f642814dc 100644 --- a/app/javascript/dashboard/i18n/locale/en/helpCenter.json +++ b/app/javascript/dashboard/i18n/locale/en/helpCenter.json @@ -112,20 +112,55 @@ } }, "ADD": { - "TITLE": "Create a portal", - "SUB_TITLE": "A Help Center in Chatwoot is known as a portal. You can have multiple portals and can have different locales for each portal.", + "CREATE_FLOW": [ + { + "title": "Help center information", + "route": "new_portal_information", + "body": "Basic information about portal", + "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings" + }, + { + "title": "Help center customization", + "route": "portal_customization", + "body": "Customize portal", + "UPDATE_PORTAL_BUTTON": "Update portal settings" + }, + { + "title": "Voila! 🎉", + "route": "portal_finish", + "body": "You're all set!", + "FINISH": "Finish" + } + ], + "CREATE_FLOW_PAGE": { + "BACK_BUTTON": "Back", + "BASIC_SETTINGS_PAGE": { + "HEADER": "Create Portal", + "TITLE": "Help center information", + "CREATE_BASIC_SETTING_BUTTON": "Create portal basic settings" + }, + "CUSTOMIZATION_PAGE": { + "HEADER": "Portal customisation", + "TITLE": "Help center customization", + "UPDATE_PORTAL_BUTTON": "Update portal settings" + }, + "FINISH_PAGE": { + "TITLE": "Voila!🎉 You're all set up!", + "MESSAGE": "You can now see this created portal on your all portals page.", + "FINISH": "Go to all portals page" + } + }, + "LOGO": { + "LABEL": "Logo", + "UPLOAD_BUTTON": "Upload logo", + "HELP_TEXT": "This logo will be displayed on the portal header." + }, "NAME": { "LABEL": "Name", "PLACEHOLDER": "Portal name", - "HELP_TEXT": "The name will be used in the public facing portal internally", + "HELP_TEXT": "The name will be used in the public facing portal internally.", "ERROR": "Name is required" }, - "PAGE_TITLE": { - "LABEL": "Page Title", - "PLACEHOLDER": "Portal page title", - "HELP_TEXT": "The name will be used in the public facing portal", - "ERROR": "Page title is required" - }, "SLUG": { "LABEL": "Slug", "PLACEHOLDER": "Portal slug for urls", @@ -135,7 +170,7 @@ "DOMAIN": { "LABEL": "Custom Domain", "PLACEHOLDER": "Portal custom domain", - "HELP_TEXT": "Add only If you want to use a custom domain for your portals", + "HELP_TEXT": "Add only If you want to use a custom domain for your portals.", "ERROR": "Custom Domain is required" }, "HOME_PAGE_LINK": { @@ -144,19 +179,25 @@ "HELP_TEXT": "The link used to return from the portal to the home page.", "ERROR": "Home Page Link is required" }, + "THEME_COLOR": { + "LABEL": "Portal theme color", + "HELP_TEXT": "This color will show as the theme color for the portal." + }, + "PAGE_TITLE": { + "LABEL": "Page Title", + "PLACEHOLDER": "Portal page title", + "HELP_TEXT": "The page title will be used in the public facing portal.", + "ERROR": "Page title is required" + }, "HEADER_TEXT": { "LABEL": "Header Text", "PLACEHOLDER": "Portal header text", - "HELP_TEXT": "Portal header text", + "HELP_TEXT": "The Portal header text will be used in the public facing portal.", "ERROR": "Portal header text is required" }, - "BUTTONS": { - "CREATE": "Create portal", - "CANCEL": "Cancel" - }, "API": { - "SUCCESS_MESSAGE": "Portal created successfully.", - "ERROR_MESSAGE": "Couldn't create the portal. Try again." + "ERROR_MESSAGE_FOR_BASIC": "Couldn't create the portal. Try again.", + "ERROR_MESSAGE_FOR_UPDATE": "Couldn't update the portal. Try again." } } }, diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue index 1930a62b4..52b0e0d8f 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue @@ -6,7 +6,7 @@ @open-key-shortcut-modal="toggleKeyShortcutModal" @close-key-shortcut-modal="closeKeyShortcutModal" /> -
+
- {{ portal.header_text }} + {{ portal.name }}
@@ -89,6 +91,7 @@ export default { } .title-view { + width: var(--space-mega); margin-bottom: var(--space-zero); } diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js index def3d6464..015bcd943 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/helpcenter.routes.js @@ -3,18 +3,19 @@ import { getPortalRoute } from './helpers/routeHelper'; const ListAllPortals = () => import('./pages/portals/ListAllPortals'); const NewPortal = () => import('./pages/portals/NewPortal'); + const EditPortal = () => import('./pages/portals/EditPortal'); const ShowPortal = () => import('./pages/portals/ShowPortal'); - +const PortalDetails = () => import('./pages/portals/PortalDetails'); +const PortalCustomization = () => import('./pages/portals/PortalCustomization'); +const PortalSettingsFinish = () => + import('./pages/portals/PortalSettingsFinish'); const ListAllCategories = () => import('./pages/categories/ListAllCategories'); const NewCategory = () => import('./pages/categories/NewCategory'); const EditCategory = () => import('./pages/categories/EditCategory'); -// const ShowCategory = () => import('./pages/categories/ShowCategory'); const ListCategoryArticles = () => import('./pages/articles/ListCategoryArticles'); - const ListAllArticles = () => import('./pages/articles/ListAllArticles'); - const NewArticle = () => import('./pages/articles/NewArticle'); const EditArticle = () => import('./pages/articles/EditArticle'); @@ -27,9 +28,27 @@ const portalRoutes = [ }, { path: getPortalRoute('new'), - name: 'new_portal', - roles: ['administrator', 'agent'], component: NewPortal, + children: [ + { + path: '', + name: 'new_portal_information', + component: PortalDetails, + roles: ['administrator'], + }, + { + path: ':portal_slug/customization', + name: 'portal_customization', + component: PortalCustomization, + roles: ['administrator'], + }, + { + path: ':portal_slug/finish', + name: 'portal_finish', + component: PortalSettingsFinish, + roles: ['administrator'], + }, + ], }, { path: getPortalRoute(':portalSlug'), diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue index 9bf274614..88501c9bc 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue @@ -64,7 +64,7 @@ export default { }, methods: { addPortal() { - this.isAddModalOpen = !this.isAddModalOpen; + this.$router.push({ name: 'new_portal_information' }); }, closeModal() { this.isAddModalOpen = false; diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue index 89368ed1b..3ab8d59a7 100644 --- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/NewPortal.vue @@ -1,5 +1,79 @@ + + + diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue new file mode 100644 index 000000000..37363d41c --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalCustomization.vue @@ -0,0 +1,170 @@ + + + + diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue new file mode 100644 index 000000000..b4d315f44 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalDetails.vue @@ -0,0 +1,203 @@ + + + + diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue new file mode 100644 index 000000000..24fb928e8 --- /dev/null +++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/PortalSettingsFinish.vue @@ -0,0 +1,43 @@ + + + + diff --git a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue index 9ff1697ed..bad9b4be4 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue @@ -61,6 +61,7 @@ import alertMixin from 'shared/mixins/alertMixin'; import validationMixin from './validationMixin'; import { mapGetters } from 'vuex'; import validations from './validations'; +import { getRandomColor } from 'dashboard/helper/labelColor'; export default { mixins: [alertMixin, validationMixin], @@ -79,20 +80,12 @@ export default { }), }, mounted() { - this.color = this.getRandomColor(); + this.color = getRandomColor(); }, methods: { onClose() { this.$emit('close'); }, - getRandomColor() { - const letters = '0123456789ABCDEF'; - let color = '#'; - for (let i = 0; i < 6; i += 1) { - color += letters[Math.floor(Math.random() * 16)]; - } - return color; - }, async addLabel() { try { await this.$store.dispatch('labels/create', { diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js index 6e2c87faf..d04137e63 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/actions.js @@ -49,12 +49,13 @@ export const actions = { update: async ({ commit }, params) => { const portalId = params.id; + const portalSlug = params.slug; commit(types.SET_HELP_PORTAL_UI_FLAG, { uiFlags: { isUpdating: true }, portalId, }); try { - const { data } = await portalAPIs.update(params); + const { data } = await portalAPIs.updatePortal({ portalSlug, params }); commit(types.UPDATE_PORTAL_ENTRY, data); } catch (error) { throwErrorMessage(error); diff --git a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js index 710d84828..7843ef631 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/mutations.js @@ -41,7 +41,7 @@ export const mutations = { [types.CLEAR_PORTALS]: $state => { Vue.set($state.portals, 'byId', {}); Vue.set($state.portals, 'allIds', []); - Vue.set($state.portals, 'uiFlags', {}); + Vue.set($state.portals, 'uiFlags.byId', {}); }, [types.SET_PORTALS_META]: ($state, data) => { 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 fe7a97ea8..6830e7d43 100644 --- a/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js +++ b/app/javascript/dashboard/store/modules/helpCenterPortals/specs/mutations.spec.js @@ -98,7 +98,11 @@ describe('#mutations', () => { mutations[types.CLEAR_PORTALS](state); expect(state.portals.allIds).toEqual([]); expect(state.portals.byId).toEqual({}); - expect(state.portals.uiFlags).toEqual({}); + expect(state.portals.uiFlags).toEqual({ + byId: { + '1': { isFetching: true, isUpdating: true, isDeleting: false }, + }, + }); }); });