feat: new onboarding

app/controllers/dashboard_controller.rb

@@ -30,7 +30,8 @@ def set_global_config
       'LOGOUT_REDIRECT_LINK',
       'DISABLE_USER_PROFILE_UPDATE',
       'DEPLOYMENT_ENV',
-      'CSML_EDITOR_HOST'
+      'CSML_EDITOR_HOST',
+      'ONBOARDING_SCHEDULING_LINK'
     ).merge(app_config)
   end
 

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -25,8 +25,9 @@ def sign_up_user
 
     create_account_for_user
     token = @resource.send(:set_reset_password_token)
-    frontend_url = ENV.fetch('FRONTEND_URL', nil)
-    redirect_to "#{frontend_url}/app/auth/password/edit?config=default&reset_password_token=#{token}"
+    base_url = password_reset_url
+    onboarding_url = account_onboarding_url(@account)
+    redirect_to "#{base_url}?config=default&reset_password_token=#{token}&route_url=#{onboarding_url}"
   end
 
   def login_page_url(error: nil, email: nil, sso_auth_token: nil)
@@ -72,4 +73,14 @@ def create_account_for_user
   def default_devise_mapping
     'user'
   end
+
+  def account_onboarding_url(account)
+    "/app/accounts/#{account.id}/start/setup-profile"
+  end
+
+  def password_reset_url
+    frontend_url = ENV.fetch('FRONTEND_URL', nil)
+
+    "#{frontend_url}/app/auth/password/edit"
+  end
 end

app/javascript/dashboard/assets/scss/widgets/_base.scss

@@ -63,12 +63,12 @@ input:focus {
 }
 
 // Inputs
-input[type='text'],
-input[type='number'],
-input[type='password'],
-input[type='date'],
-input[type='email'],
-input[type='url'] {
+input[type='text']:not(.reset-base),
+input[type='number']:not(.reset-base),
+input[type='password']:not(.reset-base),
+input[type='date']:not(.reset-base),
+input[type='email']:not(.reset-base),
+input[type='url']:not(.reset-base) {
   @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
 
   &[disabled] {

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="phone-input--wrap relative">
+  <div class="relative phone-input--wrap">
     <div class="phone-input" :class="{ 'has-error': error }">
       <div
         class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
@@ -13,14 +13,16 @@
       </div>
       <span
         v-if="activeDialCode"
-        class="flex bg-white dark:bg-slate-900 font-medium text-slate-800 dark:text-slate-100 font-normal text-base leading-normal py-2 pl-2 pr-0"
+        class="flex py-2 pl-2 pr-0 font-normal leading-normal bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100"
+        :class="fontSize"
       >
         {{ activeDialCode }}
       </span>
       <input
         :value="phoneNumber"
         type="tel"
         class="phone-input--field"
+        :class="fontSize"
         :placeholder="placeholder"
         :readonly="readonly"
         :style="styles"
@@ -49,20 +51,20 @@
         }"
         @click="onSelectCountry(country)"
       >
-        <span class="text-base mr-1">{{ country.emoji }}</span>
+        <span class="mr-1 text-base">{{ country.emoji }}</span>
 
         <span
           class="max-w-[7.5rem] overflow-hidden text-ellipsis whitespace-nowrap"
         >
           {{ country.name }}
         </span>
-        <span class="ml-1 text-slate-300 dark:text-slate-300 text-xs">{{
+        <span class="ml-1 text-xs text-slate-300 dark:text-slate-300">{{
           country.dial_code
         }}</span>
       </div>
       <div v-if="filteredCountriesBySearch.length === 0">
         <span
-          class="flex items-center justify-center text-sm text-slate-500 dark:text-slate-300 mt-4"
+          class="flex items-center justify-center mt-4 text-sm text-slate-500 dark:text-slate-300"
         >
           No results found
         </span>
@@ -104,6 +106,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    fontSize: {
+      type: String,
+      default: 'text-base',
+    },
   },
   data() {
     return {
@@ -254,15 +260,15 @@ export default {
 <style scoped lang="scss">
 .phone-input--wrap {
   .phone-input {
-    @apply flex items-center dark:bg-slate-900 justify-start mb-4 rounded-md border border-solid border-slate-200 dark:border-slate-600;
+    @apply flex items-center dark:bg-slate-900 justify-start rounded-md border border-solid border-slate-200 dark:border-slate-600;
 
     &.has-error {
       @apply border border-solid border-red-400 dark:border-red-400;
     }
   }
 
   .phone-input--field {
-    @apply mb-0 rounded-tl-none rounded-bl-none border-0 w-full dark:bg-slate-900 text-base px-1.5;
+    @apply mb-0 rounded-tl-none rounded-bl-none border-0 w-full dark:bg-slate-900 px-1.5;
 
     &::placeholder {
       @apply font-normal;

app/javascript/dashboard/i18n/locale/en/signup.json

@@ -1,6 +1,7 @@
 {
   "REGISTER": {
     "TRY_WOOT": "Create an account",
+    "TRY_WOOT_CLOUD": "Create a free account",
     "TITLE": "Register",
     "TESTIMONIAL_HEADER": "All it takes is one step to move forward",
     "TESTIMONIAL_CONTENT": "You're one step away from engaging your customers, retaining them and finding new ones.",
@@ -40,5 +41,96 @@
     },
     "SUBMIT": "Create account",
     "HAVE_AN_ACCOUNT": "Already have an account?"
+  },
+  "START_ONBOARDING": {
+    "PROFILE": {
+      "INTRO": "Welcome, let’s get started.",
+      "TITLE": "Set up profile",
+      "BODY": "These are details visible to end users, to make a positive first impression.",
+      "SUBMIT": {
+        "BUTTON": "Continue to company setup",
+        "ERROR": "Error in setting up profile, try again.",
+        "SUCCESS": "🔥 Lets add your business details"
+      },
+      "AVATAR": {
+        "LABEL": "Avatar",
+        "PLACEHOLDER": "Upload Profile Image"
+      },
+      "FULL_NAME": {
+        "LABEL": "Full name",
+        "PLACEHOLDER": "Enter your full name",
+        "ERROR": "Add a valid full name"
+      },
+      "DISPLAY_NAME": {
+        "LABEL": "Display name (Optional)",
+        "PLACEHOLDER": "Enter the name you want to display your customers",
+        "ERROR": "Add a valid display name or leave it blank"
+      },
+      "PHONE_NUMBER": {
+        "LABEL": "Phone number (Optional)",
+        "PLACEHOLDER": "Enter your phone number"
+      },
+      "SIGNATURE": {
+        "LABEL": "Signature",
+        "PLACEHOLDER": "Add a signature for your messages. You can set this later in your settings."
+      }
+    },
+    "COMPANY": {
+      "PAGE_TITLE": "Hello %{userName},\nwe 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": {
+        "BUTTON": "Continue to team setup",
+        "ERROR": "Error in setting up company, try again.",
+        "SUCCESS": "🚀 Lets invite your team"
+      },
+      "COMPANY_NAME": {
+        "LABEL": "Company name",
+        "PLACEHOLDER": "Enter your company name",
+        "ERROR": "Company name is too short."
+      },
+      "INDUSTRY": {
+        "LABEL": "Industry",
+        "PLACEHOLDER": "Select your industry"
+      },
+      "TIMEZONE": {
+        "LABEL": "Timezone",
+        "PLACEHOLDER": "What timezone do you work from?"
+      },
+      "LOCALE": {
+        "LABEL": "Language",
+        "PLACEHOLDER": "Select the language you want to use"
+      },
+      "SIZE": {
+        "LABEL": "Company size",
+        "PLACEHOLDER": "How many people work at your company?"
+      }
+    },
+    "INVITE_TEAM": {
+      "TITLE": "Invite your team",
+      "ADD": "Add",
+      "LIST_EMPTY": "No members to invite",
+      "BODY": "Invite your team members to Chatwoot. You can add them later as well.",
+      "PLACEHOLDER": "robin@chatwoot.com",
+      "SKIP": "Skip for now",
+      "EMAIL_ERROR": "Please enter a valid email address",
+      "SUBMIT": {
+        "BUTTON": "Send invitations",
+        "ERROR": "Error while inviting team members, try again.",
+        "NO_MEMBER_ERROR": "Please add atleast one team member or skip this step",
+        "SUCCESS": "🪄 Setup complete"
+      }
+    },
+    "FOUNDERS_NOTE": {
+      "NOTE": {
+        "HEY": "Hey {name},",
+        "PARAGRAPH_1": "I'm Pranav, one of the co-founders at Chatwoot. Thanks for checking out Chatwoot. We're eager to understand your needs and expectations.",
+        "PARAGRAPH_2": "If you are facing trouble using the app or achieving your use case, we want to help you as quickly as possible.",
+        "PARAGRAPH_3": "Feel free to <a target=\"blank\" href=\"{scheduleLink}\">schedule a call</a> with our team. We are open to your feedback. Talk soon!",
+        "SIGNATURE": "Pranav, <br />Co-founder & CEO, Chatwoot"
+      },
+      "TITLE": "A note from the founder",
+      "SUBMIT": "Go to dashboard"
+    }
   }
-}
+}

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue

@@ -66,6 +66,7 @@
             :value="phoneNumber"
             :error="isPhoneNumberNotValid"
             :placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
+            class="mb-4"
             @input="onPhoneNumberInputChange"
             @blur="$v.phoneNumber.$touch"
             @setCode="setPhoneCode"

app/javascript/dashboard/routes/dashboard/dashboard.routes.js

@@ -9,6 +9,11 @@ import helpcenterRoutes from './helpcenter/helpcenter.routes';
 
 const AppContainer = () => import('./Dashboard.vue');
 const Suspended = () => import('./suspended/Index.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: [
@@ -31,5 +36,36 @@ export default {
       roles: ['administrator', 'agent'],
       component: Suspended,
     },
+    {
+      path: frontendURL('accounts/:accountId/start'),
+      component: RouteLayout,
+      roles: ['administrator'],
+      children: [
+        {
+          path: frontendURL('accounts/:accountId/start/setup-profile'),
+          name: 'onboarding_setup_profile',
+          component: SetupProfile,
+          roles: ['administrator'],
+        },
+        {
+          path: frontendURL('accounts/:accountId/start/setup-company'),
+          name: 'onboarding_setup_company',
+          component: SetupCompany,
+          roles: ['administrator'],
+        },
+        {
+          path: frontendURL('accounts/:accountId/start/invite-team'),
+          name: 'onboarding_invite_team',
+          component: InviteTeam,
+          roles: ['administrator'],
+        },
+      ],
+    },
+    {
+      path: frontendURL('accounts/:accountId/start/founders-note'),
+      name: 'onboarding_founders_note',
+      component: FoundersNote,
+      roles: ['administrator'],
+    },
   ],
 };