Sfoglia il codice sorgente

refator: ajuste na tela de login pos cadastro (aguardando aprovacao)

Gustavo Mantovani 3 settimane fa
parent
commit
3aa7f62aaa

+ 3 - 1
src/api/user.js

@@ -64,6 +64,8 @@ export const validateCode = async (email, phone, code, isLogin = false) => {
 // };
 
 export const createUserAndProvider = async (data) => {
-  const response = await api.post("/register-provider", data);
+  const response = await api.post("/register-provider", data, {
+    skipSuccessNotify: true,
+  });
   return response;
 };

+ 1 - 1
src/boot/axios.js

@@ -93,7 +93,7 @@ const errorInterceptor = async (error, router) => {
 };
 
 const successInterceptor = (response) => {
-  if (response.data.message) {
+  if (response.data.message && response.config?.skipSuccessNotify !== true) {
     Notify.create({
       message: response.data.message,
       type: "positive",

+ 13 - 4
src/components/login/LoginStepTwoPanel.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card-section class="no-padding q-mb-xl">
+  <q-card-section class="code-section no-padding q-mb-xl">
     <div class="text-text q-mb-xs text-left">
       <span class="fontmedium">{{ $t('auth.validation_code') }}</span>
     </div>
@@ -48,13 +48,16 @@ const focusCodeInput = () => {
 <style lang="scss" scoped>
 .code-boxes-wrapper {
   display: flex;
-  gap: 10px;
+  width: 100%;
+  gap: clamp(4px, 2vw, 10px);
   justify-content: center;
   cursor: text;
 
   .code-box {
-    width: 44px;
-    height: 45px;
+    flex: 0 1 44px;
+    min-width: 0;
+    max-width: 44px;
+    aspect-ratio: 1;
     border: 2px solid #e4e4e4;
     background-color: #F9FAFB;
     border-radius: 8px;
@@ -71,6 +74,12 @@ const focusCodeInput = () => {
   }
 }
 
+.code-section {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .code-hidden-input {
   position: absolute;
   opacity: 0;

+ 4 - 0
src/i18n/locales/en.json

@@ -234,6 +234,10 @@
           "select_at_least_one": "Select at least one work period.",
           "action": "finish registration"
         }
+      },
+      "registration_complete": {
+        "title": "Registration sent!",
+        "message": "Your registration was received and is under review. Please wait for approval before entering the platform."
       }
     },
     "dashboard": {

+ 4 - 0
src/i18n/locales/es.json

@@ -234,6 +234,10 @@
           "select_at_least_one": "Seleccione al menos un período de trabajo.",
           "action": "finalizar registro"
         }
+      },
+      "registration_complete": {
+        "title": "¡Registro enviado!",
+        "message": "Su registro fue recibido y está en análisis. Espere la aprobación para entrar en la plataforma."
       }
     },
     "dashboard": {

+ 4 - 0
src/i18n/locales/pt.json

@@ -234,6 +234,10 @@
             "select_at_least_one": "Selecione ao menos um período de trabalho.",
             "action": "concluir cadastro"
         }
+      },
+      "registration_complete": {
+        "title": "Cadastro enviado!",
+        "message": "Seu cadastro foi recebido e está em análise. Aguarde a aprovação para entrar na plataforma."
       }
     },
     "dashboard": {

+ 63 - 17
src/pages/LoginPage.vue

@@ -1,9 +1,6 @@
 <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
 <template>
   <q-page class="login-page bg-surface-dark">
-      <span class="text-text">
-      {{steps}}
-      </span>
     <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" />
@@ -17,6 +14,7 @@
         </div>
 
         <q-form
+          v-if="!registrationCompleted"
           ref="loginForm"
           class="flow-form"
           autocorrect="off"
@@ -54,6 +52,16 @@
             </q-btn>
           </div>
         </q-form>
+
+        <div v-else class="registration-complete">
+          <q-icon name="mdi-check-circle-outline" size="52px" color="positive" class="q-mb-md" />
+          <div class="registration-complete__title text-text fontbold">
+            {{ t('provider.login.registration_complete.title') }}
+          </div>
+          <div class="registration-complete__message text-grey-7 font12">
+            {{ t('provider.login.registration_complete.message') }}
+          </div>
+        </div>
       </div>
     </Transition>
   </q-page>
@@ -86,6 +94,7 @@ const { setAuthDataFromPayload } = useAuth();
 
 const clicked = ref(false);
 const showSubStep = ref(false);
+const registrationCompleted = ref(false);
 const steps = ref(1);
 const submitting = ref(false);
 const loginForm = ref(null);
@@ -234,11 +243,16 @@ const registerUserAndProvider = async () => {
   const workingDays = mapWorkingDays();
   const form = new FormData();
 
+  const hasValue = (val) => val !== null && val !== undefined && String(val).trim() !== '';
   const append = (key, val) => {
     if (val === null || val === undefined) return;
     if (typeof val === 'boolean') form.append(key, val ? '1' : '0');
     else form.append(key, val);
   };
+  const appendIfFilled = (key, val) => {
+    if (!hasValue(val)) return;
+    form.append(key, val);
+  };
 
   append('name', stepThreeForm.value.name);
   append('email', stepThreeForm.value.email || email.value);
@@ -277,26 +291,36 @@ const registerUserAndProvider = async () => {
   append('recipient_email', stepThreeForm.value.email || email.value);
   append('recipient_document', stepThreeForm.value.document);
   append('recipient_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);
-  append('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);
-  append('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 hasBankAccountData = [
+    stepSixForm.value.bank,
+    stepSixForm.value.branch_number,
+    stepSixForm.value.account_number,
+    stepSixForm.value.account_check_digit,
+  ].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');
+  }
 
   const response = await createUserAndProvider(form);
-  if (response.status === 200) {
-    await setAuthDataFromPayload(response.data.payload);
-    router.push({ name: 'DashboardPage' });
+  if (response.status >= 200 && response.status < 300) {
+    registrationCompleted.value = true;
   }
 };
 
 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();
@@ -453,4 +477,26 @@ const onSubmit = async () => {
 .flow-footer {
   padding: 20px 0 12px;
 }
+
+.registration-complete {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 8px 80px;
+  text-align: center;
+
+  &__title {
+    font-size: 18px;
+    line-height: 1.25;
+    margin-bottom: 10px;
+  }
+
+  &__message {
+    max-width: 320px;
+    line-height: 1.45;
+  }
+}
 </style>