feat: add setup user

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

@@ -42,10 +42,31 @@
     "HAVE_AN_ACCOUNT": "Already have an account?"
   },
   "ONBOARDING": {
+    "PROFILE": {
+      "TITLE": "Tell us about yourself",
+      "BODY": "Here, we'll set up your details like profile picture, display name, contact info, etc., visible to end users, to make a positive first impression.",
+      "SUBMIT": "Continue to account setup",
+      "FULL_NAME": {
+        "LABEL": "Full name",
+        "PLACEHOLDER": "Enter your full name"
+      },
+      "DISPLAY_NAME": {
+        "LABEL": "Display name",
+        "PLACEHOLDER": "Enter the name you want to display your customers"
+      },
+      "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": "Go to next step",
+      "SUBMIT": "Continue",
       "COMPANY_NAME": {
         "LABEL": "Company name",
         "PLACEHOLDER": "Enter your company name",
@@ -63,6 +84,9 @@
         "LABEL": "Company size",
         "PLACEHOLDER": "How many people work at your company?"
       }
+    },
+    "FOUNDERS_NOTE": {
+      "TITLE": "A note from the founder"
     }
   }
 }

app/javascript/v3/views/auth/start/SetupUser.vue

@@ -1,11 +1,66 @@
 <template>
-  <div
-    class="px-8 py-12 font-bold dark:text-white bg-woot-25 dark:bg-slate-900"
+  <modal-layout
+    :title="$t('ONBOARDING.PROFILE.TITLE')"
+    :body="$t('ONBOARDING.PROFILE.BODY')"
   >
-    <h2 class="text-3xl">Setup Your Profile</h2>
-  </div>
+    <form class="mt-8 space-y-8">
+      <div class="space-y-3">
+        <form-input
+          v-model="fullName"
+          name="full_name"
+          class="flex-1"
+          :label="$t('ONBOARDING.PROFILE.FULL_NAME.LABEL')"
+          :placeholder="$t('ONBOARDING.PROFILE.FULL_NAME.PLACEHOLDER')"
+          :error-message="$t('ONBOARDING.PROFILE.FULL_NAME.ERROR')"
+        />
+        <form-input
+          v-model="displayName"
+          name="display_name"
+          class="flex-1"
+          :label="$t('ONBOARDING.PROFILE.DISPLAY_NAME.LABEL')"
+          :placeholder="$t('ONBOARDING.PROFILE.DISPLAY_NAME.PLACEHOLDER')"
+        />
+        <form-input
+          v-model="phoneNumber"
+          name="phone_number"
+          class="flex-1"
+          :label="$t('ONBOARDING.PROFILE.PHONE_NUMBER.LABEL')"
+          :placeholder="$t('ONBOARDING.PROFILE.PHONE_NUMBER.PLACEHOLDER')"
+        />
+        <form-input
+          v-model="signature"
+          name="signature"
+          class="flex-1"
+          :label="$t('ONBOARDING.PROFILE.SIGNATURE.LABEL')"
+          :placeholder="$t('ONBOARDING.PROFILE.SIGNATURE.PLACEHOLDER')"
+        />
+      </div>
+      <submit-button
+        button-class="text-sm"
+        :button-text="$t('ONBOARDING.PROFILE.SUBMIT')"
+      />
+    </form>
+  </modal-layout>
 </template>
 
 <script>
-export default {};
+import FormInput from '../../../components/Form/Input.vue';
+import SubmitButton from '../../../components/Button/SubmitButton';
+import ModalLayout from './components/ModalLayout.vue';
+
+export default {
+  components: {
+    FormInput,
+    SubmitButton,
+    ModalLayout,
+  },
+  data() {
+    return {
+      fullName: '',
+      displayName: '',
+      phoneNumber: '',
+      signature: '',
+    };
+  },
+};
 </script>