From 922db887e83079133cd14554c979b59adaa928a5 Mon Sep 17 00:00:00 2001 From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com> Date: Mon, 12 Feb 2024 18:09:43 +0530 Subject: [PATCH] Changes to smoothen page transitions --- .../dashboard/i18n/locale/en/signup.json | 1 + .../routes/dashboard/dashboard.routes.js | 46 +-- app/javascript/v3/api/auth.js | 6 +- app/javascript/v3/components/Form/Input.vue | 2 +- .../v3/components/Form/RadioTags.vue | 1 + app/javascript/v3/views/auth/signup/Index.vue | 34 +- .../auth/signup/components/Signup/Form.vue | 11 +- app/javascript/v3/views/login/Index.vue | 12 +- .../v3/views/onboarding/InviteTeam.vue | 156 +++++---- .../v3/views/onboarding/OnboardingStep.vue | 4 +- .../v3/views/onboarding/RouteLayout.vue | 196 +++++++++++ .../v3/views/onboarding/SetupCompany.vue | 132 ++++++-- .../v3/views/onboarding/SetupProfile.vue | 311 ++++++++++-------- 13 files changed, 638 insertions(+), 274 deletions(-) create mode 100644 app/javascript/v3/views/onboarding/RouteLayout.vue diff --git a/app/javascript/dashboard/i18n/locale/en/signup.json b/app/javascript/dashboard/i18n/locale/en/signup.json index 9ef7e1480..ef23cc840 100644 --- a/app/javascript/dashboard/i18n/locale/en/signup.json +++ b/app/javascript/dashboard/i18n/locale/en/signup.json @@ -75,6 +75,7 @@ } }, "COMPANY": { + "PAGE_TITLE": "Hello %{userName},\nwe are are almost done.", "TITLE": "Tell us about your company", "BODY": "In this section, we'll set up the language, timezone, and company size. This information allows us to provide contextually accurate information and suggest relevant features for you.", "SUBMIT": { diff --git a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js index 967873040..8ed177eed 100644 --- a/app/javascript/dashboard/routes/dashboard/dashboard.routes.js +++ b/app/javascript/dashboard/routes/dashboard/dashboard.routes.js @@ -8,9 +8,10 @@ import helpcenterRoutes from './helpcenter/helpcenter.routes'; const AppContainer = () => import('./Dashboard.vue'); const Suspended = () => import('./suspended/Index.vue'); -// const SetupProfile = () => import('v3/views/onboarding/SetupProfile.vue'); -// const SetupCompany = () => import('v3/views/onboarding/SetupCompany.vue'); -// const InviteTeam = () => import('v3/views/onboarding/InviteTeam.vue'); +const RouteLayout = () => import('v3/views/onboarding/RouteLayout.vue'); +const SetupProfile = () => import('v3/views/onboarding/SetupProfile.vue'); +const SetupCompany = () => import('v3/views/onboarding/SetupCompany.vue'); +const InviteTeam = () => import('v3/views/onboarding/InviteTeam.vue'); // const FoundersNote = () => import('v3/views/onboarding/FoundersNote.vue'); export default { routes: [ @@ -32,23 +33,30 @@ export default { roles: ['administrator', 'agent'], component: Suspended, }, + { + path: frontendURL('accounts/:accountId/start'), + component: RouteLayout, + children: [ + { + path: frontendURL('accounts/:accountId/start/setup-profile'), + name: 'onboarding_setup_profile', + component: SetupProfile, + }, + { + path: frontendURL('accounts/:accountId/start/setup-company'), + name: 'onboarding_setup_company', + component: SetupCompany, + }, + { + path: frontendURL('accounts/:accountId/start/invite-team'), + name: 'onboarding_invite_team', + component: InviteTeam, + }, + ], + }, + // { - // path: frontendURL('accounts/:account_id/start/setup-profile'), - // name: 'onboarding_setup_profile', - // component: SetupProfile, - // }, - // { - // path: frontendURL('accounts/:account_id/start/setup-company'), - // name: 'onboarding_setup_company', - // component: SetupCompany, - // }, - // { - // path: frontendURL('accounts/:account_id/start/invite-team'), - // name: 'onboarding_invite_team', - // component: InviteTeam, - // }, - // { - // path: frontendURL('accounts/:account_id/start/founders-note'), + // path: frontendURL('accounts/:accountId/start/founders-note'), // name: 'onboarding_founders_note', // component: FoundersNote, // }, diff --git a/app/javascript/v3/api/auth.js b/app/javascript/v3/api/auth.js index fbdea7410..c51304a90 100644 --- a/app/javascript/v3/api/auth.js +++ b/app/javascript/v3/api/auth.js @@ -27,7 +27,7 @@ export const login = async ({ export const register = async creds => { try { - const response = await wootAPI.post('api/v1/accounts.json', { + const response = await wootAPI.post('api/v2/accounts.json', { email: creds.email, password: creds.password, h_captcha_client_response: creds.hCaptchaClientResponse, @@ -42,11 +42,11 @@ export const register = async creds => { export const accountSetup = async ({ id, name, locale }) => { try { - const response = await wootAPI.put(`api/v1/accounts/${id}.json`, { + const response = await wootAPI.put(`api/v2/accounts/${id}.json`, { name, locale, }); - setAuthCredentials(response); + // setAuthCredentials(response); return response.data; } catch (error) { throwErrorMessage(error); diff --git a/app/javascript/v3/components/Form/Input.vue b/app/javascript/v3/components/Form/Input.vue index f48708a26..b0e104de7 100644 --- a/app/javascript/v3/components/Form/Input.vue +++ b/app/javascript/v3/components/Form/Input.vue @@ -23,7 +23,7 @@ 'px-3 py-2 mb-0': spacing === 'compact', 'pl-9': icon, }" - class="block w-full border-none rounded-xl shadow-sm appearance-none outline outline-1 outline-slate-200 dark:outline-slate-800 focus:outline-none focus:outline-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-800" + class="block w-full border-none rounded-xl shadow-sm appearance-none outline outline-1 outline-slate-200 dark:outline-slate-700 focus:outline-none focus:outline-0 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-800" @input="onInput" @blur="$emit('blur')" /> diff --git a/app/javascript/v3/components/Form/RadioTags.vue b/app/javascript/v3/components/Form/RadioTags.vue index 7cb221132..e56491460 100644 --- a/app/javascript/v3/components/Form/RadioTags.vue +++ b/app/javascript/v3/components/Form/RadioTags.vue @@ -12,6 +12,7 @@ :variant="value === option.value ? '' : 'hollow'" :color-scheme="value === option.value ? 'primary' : 'secondary'" size="small" + type="" @click="$emit('input', option.value)" > {{ option.label }} diff --git a/app/javascript/v3/views/auth/signup/Index.vue b/app/javascript/v3/views/auth/signup/Index.vue index 0a6f009da..0e7222424 100644 --- a/app/javascript/v3/views/auth/signup/Index.vue +++ b/app/javascript/v3/views/auth/signup/Index.vue @@ -6,14 +6,32 @@
+ + + + + + + + +
-
+
diff --git a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue index 9623b345b..5dee74d93 100644 --- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue +++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue @@ -61,7 +61,6 @@ import { required, minLength, email } from 'vuelidate/lib/validators'; import { mapGetters } from 'vuex'; import globalConfigMixin from 'shared/mixins/globalConfigMixin'; import alertMixin from 'shared/mixins/alertMixin'; -import { ONBOARDING_START_URL } from 'dashboard/constants/globals'; import VueHcaptcha from '@hcaptcha/vue-hcaptcha'; import FormInput from 'v3/components/Form/Input.vue'; import SubmitButton from '../../../../../components/Button/SubmitButton.vue'; @@ -148,8 +147,14 @@ export default { } this.isSignupInProgress = true; try { - await register(this.credentials); - window.location = ONBOARDING_START_URL; + const { + data: { account_id: accountId }, + } = await register(this.credentials); + + this.$router.push({ + name: 'onboarding_setup_profile', + params: { accountId }, + }); } catch (error) { let errorMessage = error?.message || this.$t('REGISTER.API.ERROR_MESSAGE'); diff --git a/app/javascript/v3/views/login/Index.vue b/app/javascript/v3/views/login/Index.vue index d840c27a5..51db7c8f2 100644 --- a/app/javascript/v3/views/login/Index.vue +++ b/app/javascript/v3/views/login/Index.vue @@ -69,11 +69,13 @@

- +
+ +
diff --git a/app/javascript/v3/views/onboarding/InviteTeam.vue b/app/javascript/v3/views/onboarding/InviteTeam.vue index a2cfeb013..22e32c934 100644 --- a/app/javascript/v3/views/onboarding/InviteTeam.vue +++ b/app/javascript/v3/views/onboarding/InviteTeam.vue @@ -1,91 +1,100 @@ + diff --git a/app/javascript/v3/views/onboarding/SetupCompany.vue b/app/javascript/v3/views/onboarding/SetupCompany.vue index f7a3f7630..cdd55af25 100644 --- a/app/javascript/v3/views/onboarding/SetupCompany.vue +++ b/app/javascript/v3/views/onboarding/SetupCompany.vue @@ -1,11 +1,20 @@