Merge branch 'feature/diariaapp-kay-agendamentos-sob-medida-apps' of Softpar/sfp_front_vue_diarista_backoffice into development

src/pages/client/components/AddEditClientPaymentMethodDialog.vue

@@ -10,9 +10,10 @@
             :rules="[inputRules.required, validateCardNumber]"
             :error="!!serverErrors?.card_number"
             :error-message="serverErrors?.card_number"
-            mask="**** **** **** ####"
+            :mask="cardNumberMask"
             unmasked-value
             class="col-12"
+            @focus="onCardNumberFocus"
             @update:model-value="onCardNumberChange"
           >
             <template #append>
@@ -113,7 +114,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useDialogPluginComponent } from 'quasar'
 import { useI18n } from 'vue-i18n'
 import { useFormUpdateTracker } from 'src/composables/useFormUpdateTracker'
@@ -188,6 +189,16 @@ const validateExpiration = (val) => {
   return true
 }
 
+const cardNumberMask = computed(() => {
+  const cardNumber = String(form.card_number || '')
+  if (cardNumber.includes('*')) {
+    return '**** **** **** ####'
+  }
+
+  const digits = cardNumber.replace(/\D/g, '')
+  return digits.length > 16 ? '#### #### #### #### ###' : '#### #### #### ####'
+})
+
 const onCardNumberChange = () => {
   serverErrors.card_number = null
   
@@ -204,6 +215,12 @@ const onCardNumberChange = () => {
   }
 }
 
+const onCardNumberFocus = () => {
+  if (String(form.card_number || '').includes('*')) {
+    form.card_number = ''
+  }
+}
+
 const onOKClick = async () => {
   if (props.paymentMethod) {
     await submitForm(() => updateClientPaymentMethod(props.paymentMethod.id, getUpdatedFields.value))