|
|
@@ -1,49 +1,39 @@
|
|
|
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
|
|
|
<template>
|
|
|
<q-page class="login-page bg-surface-dark">
|
|
|
- <Transition name="fade-slide" mode="out-in">
|
|
|
- <div v-if="!clicked" key="splash" class="splash-screen" @click="clicked = true">
|
|
|
- <img
|
|
|
- :src="BackgroundLogin"
|
|
|
- class="splash-layer splash-layer--bg"
|
|
|
- />
|
|
|
-
|
|
|
- <img
|
|
|
- :src="FotoDiarista"
|
|
|
- class="splash-layer splash-layer--photo"
|
|
|
- />
|
|
|
-
|
|
|
- <img
|
|
|
- :src="LogoLogin"
|
|
|
- class="splash-layer splash-layer--logo"
|
|
|
- />
|
|
|
+ <Transition mode="out-in" name="fade-slide">
|
|
|
+ <div
|
|
|
+ v-if="!clicked"
|
|
|
+ key="splash"
|
|
|
+ class="splash-screen"
|
|
|
+ @click="clicked = true"
|
|
|
+ >
|
|
|
+ <img class="splash-layer splash-layer--bg" :src="BackgroundLogin" />
|
|
|
+
|
|
|
+ <img class="splash-layer splash-layer--photo" :src="FotoDiarista" />
|
|
|
+
|
|
|
+ <img class="splash-layer splash-layer--logo" :src="LogoLogin" />
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
-
|
|
|
<div v-else key="flow" class="flow-screen">
|
|
|
-
|
|
|
<div
|
|
|
- v-if="steps >= 4 && !showSubStep"
|
|
|
- class="flow-header row items-center"
|
|
|
- >
|
|
|
- <q-btn
|
|
|
- flat
|
|
|
- round
|
|
|
- dense
|
|
|
- icon="mdi-arrow-left"
|
|
|
- color="primary"
|
|
|
- @click="goBack"
|
|
|
- />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div v-if="!showSubStep" class="flow-logo q-my-xl">
|
|
|
- <q-img
|
|
|
- :src="LogoDiariaCampos"
|
|
|
- style="max-width: 180px"
|
|
|
+ v-if="steps >= 4 && !showSubStep"
|
|
|
+ class="flow-header row items-center"
|
|
|
+ >
|
|
|
+ <q-btn
|
|
|
+ color="primary"
|
|
|
+ dense
|
|
|
+ flat
|
|
|
+ icon="mdi-arrow-left"
|
|
|
+ round
|
|
|
+ @click="goBack"
|
|
|
/>
|
|
|
</div>
|
|
|
|
|
|
+ <div v-if="!showSubStep" class="flow-logo q-my-xl">
|
|
|
+ <q-img style="max-width: 180px" :src="LogoDiariaCampos" />
|
|
|
+ </div>
|
|
|
+
|
|
|
<q-form
|
|
|
v-if="!registrationCompleted"
|
|
|
ref="loginForm"
|
|
|
@@ -64,10 +54,7 @@
|
|
|
v-model:phone="phone"
|
|
|
/>
|
|
|
|
|
|
- <LoginStepTwoPanel
|
|
|
- v-else-if="steps === 2"
|
|
|
- v-model:code="code"
|
|
|
- />
|
|
|
+ <LoginStepTwoPanel v-else-if="steps === 2" v-model:code="code" />
|
|
|
|
|
|
<LoginStepThreePanel
|
|
|
v-else-if="steps === 3"
|
|
|
@@ -85,10 +72,7 @@
|
|
|
v-model="stepFiveForm"
|
|
|
/>
|
|
|
|
|
|
- <LoginStepSixPanel
|
|
|
- v-else-if="steps === 6"
|
|
|
- v-model="stepSixForm"
|
|
|
- />
|
|
|
+ <LoginStepSixPanel v-else-if="steps === 6" v-model="stepSixForm" />
|
|
|
</div>
|
|
|
|
|
|
<div v-if="!showSubStep" class="flow-footer">
|
|
|
@@ -117,11 +101,11 @@
|
|
|
/>
|
|
|
|
|
|
<div class="registration-complete__title text-text fontbold">
|
|
|
- {{ t('provider.login.registration_complete.title') }}
|
|
|
+ {{ t("provider.login.registration_complete.title") }}
|
|
|
</div>
|
|
|
|
|
|
<div class="registration-complete__message text-grey-7 font12">
|
|
|
- {{ t('provider.login.registration_complete.message') }}
|
|
|
+ {{ t("provider.login.registration_complete.message") }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -130,104 +114,105 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { computed, onMounted, ref } from 'vue';
|
|
|
-import { createUserAndProvider, sendCode, validateCode } from 'src/api/user';
|
|
|
-import { useAuth } from 'src/composables/useAuth';
|
|
|
-import { useI18n } from 'vue-i18n';
|
|
|
-import { useQuasar } from 'quasar';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-
|
|
|
-import BackgroundLogin from 'src/assets/background-login.svg';
|
|
|
-import FotoDiarista from 'src/assets/foto_diarista_login.svg';
|
|
|
-import LogoLogin from 'src/assets/logo_diaria_login.svg';
|
|
|
-import LogoDiariaCampos from 'src/assets/logo_diaria_campos_login.svg';
|
|
|
-
|
|
|
-import LoginStepOnePanel from 'src/components/login/LoginStepOnePanel.vue';
|
|
|
-import LoginStepTwoPanel from 'src/components/login/LoginStepTwoPanel.vue';
|
|
|
-import LoginStepThreePanel from 'src/components/login/LoginStepThreePanel.vue';
|
|
|
-import LoginStepFourPanel from 'src/components/login/LoginStepFourPanel.vue';
|
|
|
-import LoginStepFivePanel from 'src/components/login/LoginStepFivePanel.vue';
|
|
|
-import LoginStepSixPanel from 'src/components/login/LoginStepSixPanel.vue';
|
|
|
+import { computed, onMounted, ref } from "vue";
|
|
|
+import { createUserAndProvider, sendCode, validateCode } from "src/api/user";
|
|
|
+import { useAuth } from "src/composables/useAuth";
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+import { useQuasar } from "quasar";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+
|
|
|
+import BackgroundLogin from "src/assets/background-login.svg";
|
|
|
+import FotoDiarista from "src/assets/foto_diarista_login.svg";
|
|
|
+import LogoDiariaCampos from "src/assets/logo_diaria_campos_login.svg";
|
|
|
+import LogoLogin from "src/assets/logo_diaria_login.svg";
|
|
|
+import LoginStepFivePanel from "src/components/login/LoginStepFivePanel.vue";
|
|
|
+import LoginStepFourPanel from "src/components/login/LoginStepFourPanel.vue";
|
|
|
+import LoginStepOnePanel from "src/components/login/LoginStepOnePanel.vue";
|
|
|
+import LoginStepSixPanel from "src/components/login/LoginStepSixPanel.vue";
|
|
|
+import LoginStepThreePanel from "src/components/login/LoginStepThreePanel.vue";
|
|
|
+import LoginStepTwoPanel from "src/components/login/LoginStepTwoPanel.vue";
|
|
|
|
|
|
-const { t } = useI18n();
|
|
|
const $q = useQuasar();
|
|
|
const router = useRouter();
|
|
|
const { setAuthDataFromPayload } = useAuth();
|
|
|
+const { t } = useI18n();
|
|
|
|
|
|
const clicked = ref(false);
|
|
|
-
|
|
|
-const showSubStep = ref(false);
|
|
|
-const registrationCompleted = ref(false);
|
|
|
-const steps = ref(1);
|
|
|
-const submitting = ref(false);
|
|
|
-const loginForm = ref(null);
|
|
|
+const code = ref("");
|
|
|
+const email = ref("");
|
|
|
const isLogin = ref(false);
|
|
|
-const email = ref('');
|
|
|
-const phone = ref('');
|
|
|
-const code = ref('');
|
|
|
-
|
|
|
-const goBack = () => {
|
|
|
- if (steps.value === 4) {
|
|
|
- steps.value = 3;
|
|
|
- } else if (steps.value === 5) {
|
|
|
- steps.value = 4;
|
|
|
- } else if (steps.value === 6) {
|
|
|
- steps.value = 5;
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
+const loginForm = ref(null);
|
|
|
+const phone = ref("");
|
|
|
+const registrationCompleted = ref(false);
|
|
|
+const showSubStep = ref(false);
|
|
|
|
|
|
-const stepThreeForm = ref({
|
|
|
- name: '',
|
|
|
- phone: '',
|
|
|
- email: '',
|
|
|
- rg: '',
|
|
|
- document: '',
|
|
|
- birth_date: '',
|
|
|
- zip_code: '',
|
|
|
- address: '',
|
|
|
- complement: '',
|
|
|
- no_complement: false,
|
|
|
- city: '',
|
|
|
- state: '',
|
|
|
- address_type: 'home',
|
|
|
- nickname: 'Principal',
|
|
|
- instructions: '',
|
|
|
+const stepFiveForm = ref({
|
|
|
+ daily_price_2h: null,
|
|
|
+ daily_price_4h: null,
|
|
|
+ daily_price_6h: null,
|
|
|
+ daily_price_8h: null,
|
|
|
+ services_types_ids: [],
|
|
|
});
|
|
|
|
|
|
const stepFourForm = ref({
|
|
|
- selfie: null,
|
|
|
- document_front: null,
|
|
|
document_back: null,
|
|
|
-});
|
|
|
-
|
|
|
-const stepFiveForm = ref({
|
|
|
- daily_price_8h: null,
|
|
|
- daily_price_6h: null,
|
|
|
- daily_price_4h: null,
|
|
|
- daily_price_2h: null,
|
|
|
- services_types_ids: [],
|
|
|
+ document_front: null,
|
|
|
+ selfie: null,
|
|
|
});
|
|
|
|
|
|
const stepSixForm = ref({
|
|
|
- account_type: 'checking',
|
|
|
- bank: '',
|
|
|
- branch_number: '',
|
|
|
- branch_check_digit: '',
|
|
|
- account_number: '',
|
|
|
- account_check_digit: '',
|
|
|
- pix_key: '',
|
|
|
+ account_check_digit: "",
|
|
|
+ account_number: "",
|
|
|
+ account_type: "checking",
|
|
|
+ bank: "",
|
|
|
+ branch_check_digit: "",
|
|
|
+ branch_number: "",
|
|
|
+ pix_key: "",
|
|
|
working_days: {},
|
|
|
});
|
|
|
|
|
|
+const stepThreeForm = ref({
|
|
|
+ address: "",
|
|
|
+ address_type: "home",
|
|
|
+ birth_date: "",
|
|
|
+ city: "",
|
|
|
+ complement: "",
|
|
|
+ document: "",
|
|
|
+ email: "",
|
|
|
+ instructions: "",
|
|
|
+ name: "",
|
|
|
+ nickname: "Principal",
|
|
|
+ no_complement: false,
|
|
|
+ phone: "",
|
|
|
+ rg: "",
|
|
|
+ state: "",
|
|
|
+ zip_code: "",
|
|
|
+});
|
|
|
+
|
|
|
+const steps = ref(1);
|
|
|
+
|
|
|
+const submitting = ref(false);
|
|
|
+
|
|
|
const actionLabel = computed(() => {
|
|
|
- if (steps.value === 1) return t('provider.login.steps.step_1.action');
|
|
|
- if (steps.value === 2) return t('provider.login.steps.step_2.action');
|
|
|
- if (steps.value === 6) return t('provider.login.steps.step_6.action');
|
|
|
+ if (steps.value === 1) return t("provider.login.steps.step_1.action");
|
|
|
+ if (steps.value === 2) return t("provider.login.steps.step_2.action");
|
|
|
+ if (steps.value === 6) return t("provider.login.steps.step_6.action");
|
|
|
|
|
|
- return t('provider.login.steps.step_3.action');
|
|
|
+ return t("provider.login.steps.step_3.action");
|
|
|
});
|
|
|
|
|
|
+const goBack = () => {
|
|
|
+ if (steps.value === 4) {
|
|
|
+ steps.value = 3;
|
|
|
+ } else if (steps.value === 5) {
|
|
|
+ steps.value = 4;
|
|
|
+ } else if (steps.value === 6) {
|
|
|
+ steps.value = 5;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const hasWorkingDaySelected = () => mapWorkingDays().length > 0;
|
|
|
+
|
|
|
const mapWorkingDays = () => {
|
|
|
const mapped = [];
|
|
|
|
|
|
@@ -235,92 +220,89 @@ const mapWorkingDays = () => {
|
|
|
|
|
|
Object.entries(workingDays).forEach(([dayKey, periods]) => {
|
|
|
if (periods?.morning) {
|
|
|
- mapped.push({ day: Number(dayKey), period: 'morning' });
|
|
|
+ mapped.push({ day: Number(dayKey), period: "morning" });
|
|
|
}
|
|
|
|
|
|
if (periods?.afternoon) {
|
|
|
- mapped.push({ day: Number(dayKey), period: 'afternoon' });
|
|
|
+ mapped.push({ day: Number(dayKey), period: "afternoon" });
|
|
|
}
|
|
|
});
|
|
|
|
|
|
return mapped;
|
|
|
};
|
|
|
|
|
|
-const hasWorkingDaySelected = () => {
|
|
|
- return mapWorkingDays().length > 0;
|
|
|
-};
|
|
|
-
|
|
|
-const sendValidationCode = async () => {
|
|
|
- const response = await sendCode(email.value, phone.value);
|
|
|
-
|
|
|
- if (response.status === 201) {
|
|
|
- steps.value = 2;
|
|
|
- }
|
|
|
+const onSubmit = async () => {
|
|
|
+ if (registrationCompleted.value) return;
|
|
|
+ if (showSubStep.value) return;
|
|
|
|
|
|
- return response;
|
|
|
-};
|
|
|
+ const isValid = await loginForm.value.validate();
|
|
|
|
|
|
-const toISODate = (value) => {
|
|
|
- const matches = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(value || '');
|
|
|
+ if (!isValid) return;
|
|
|
|
|
|
- if (!matches) return null;
|
|
|
+ submitting.value = true;
|
|
|
|
|
|
- return `${matches[3]}-${matches[2]}-${matches[1]}`;
|
|
|
-};
|
|
|
+ try {
|
|
|
+ switch (steps.value) {
|
|
|
+ case 1: {
|
|
|
+ const response = await sendValidationCode();
|
|
|
|
|
|
-const validateCodeInput = async () => {
|
|
|
- const response = await validateCode(email.value, phone.value, code.value, isLogin.value);
|
|
|
+ isLogin.value = response?.data?.payload?.isLogin === true;
|
|
|
|
|
|
- if (response.status === 200) {
|
|
|
- if (isLogin.value === true) {
|
|
|
- await setAuthDataFromPayload(response.data.payload);
|
|
|
+ break;
|
|
|
+ }
|
|
|
|
|
|
- router.push({ name: 'DashboardPage' });
|
|
|
+ case 2:
|
|
|
+ await validateCodeInput();
|
|
|
|
|
|
- return;
|
|
|
- }
|
|
|
+ break;
|
|
|
|
|
|
- stepThreeForm.value.email = email.value;
|
|
|
- stepThreeForm.value.phone = phone.value;
|
|
|
+ case 3: {
|
|
|
+ if (await validateCurrentStep()) {
|
|
|
+ steps.value = 4;
|
|
|
+ }
|
|
|
|
|
|
- steps.value = 3;
|
|
|
- }
|
|
|
-};
|
|
|
+ break;
|
|
|
+ }
|
|
|
|
|
|
-const validateCurrentStep = async () => {
|
|
|
- const isValid = await loginForm.value?.validate();
|
|
|
+ case 4: {
|
|
|
+ if (await validateCurrentStep()) {
|
|
|
+ steps.value = 5;
|
|
|
+ }
|
|
|
|
|
|
- if (!isValid) {
|
|
|
- return false;
|
|
|
- }
|
|
|
+ break;
|
|
|
+ }
|
|
|
|
|
|
- if(steps.value === 4) {
|
|
|
- const hasSelfie = !!stepFourForm.value.selfie;
|
|
|
+ case 5: {
|
|
|
+ if (await validateCurrentStep()) {
|
|
|
+ steps.value = 6;
|
|
|
+ }
|
|
|
|
|
|
- const hasDocumentFront = !!stepFourForm.value.document_front;
|
|
|
+ break;
|
|
|
+ }
|
|
|
|
|
|
- const hasDocumentBack = !!stepFourForm.value.document_back;
|
|
|
+ case 6: {
|
|
|
+ if (await validateCurrentStep()) {
|
|
|
+ await registerUserAndProvider();
|
|
|
+ }
|
|
|
|
|
|
- if (!hasSelfie || !hasDocumentFront || !hasDocumentBack) {
|
|
|
- $q.notify({
|
|
|
- type: 'negative',
|
|
|
- message: t('provider.login.steps.step_4.upload_all_photos'),
|
|
|
- });
|
|
|
+ break;
|
|
|
+ }
|
|
|
|
|
|
- return false;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
}
|
|
|
- }
|
|
|
+ } catch (error) {
|
|
|
+ console.error(error);
|
|
|
|
|
|
- if (steps.value === 6 && !hasWorkingDaySelected()) {
|
|
|
- $q.notify({
|
|
|
- type: 'negative',
|
|
|
- message: t('provider.login.steps.step_6.select_at_least_one'),
|
|
|
- });
|
|
|
+ const msg =
|
|
|
+ error?.response?.data?.message ??
|
|
|
+ error?.message ??
|
|
|
+ "Erro ao concluir cadastro. Tente novamente.";
|
|
|
|
|
|
- return false;
|
|
|
+ $q.notify({ message: msg, type: "negative" });
|
|
|
+ } finally {
|
|
|
+ submitting.value = false;
|
|
|
}
|
|
|
-
|
|
|
- return true;
|
|
|
};
|
|
|
|
|
|
const registerUserAndProvider = async () => {
|
|
|
@@ -328,12 +310,17 @@ const registerUserAndProvider = async () => {
|
|
|
|
|
|
const form = new FormData();
|
|
|
|
|
|
- const hasValue = (val) => val !== null && val !== undefined && String(val).trim() !== '';
|
|
|
+ const hasValue = (val) =>
|
|
|
+ val !== null && val !== undefined && String(val).trim() !== "";
|
|
|
|
|
|
const append = (key, val) => {
|
|
|
- if (val === null || val === undefined || val === '') return;
|
|
|
- if (typeof val === 'boolean') form.append(key, val ? '1' : '0');
|
|
|
- else form.append(key, val);
|
|
|
+ if (val === null || val === undefined || val === "") return;
|
|
|
+
|
|
|
+ if (typeof val === "boolean") {
|
|
|
+ form.append(key, val ? "1" : "0");
|
|
|
+ } else {
|
|
|
+ form.append(key, val);
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
const appendIfFilled = (key, val) => {
|
|
|
@@ -342,43 +329,50 @@ const registerUserAndProvider = async () => {
|
|
|
form.append(key, val);
|
|
|
};
|
|
|
|
|
|
- append('name', stepThreeForm.value.name);
|
|
|
- append('email', stepThreeForm.value.email || email.value);
|
|
|
- append('phone', stepThreeForm.value.phone || phone.value);
|
|
|
- append('code', code.value);
|
|
|
- append('rg', stepThreeForm.value.rg);
|
|
|
- append('document', stepThreeForm.value.document);
|
|
|
- append('birth_date', toISODate(stepThreeForm.value.birth_date));
|
|
|
- append('zip_code', stepThreeForm.value.zip_code);
|
|
|
- append('address', stepThreeForm.value.address);
|
|
|
- append('has_complement', !stepThreeForm.value.no_complement);
|
|
|
- append('complement', stepThreeForm.value.no_complement ? null : stepThreeForm.value.complement);
|
|
|
- append('nickname', stepThreeForm.value.nickname);
|
|
|
- append('instructions', stepThreeForm.value.instructions);
|
|
|
- append('city', stepThreeForm.value.city);
|
|
|
- append('state', stepThreeForm.value.state);
|
|
|
- append('address_type', stepThreeForm.value.address_type);
|
|
|
-
|
|
|
- append('daily_price_8h', Number(stepFiveForm.value.daily_price_8h));
|
|
|
- append('daily_price_6h', Number(stepFiveForm.value.daily_price_6h));
|
|
|
- append('daily_price_4h', Number(stepFiveForm.value.daily_price_4h));
|
|
|
- append('daily_price_2h', Number(stepFiveForm.value.daily_price_2h));
|
|
|
-
|
|
|
- (stepFiveForm.value.services_types_ids ?? []).forEach(id => form.append('services_types_ids[]', id));
|
|
|
-
|
|
|
- workingDays.forEach((wd, i) => {
|
|
|
- form.append(`working_days[${i}][day]`, wd.day);
|
|
|
- form.append(`working_days[${i}][period]`, wd.period);
|
|
|
+ append("name", stepThreeForm.value.name);
|
|
|
+ append("email", stepThreeForm.value.email || email.value);
|
|
|
+ append("phone", stepThreeForm.value.phone || phone.value);
|
|
|
+ append("code", code.value);
|
|
|
+ append("rg", stepThreeForm.value.rg);
|
|
|
+ append("document", stepThreeForm.value.document);
|
|
|
+ append("birth_date", toISODate(stepThreeForm.value.birth_date));
|
|
|
+ append("zip_code", stepThreeForm.value.zip_code);
|
|
|
+ append("address", stepThreeForm.value.address);
|
|
|
+ append("has_complement", !stepThreeForm.value.no_complement);
|
|
|
+
|
|
|
+ append(
|
|
|
+ "complement",
|
|
|
+ stepThreeForm.value.no_complement ? null : stepThreeForm.value.complement,
|
|
|
+ );
|
|
|
+
|
|
|
+ append("nickname", stepThreeForm.value.nickname);
|
|
|
+ append("instructions", stepThreeForm.value.instructions);
|
|
|
+ append("city", stepThreeForm.value.city);
|
|
|
+ append("state", stepThreeForm.value.state);
|
|
|
+ append("address_type", stepThreeForm.value.address_type);
|
|
|
+
|
|
|
+ append("daily_price_8h", Number(stepFiveForm.value.daily_price_8h));
|
|
|
+ append("daily_price_6h", Number(stepFiveForm.value.daily_price_6h));
|
|
|
+ append("daily_price_4h", Number(stepFiveForm.value.daily_price_4h));
|
|
|
+ append("daily_price_2h", Number(stepFiveForm.value.daily_price_2h));
|
|
|
+
|
|
|
+ (stepFiveForm.value.services_types_ids ?? []).forEach((id) => {
|
|
|
+ form.append("services_types_ids[]", id);
|
|
|
+ });
|
|
|
+
|
|
|
+ workingDays.forEach((workingDay, index) => {
|
|
|
+ form.append(`working_days[${index}][day]`, workingDay.day);
|
|
|
+ form.append(`working_days[${index}][period]`, workingDay.period);
|
|
|
});
|
|
|
|
|
|
- form.append('selfie', stepFourForm.value.selfie);
|
|
|
- form.append('document_front', stepFourForm.value.document_front);
|
|
|
- form.append('document_back', stepFourForm.value.document_back);
|
|
|
+ form.append("selfie", stepFourForm.value.selfie);
|
|
|
+ form.append("document_front", stepFourForm.value.document_front);
|
|
|
+ form.append("document_back", stepFourForm.value.document_back);
|
|
|
|
|
|
- append('recipient_name', stepThreeForm.value.name);
|
|
|
- append('recipient_email', stepThreeForm.value.email || email.value);
|
|
|
- append('recipient_document', stepThreeForm.value.document);
|
|
|
- append('recipient_type', 'individual');
|
|
|
+ append("recipient_name", stepThreeForm.value.name);
|
|
|
+ append("recipient_email", stepThreeForm.value.email || email.value);
|
|
|
+ append("recipient_document", stepThreeForm.value.document);
|
|
|
+ append("recipient_type", "individual");
|
|
|
|
|
|
const hasBankAccountData = [
|
|
|
stepSixForm.value.bank,
|
|
|
@@ -388,17 +382,50 @@ const registerUserAndProvider = async () => {
|
|
|
].every(hasValue);
|
|
|
|
|
|
if (hasBankAccountData) {
|
|
|
- append('recipient_payment_mode', 'bank_transfer');
|
|
|
- append('recipient_default_bank_account[type]', stepSixForm.value.account_type);
|
|
|
- append('recipient_default_bank_account[bank]', stepSixForm.value.bank);
|
|
|
- append('recipient_default_bank_account[branch_number]', stepSixForm.value.branch_number);
|
|
|
- appendIfFilled('recipient_default_bank_account[branch_check_digit]', stepSixForm.value.branch_check_digit);
|
|
|
- append('recipient_default_bank_account[account_number]', stepSixForm.value.account_number);
|
|
|
- append('recipient_default_bank_account[account_check_digit]', stepSixForm.value.account_check_digit);
|
|
|
- appendIfFilled('recipient_default_bank_account[pix_key]', stepSixForm.value.pix_key);
|
|
|
- append('recipient_default_bank_account[holder_name]', stepThreeForm.value.name);
|
|
|
- append('recipient_default_bank_account[holder_document]', stepThreeForm.value.document);
|
|
|
- append('recipient_default_bank_account[holder_type]', 'individual');
|
|
|
+ append("recipient_payment_mode", "bank_transfer");
|
|
|
+ append(
|
|
|
+ "recipient_default_bank_account[type]",
|
|
|
+ stepSixForm.value.account_type,
|
|
|
+ );
|
|
|
+
|
|
|
+ append("recipient_default_bank_account[bank]", stepSixForm.value.bank);
|
|
|
+
|
|
|
+ append(
|
|
|
+ "recipient_default_bank_account[branch_number]",
|
|
|
+ stepSixForm.value.branch_number,
|
|
|
+ );
|
|
|
+
|
|
|
+ appendIfFilled(
|
|
|
+ "recipient_default_bank_account[branch_check_digit]",
|
|
|
+ stepSixForm.value.branch_check_digit,
|
|
|
+ );
|
|
|
+
|
|
|
+ append(
|
|
|
+ "recipient_default_bank_account[account_number]",
|
|
|
+ stepSixForm.value.account_number,
|
|
|
+ );
|
|
|
+
|
|
|
+ append(
|
|
|
+ "recipient_default_bank_account[account_check_digit]",
|
|
|
+ stepSixForm.value.account_check_digit,
|
|
|
+ );
|
|
|
+
|
|
|
+ appendIfFilled(
|
|
|
+ "recipient_default_bank_account[pix_key]",
|
|
|
+ stepSixForm.value.pix_key,
|
|
|
+ );
|
|
|
+
|
|
|
+ append(
|
|
|
+ "recipient_default_bank_account[holder_name]",
|
|
|
+ stepThreeForm.value.name,
|
|
|
+ );
|
|
|
+
|
|
|
+ append(
|
|
|
+ "recipient_default_bank_account[holder_document]",
|
|
|
+ stepThreeForm.value.document,
|
|
|
+ );
|
|
|
+
|
|
|
+ append("recipient_default_bank_account[holder_type]", "individual");
|
|
|
}
|
|
|
|
|
|
const response = await createUserAndProvider(form);
|
|
|
@@ -408,75 +435,77 @@ const registerUserAndProvider = async () => {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
-const onSubmit = async () => {
|
|
|
- if (registrationCompleted.value) return;
|
|
|
- if (showSubStep.value) return; // Não submete o form principal se estiver em um sub-passo
|
|
|
-
|
|
|
- const isValid = await loginForm.value.validate();
|
|
|
-
|
|
|
- if (!isValid) return;
|
|
|
+const sendValidationCode = async () => {
|
|
|
+ const response = await sendCode(email.value, phone.value);
|
|
|
|
|
|
- submitting.value = true;
|
|
|
+ if (response.status === 201) {
|
|
|
+ steps.value = 2;
|
|
|
+ }
|
|
|
|
|
|
- try {
|
|
|
- switch (steps.value) {
|
|
|
- case 1: {
|
|
|
- const response = await sendValidationCode();
|
|
|
+ return response;
|
|
|
+};
|
|
|
|
|
|
- isLogin.value = response?.data?.payload?.isLogin === true;
|
|
|
+const toISODate = (value) => {
|
|
|
+ const matches = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(value || "");
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (!matches) return null;
|
|
|
|
|
|
- case 2:
|
|
|
- await validateCodeInput();
|
|
|
+ return `${matches[3]}-${matches[2]}-${matches[1]}`;
|
|
|
+};
|
|
|
|
|
|
- break;
|
|
|
+const validateCodeInput = async () => {
|
|
|
+ const response = await validateCode(
|
|
|
+ email.value,
|
|
|
+ phone.value,
|
|
|
+ code.value,
|
|
|
+ isLogin.value,
|
|
|
+ );
|
|
|
|
|
|
- case 3: {
|
|
|
- if (await validateCurrentStep()) {
|
|
|
- steps.value = 4;
|
|
|
- }
|
|
|
+ if (response.status === 200) {
|
|
|
+ if (isLogin.value === true) {
|
|
|
+ await setAuthDataFromPayload(response.data.payload);
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
+ router.push({ name: "DashboardPage" });
|
|
|
|
|
|
- case 4: {
|
|
|
- if (await validateCurrentStep()) {
|
|
|
- steps.value = 5;
|
|
|
- }
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
+ stepThreeForm.value.email = email.value;
|
|
|
+ stepThreeForm.value.phone = phone.value;
|
|
|
+ steps.value = 3;
|
|
|
+ }
|
|
|
+};
|
|
|
|
|
|
- case 5: {
|
|
|
- if (await validateCurrentStep()) {
|
|
|
- steps.value = 6;
|
|
|
- }
|
|
|
+const validateCurrentStep = async () => {
|
|
|
+ const isValid = await loginForm.value?.validate();
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (!isValid) return false;
|
|
|
|
|
|
- case 6: {
|
|
|
- if (await validateCurrentStep()) {
|
|
|
- await registerUserAndProvider();
|
|
|
- }
|
|
|
+ if (steps.value === 4) {
|
|
|
+ const hasDocumentBack = !!stepFourForm.value.document_back;
|
|
|
+ const hasDocumentFront = !!stepFourForm.value.document_front;
|
|
|
+ const hasSelfie = !!stepFourForm.value.selfie;
|
|
|
|
|
|
- break;
|
|
|
- }
|
|
|
+ if (!hasSelfie || !hasDocumentFront || !hasDocumentBack) {
|
|
|
+ $q.notify({
|
|
|
+ message: t("provider.login.steps.step_4.upload_all_photos"),
|
|
|
+ type: "negative",
|
|
|
+ });
|
|
|
|
|
|
- default:
|
|
|
- break;
|
|
|
+ return false;
|
|
|
}
|
|
|
- } catch (error) {
|
|
|
- console.error(error);
|
|
|
+ }
|
|
|
|
|
|
- const msg = error?.response?.data?.message ?? error?.message ?? 'Erro ao concluir cadastro. Tente novamente.';
|
|
|
+ if (steps.value === 6 && !hasWorkingDaySelected()) {
|
|
|
+ $q.notify({
|
|
|
+ message: t("provider.login.steps.step_6.select_at_least_one"),
|
|
|
+ type: "negative",
|
|
|
+ });
|
|
|
|
|
|
- $q.notify({ type: 'negative', message: msg });
|
|
|
- } finally {
|
|
|
- submitting.value = false;
|
|
|
+ return false;
|
|
|
}
|
|
|
+
|
|
|
+ return true;
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
@@ -485,11 +514,12 @@ onMounted(() => {
|
|
|
}, 1500);
|
|
|
});
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.fade-slide-enter-active,
|
|
|
.fade-slide-leave-active {
|
|
|
- transition: opacity 0.35s ease, transform 0.35s ease;
|
|
|
+ transition:
|
|
|
+ opacity 0.35s ease,
|
|
|
+ transform 0.35s ease;
|
|
|
}
|
|
|
.fade-slide-enter-from {
|
|
|
opacity: 0;
|
|
|
@@ -606,4 +636,4 @@ onMounted(() => {
|
|
|
line-height: 1.45;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
