{"version":3,"file":"ChatOnboardingModal-fa764e82.js","sources":["../../../app/javascript/components/chat/ChatOnboardingModal.vue"],"sourcesContent":["<template>\n  <BaseDialog\n    size-class=\"!max-w-3xl h-[44rem]\"\n    class=\"overflow-y-auto\"\n    :model-value=\"true\"\n    @update:model-value=\"noMandatoryData ? '' : $emit('close')\"\n  >\n    <template #header>\n      <span class=\"px-10\">\n        {{ onBoarding ? 'Welcome to SigDev Messenger' : 'Profile' }}\n      </span>\n    </template>\n    <template #default>\n      <div class=\"px-10 pt-4 text-xs text-gray-400\">\n        Note: Your team admin has enabled Messenger for your team. Fill out the fields below to optimize your experience\n        on Messenger.\n      </div>\n      <div class=\"flex h-full w-full\">\n        <div class=\"flex px-10 pt-2\">\n          <div class=\"flex h-full space-x-16\">\n            <div class=\"space-y-4 pt-3\">\n              <div class=\"flex w-96 space-x-4\">\n                <div class=\"space-y-2\">\n                  <div class=\"text-xs font-medium text-gray-400\">First Name <span class=\"text-red-500\">*</span></div>\n                  <BaseTextbox v-model=\"profile.first_name\" />\n                  <span v-if=\"firstNameError && firstNameError.length > 0\" class=\"text-xs text-red-400\">\n                    {{ firstNameError }}\n                  </span>\n                </div>\n                <div class=\"space-y-2\">\n                  <div class=\"text-xs font-medium text-gray-400\">Last Name <span class=\"text-red-500\">*</span></div>\n                  <BaseTextbox v-model=\"profile.last_name\" />\n                  <span v-if=\"lastNameError && lastNameError.length > 0\" class=\"text-xs text-red-400\">\n                    {{ lastNameError }}\n                  </span>\n                </div>\n              </div>\n              <div class=\"w-96 space-y-2\">\n                <div class=\"text-xs font-medium text-gray-400\">Title <span class=\"text-red-500\">*</span></div>\n                <BaseTextbox v-model=\"profile.role_title\" />\n                <span v-if=\"roleError && roleError.length > 0\" class=\"text-xs text-red-400\">\n                  {{ roleError }}\n                </span>\n              </div>\n              <div class=\"w-96 space-y-2\">\n                <div class=\"text-xs font-medium text-gray-400\">Department</div>\n                <BaseTextbox v-model=\"profile.department\" />\n              </div>\n              <div class=\"w-96 space-y-2\">\n                <div class=\"text-xs font-medium text-gray-400\">Telegram</div>\n                <BaseTextbox v-model=\"profile.telegram_url\" />\n              </div>\n              <div class=\"w-96 space-y-2\">\n                <div class=\"text-xs font-medium text-gray-400\">Linkedin Profile</div>\n                <BaseTextbox v-model=\"profile.linkedin_url\" />\n              </div>\n              <div class=\"w-96 space-y-2\">\n                <div class=\"text-xs font-medium text-gray-400\">About Me</div>\n                <BaseTextarea v-model=\"profile.about\" :rows=\"2\" />\n              </div>\n            </div>\n            <div class=\"flex w-2/5 flex-col items-center justify-center\" v-if=\"streamUser\">\n              <div class=\"mb-2 text-xs font-medium text-gray-400\">Profile Photo</div>\n              <ImageSelector :settings-modal=\"true\" :user=\"streamUser\" @selected-image=\"setImage\" />\n            </div>\n          </div>\n        </div>\n      </div>\n    </template>\n    <template #footer>\n      <div class=\"flex w-full items-center justify-end space-x-2 px-10 pt-5\">\n        <BaseButton type=\"secondary\" :disabled=\"noMandatoryData\" @press=\"$emit('close')\">Cancel</BaseButton>\n        <BaseButton :busy=\"buttonBusy\" @press=\"saveProfile()\">Save</BaseButton>\n      </div>\n    </template>\n  </BaseDialog>\n</template>\n<script setup>\nimport { ref, onMounted, watch, inject, computed } from 'vue';\nimport ImageSelector from './ChatImageSelector.vue';\nimport { useMapGetter } from '@/store/map-state';\nimport { useStore } from 'vuex';\nimport useHttp from '@/composeables/http';\nconst props = defineProps({ onBoarding: { type: Boolean, default: false } });\nconst { streamUser } = useMapGetter();\nconst $http = useHttp();\nconst $emit = defineEmits(['close']);\nconst $store = useStore();\n\n// PROFILE\nconst userData = ref($store.getters.session.user);\nconst profile = ref({\n  first_name: userData.value.first_name || '',\n  last_name: userData.value.last_name || '',\n  role_title: userData.value.role_title || '',\n  department: userData.value.department || '',\n  telegram_url: userData.value.telegram_url || '',\n  linkedin_url: userData.value.linkedin_url || '',\n  about: userData.value.about || '',\n  image: ''\n});\n\nasync function saveProfile() {\n  if (!profile.value.role_title || profile.value.role_title.trim().length <= 0) {\n    roleError.value = \"Job title can't be blank.\";\n  } else if (!profile.value.first_name || profile.value.first_name.trim().length <= 0) {\n    firstNameError.value = \"First Name can't be blank.\";\n  } else if (!profile.value.last_name || profile.value.last_name.trim().length <= 0) {\n    lastNameError.value = \"Last Name can't be blank.\";\n  } else {\n    let formData = new FormData();\n\n    Object.entries(profile.value).forEach(([key, value]) => formData.append(`user[${key}]`, value));\n    formData.append(`user[profile_completed]`, true);\n    formData.append('_method', 'PATCH');\n\n    await $http.patch('/profile', formData, {\n      headers: {\n        'Content-Type': 'multipart/form-data'\n      }\n    });\n    $emit('close');\n  }\n}\n\n// ERRORS\nconst roleError = ref('');\nwatch(\n  () => profile.value.role_title,\n  (newVal, oldVal) => {\n    roleError.value = '';\n  }\n);\n\nconst firstNameError = ref('');\nwatch(\n  () => profile.value.first_name,\n  (newVal, oldVal) => {\n    firstNameError.value = '';\n  }\n);\n\nconst lastNameError = ref('');\nwatch(\n  () => profile.value.last_name,\n  (newVal, oldVal) => {\n    lastNameError.value = '';\n  }\n);\n\n// OTHERS\nfunction setImage(data) {\n  profile.value.image = data.file;\n}\n\nconst noMandatoryData = computed(() => {\n  return !(userData.value.first_name && userData.value.last_name && userData.value.role_title);\n});\n</script>\n"],"names":["streamUser","useMapGetter","$http","useHttp","$store","useStore","userData","ref","profile","saveProfile","roleError","firstNameError","lastNameError","formData","key","value","$emit","watch","newVal","oldVal","setImage","data","noMandatoryData","computed"],"mappings":"wgEAoFA,KAAM,CAAE,WAAAA,CAAU,EAAKC,IACjBC,EAAQC,EAAO,EAEfC,EAASC,EAAQ,EAGjBC,EAAWC,EAAIH,EAAO,QAAQ,QAAQ,IAAI,EAC1CI,EAAUD,EAAI,CAClB,WAAYD,EAAS,MAAM,YAAc,GACzC,UAAWA,EAAS,MAAM,WAAa,GACvC,WAAYA,EAAS,MAAM,YAAc,GACzC,WAAYA,EAAS,MAAM,YAAc,GACzC,aAAcA,EAAS,MAAM,cAAgB,GAC7C,aAAcA,EAAS,MAAM,cAAgB,GAC7C,MAAOA,EAAS,MAAM,OAAS,GAC/B,MAAO,EACT,CAAC,EAED,eAAeG,GAAc,CAC3B,GAAI,CAACD,EAAQ,MAAM,YAAcA,EAAQ,MAAM,WAAW,KAAI,EAAG,QAAU,EACzEE,EAAU,MAAQ,oCACT,CAACF,EAAQ,MAAM,YAAcA,EAAQ,MAAM,WAAW,OAAO,QAAU,EAChFG,EAAe,MAAQ,qCACd,CAACH,EAAQ,MAAM,WAAaA,EAAQ,MAAM,UAAU,OAAO,QAAU,EAC9EI,EAAc,MAAQ,gCACjB,CACL,IAAIC,EAAW,IAAI,SAEnB,OAAO,QAAQL,EAAQ,KAAK,EAAE,QAAQ,CAAC,CAACM,EAAKC,CAAK,IAAMF,EAAS,OAAO,QAAQC,CAAG,IAAKC,CAAK,CAAC,EAC9FF,EAAS,OAAO,0BAA2B,EAAI,EAC/CA,EAAS,OAAO,UAAW,OAAO,EAElC,MAAMX,EAAM,MAAM,WAAYW,EAAU,CACtC,QAAS,CACP,eAAgB,qBACjB,CACP,CAAK,EACDG,EAAM,OAAO,CACd,CACH,CAGA,MAAMN,EAAYH,EAAI,EAAE,EACxBU,EACE,IAAMT,EAAQ,MAAM,WACpB,CAACU,EAAQC,IAAW,CAClBT,EAAU,MAAQ,EACnB,CACH,EAEA,MAAMC,EAAiBJ,EAAI,EAAE,EAC7BU,EACE,IAAMT,EAAQ,MAAM,WACpB,CAACU,EAAQC,IAAW,CAClBR,EAAe,MAAQ,EACxB,CACH,EAEA,MAAMC,EAAgBL,EAAI,EAAE,EAC5BU,EACE,IAAMT,EAAQ,MAAM,UACpB,CAACU,EAAQC,IAAW,CAClBP,EAAc,MAAQ,EACvB,CACH,EAGA,SAASQ,EAASC,EAAM,CACtBb,EAAQ,MAAM,MAAQa,EAAK,IAC7B,CAEA,MAAMC,EAAkBC,EAAS,IACxB,EAAEjB,EAAS,MAAM,YAAcA,EAAS,MAAM,WAAaA,EAAS,MAAM,WAClF"}