"Adding Pix Key input validation"

src/components/SellerSteps/WantSellComponent.vue

@@ -3,6 +3,7 @@ import { ref } from "vue";
 import CustomButton from "../CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
+import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
@@ -17,6 +18,7 @@ const pixKey = ref<string>("");
 const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
+const validPixFormat = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["approveTokens"]);
@@ -35,10 +37,26 @@ const handleInputEvent = (event: any): void => {
   validDecimals.value = true;
 };
 
+const handlePixKeyInputEvent = (event: any): void => {
+  const { value } = event.target;
+
+  pixKey.value = value;
+
+  if (pixFormatValidation(pixKey.value)) {
+    validPixFormat.value = true;
+    enableSelectButton.value = true;
+    return;
+  }
+
+  enableSelectButton.value = false;
+  validPixFormat.value = false;
+};
+
 const handleButtonClick = async (
   offer: string,
   pixKey: string
 ): Promise<void> => {
+  console.log(postProcessKey(pixKey));
   if (walletAddress.value) emit("approveTokens", { offer, pixKey });
   else await connectProvider();
 };
@@ -96,15 +114,22 @@ const handleButtonClick = async (
       >
         <div class="flex justify-between w-full items-center">
           <input
+            @input="debounce(handlePixKeyInputEvent, 500)($event)"
             type="text"
             v-model="pixKey"
             class="border-none outline-none text-lg text-gray-900 w-fit"
             placeholder="Digite a chave Pix"
           />
         </div>
+        <div class="flex pt-2 justify-center" v-if="!validPixFormat">
+          <span class="text-red-500 font-normal text-sm"
+            >Por favor utilize telefone, CPF ou CNPJ</span
+          >
+        </div>
       </div>
       <CustomButton
         :text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'"
+        :isDisabled="!validDecimals || !validPixFormat"
         @buttonClicked="handleButtonClick(offer, pixKey)"
       />
     </div>

src/utils/pixKeyFormat.ts

@@ -0,0 +1,16 @@
+export const pixFormatValidation = (pixKey: string): boolean => {
+  const cpf = /(^\d{3}\.?\d{3}\.?\d{3}-?\d{2}$)/g;
+  const cnpj = /(^\d{2}\.?\d{3}\.?\d{3}\/?\d{4}-?\d{2}$)/g;
+  const telefone = /(^[0-9]{2})?(\s|-)?(9?[0-9]{4})-?([0-9]{4}$)/g;
+
+  if (pixKey.match(cpf) || pixKey.match(cnpj) || pixKey.match(telefone)) {
+    return true;
+  }
+
+  return false;
+};
+
+export const postProcessKey = (pixKey: string): string => {
+  pixKey = pixKey.replace(/[-.()/]/g, "");
+  return pixKey;
+};