feat: Adds layout page to use with onboarding views (#8855)

* feat: Wizard step component to use with onboarding

* feat: Adds layout page to use with onboarding views

* Adds dark mode assets

* Updates to layout bg image

* Updates to translations

app/javascript/dashboard/constants/globals.js

@@ -48,3 +48,4 @@ export default {
   EXAMPLE_WEBHOOK_URL: 'https://example/api/webhook',
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
+export const ONBOARDING_START_URL = '/app/start/setup-profile';

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

@@ -40,5 +40,86 @@
     },
     "SUBMIT": "Create account",
     "HAVE_AN_ACCOUNT": "Already have an account?"
+  },
+  "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": {
+      "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",
+      "BODY": "Invite your team members to Chatwoot. You can add them later as well.",
+      "PLACEHOLDER": "robin@chatwoot.com",
+      "SKIP": "Skip for now",
+      "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": {
+      "TITLE": "A note from the founder",
+      "SUBMIT": "Go to dashboard"
+    }
   }
 }

app/javascript/dashboard/routes/index.js

@@ -45,6 +45,13 @@ export const validateAuthenticateRoutePermission = (to, next, { getters }) => {
     return next(frontendURL(`accounts/${user.account_id}/dashboard`));
   }
 
+  // we can let them access onboarding routes
+  // we will eventually need guards as onboarding is done, but for now
+  // we can let them access onboarding routes
+  if (to.name.startsWith('onboarding')) {
+    return next();
+  }
+
   const nextRoute = validateLoggedInRoutes(
     to,
     getters.getCurrentUser,