From 51b845e937f44cf6ca04ef8aba100b279bf9e135 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 4 Dec 2023 12:44:37 +0530
Subject: [PATCH] feat: add setup company UI

---
 .../dashboard/i18n/locale/en/signup.json      | 24 +++++++
 .../v3/views/auth/start/SetupCompany.vue      | 62 +++++++++++++++++--
 .../auth/start/components/ModalLayout.vue     | 38 ++++++++++++
 3 files changed, 119 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/v3/views/auth/start/components/ModalLayout.vue

diff --git a/app/javascript/dashboard/i18n/locale/en/signup.json b/app/javascript/dashboard/i18n/locale/en/signup.json
index 1ad4865ff..f0a7064ce 100644
--- a/app/javascript/dashboard/i18n/locale/en/signup.json
+++ b/app/javascript/dashboard/i18n/locale/en/signup.json
@@ -40,5 +40,29 @@
     },
     "SUBMIT": "Create account",
     "HAVE_AN_ACCOUNT": "Already have an account?"
+  },
+  "ONBOARDING": {
+    "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",
+      "COMPANY_NAME": {
+        "LABEL": "Company name",
+        "PLACEHOLDER": "Enter your company name",
+        "ERROR": "Company name is too short."
+      },
+      "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?"
+      }
+    }
   }
 }
diff --git a/app/javascript/v3/views/auth/start/SetupCompany.vue b/app/javascript/v3/views/auth/start/SetupCompany.vue
index 84582811b..db010083c 100644
--- a/app/javascript/v3/views/auth/start/SetupCompany.vue
+++ b/app/javascript/v3/views/auth/start/SetupCompany.vue
@@ -1,11 +1,63 @@
 <template>
-  <div
-    class="px-8 py-24 font-bold dark:text-white bg-woot-25 dark:bg-slate-900"
+  <modal-layout
+    :title="$t('ONBOARDING.COMPANY.TITLE')"
+    :body="$t('ONBOARDING.COMPANY.BODY')"
   >
-    <h2 class="text-3xl text-center">Setup Company</h2>
-  </div>
+    <form class="space-y-8">
+      <div class="space-y-3">
+        <form-input
+          v-model="companyName"
+          name="full_name"
+          class="flex-1"
+          :label="$t('ONBOARDING.COMPANY.COMPANY_NAME.LABEL')"
+          :placeholder="$t('ONBOARDING.COMPANY.COMPANY_NAME.PLACEHOLDER')"
+          :error-message="$t('ONBOARDING.COMPANY.COMPANY_NAME.ERROR')"
+        />
+        <form-input
+          v-model="timezone"
+          name="full_name"
+          class="flex-1"
+          :label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
+          :placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
+        />
+        <form-input
+          v-model="locale"
+          name="full_name"
+          class="flex-1"
+          :label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
+          :placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
+        />
+        <form-input
+          v-model="companySize"
+          name="full_name"
+          class="flex-1"
+          :label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
+          :placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
+        />
+      </div>
+      <submit-button :button-text="$t('ONBOARDING.COMPANY.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 {
+      companyName: '',
+      timezone: '',
+      locale: '',
+      companySize: '',
+    };
+  },
+};
 </script>
diff --git a/app/javascript/v3/views/auth/start/components/ModalLayout.vue b/app/javascript/v3/views/auth/start/components/ModalLayout.vue
new file mode 100644
index 000000000..692776cb9
--- /dev/null
+++ b/app/javascript/v3/views/auth/start/components/ModalLayout.vue
@@ -0,0 +1,38 @@
+<template>
+  <section
+    class="min-h-screen px-8 py-24 dark:text-white bg-woot-25 dark:bg-slate-900"
+  >
+    <div
+      class="max-w-lg rounded-md dark:shadow-[#000] p-8 mx-auto border shadow border-slate-300 dark:border-slate-800 bg-white dark:bg-slate-900"
+    >
+      <h2 class="text-lg font-bold tracking-tight">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </h2>
+      <p class="mt-2 text-sm dark:text-slate-200">
+        <slot name="body">
+          {{ body }}
+        </slot>
+      </p>
+      <div class="mt-8">
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    body: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>