form temp api connection

src/routes/formcpr/+page.svelte

@@ -11,33 +11,62 @@
   let previewOpen = false;
   let payloadString = '';
 
+  let loading = false;
+  let errorMsg = '';
+  let successMsg = '';
+
   const cardCls = 'rounded-lg bg-white/5 p-6 backdrop-blur-sm border border-white/10';
   const inputCls = 'mt-1 block w-full rounded-md bg-white/5 border border-white/10 px-3 py-2 text-sm text-white placeholder-white/50 focus:border-bg1_button_contact focus:ring-1 focus:ring-bg1_button_contact';
   const btnPrimary = 'inline-flex items-center justify-center rounded-md bg-gradient-to-r from-bg1_button_contact to-bg2_button_contact px-4 py-2 text-sm font-medium text-white shadow-sm hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bg1_button_contact transition-colors';
 
   function generatePayload() {
     const payload = {
-      instrument: {
-        cprTypeCode: nome,
-        otcRegisterAccountCode: numeroContato,
-        otcPaymentAgentAccountCode: email,
-        otcCustodianAccountCode: tipoProduto,
-        internalControlNumber: numeroControleInterno,
-        electronicEmissionIndicator: quantidadeProduto,
-        isinCode: nomePropriedade,
-        issueDate: localizacaoPropriedade
-      }
+      name: nome.trim(),
+      contact_number: numeroContato.trim(),
+      email: email.trim(),
+      product_type: tipoProduto.trim(),
+      internal_control_number: numeroControleInterno.trim(),
+      product_quantity: quantidadeProduto ? Number(quantidadeProduto) : 0,
+      property_name: nomePropriedade.trim(),
+      property_location: localizacaoPropriedade.trim()
     };
-    
+
     payloadString = JSON.stringify(payload, null, 2);
     return payload;
   }
 
-  function handleSubmit() {
+  async function handleSubmit() {
+    errorMsg = '';
+    successMsg = '';
     const payload = generatePayload();
     previewOpen = true;
-    
-    console.log('Payload enviado:', payload);
+    loading = true;
+    try {
+      const response = await fetch('https://tooeasy.trading/app/cpr/preregistration', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify(payload)
+      });
+      if (!response.ok) {
+        const text = await response.text();
+        throw new Error(text || `HTTP ${response.status}`);
+      }
+      let data = null;
+      const contentType = response.headers.get('content-type') || '';
+      if (contentType.includes('application/json')) {
+        data = await response.json();
+      }
+      successMsg = 'Pré-registro enviado com sucesso!';
+      console.log('Resposta da API:', data ?? '(sem corpo)');
+    } catch (err) {
+      console.error('Erro ao enviar pré-registro:', err);
+      errorMsg = 'Falha ao enviar. Tente novamente.';
+    } finally {
+      loading = false;
+    }
   }
 </script>
 <div class="bg-gradient-to-b from-bg1_contact to-bg2_contact min-h-screen">
@@ -73,9 +102,15 @@
       </div>
   
       <div class="flex flex-wrap items-center gap-3">
-        <button class={btnPrimary} type="button" on:click={handleSubmit}>
-          Enviar
+        <button class={`${btnPrimary} ${loading ? 'opacity-60 cursor-not-allowed' : ''}`} type="button" on:click={handleSubmit} disabled={loading}>
+          {loading ? 'Enviando...' : 'Enviar'}
         </button>
+        {#if successMsg}
+          <p class="text-green-400 text-sm">{successMsg}</p>
+        {/if}
+        {#if errorMsg}
+          <p class="text-red-400 text-sm">{errorMsg}</p>
+        {/if}
       </div>
     </div>
   </section>