major claude changes

src/pages/authorize/PaymentForm.vue

@@ -1,5 +1,5 @@
 <!-- src/pages/authorize/PaymentForm.vue -->
-<!-- <template>
+<template>
   <div class="container mx-auto p-4">
     <h1 class="text-2xl font-bold mb-4">HVAC Payment</h1>
 
@@ -87,89 +87,91 @@
       </div>
     </div>
 
-    <div v-if="transactionResult" class="mt-8 p-4 rounded-lg" :class="transactionResult.status === 'approved' || transactionResult.status === 'authorized' || transactionResult.status === 'captured' ? 'bg-green-200' : 'bg-red-200'">
+    <div v-if="transactionResult" class="mt-8 p-4 rounded-lg" :class="transactionResult.status === 0 || transactionResult.status === 1 || transactionResult.status === 2 ? 'bg-green-200' : 'bg-red-200'">
       <h3 class="font-bold">Transaction Result</h3>
       <p>Status: {{ transactionResult.status }}</p>
-      <p v-if="transactionResult.auth_net_transaction_id">Transaction ID: {{ transactionResult.auth_net_transaction_id }}</p>
+      <p v-if="transactionResult.transaction_id">Transaction ID: {{ transactionResult.transaction_id }}</p>
     </div>
   </div>
 </template>
 
-<script>
-import axios from 'axios';
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import { AuthorizeTransaction } from '../../types/models'
 
 const API_URL = 'http://localhost:8000/api'; // Your FastAPI backend URL
 
-export default {
-  data() {
-    return {
-      directCharge: {
-        cardNumber: '',
-        expirationDate: '',
-        cvv: '',
-        amount: 0,
-      },
-      authorization: {
-        cardNumber: '',
-        expirationDate: '',
-        cvv: '',
-        amount: 0,
-      },
-      capture: {
-        amount: 0,
-      },
-      authorizedTransactionId: null,
-      transactionResult: null,
-      customerId: 1 // Assuming a customer with ID 1 exists for this example
-    };
-  },
-  methods: {
-    async submitDirectCharge() {
-      try {
-        const response = await axios.post(`${API_URL}/charge/?customer_id=${this.customerId}`, {
-          card_number: this.directCharge.cardNumber,
-          expiration_date: this.directCharge.expirationDate,
-          cvv: this.directCharge.cvv,
-          amount: this.directCharge.amount,
-          transaction_type: 'charge'
-        });
-        this.transactionResult = response.data;
-      } catch (error) {
-        console.error(error);
-        this.transactionResult = { status: 'Error processing transaction' };
-      }
-    },
-    async submitAuthorization() {
-      try {
-        const response = await axios.post(`${API_URL}/authorize/?customer_id=${this.customerId}`, {
-          card_number: this.authorization.cardNumber,
-          expiration_date: this.authorization.expirationDate,
-          cvv: this.authorization.cvv,
-          amount: this.authorization.amount,
-          transaction_type: 'auth'
-        });
-        this.transactionResult = response.data;
-        if (response.data.status === 'authorized') {
-          this.authorizedTransactionId = response.data.auth_net_transaction_id;
-          this.capture.amount = this.authorization.amount; // Pre-fill capture amount
-        }
-      } catch (error) {
-        console.error(error);
-        this.transactionResult = { status: 'Error processing authorization' };
-      }
-    },
-    async submitCapture() {
-      try {
-        const response = await axios.post(`${API_URL}/capture/`, {
-          amount: this.capture.amount,
-          auth_net_transaction_id: this.authorizedTransactionId
-        });
-        this.transactionResult = response.data;
-      } catch (error) {
-        console.error(error);
-        this.transactionResult = { status: 'Error processing capture' };
-      }
-    },
-  },
-};
-</script> -->
+// Reactive data
+const directCharge = ref({
+  cardNumber: '',
+  expirationDate: '',
+  cvv: '',
+  amount: 0,
+})
+
+const authorization = ref({
+  cardNumber: '',
+  expirationDate: '',
+  cvv: '',
+  amount: 0,
+})
+
+const capture = ref({
+  amount: 0,
+})
+
+const authorizedTransactionId = ref<string | null>(null)
+const transactionResult = ref<AuthorizeTransaction | null>(null)
+const customerId = ref(1) // Assuming a customer with ID 1 exists for this example
+
+// Functions
+const submitDirectCharge = async () => {
+  try {
+    const response = await axios.post(`${API_URL}/charge/?customer_id=${customerId.value}`, {
+      card_number: directCharge.value.cardNumber,
+      expiration_date: directCharge.value.expirationDate,
+      cvv: directCharge.value.cvv,
+      amount: directCharge.value.amount,
+      transaction_type: 'charge'
+    });
+    transactionResult.value = response.data;
+  } catch (error) {
+    console.error(error);
+    transactionResult.value = null;
+  }
+}
+
+const submitAuthorization = async () => {
+  try {
+    const response = await axios.post(`${API_URL}/authorize/?customer_id=${customerId.value}`, {
+      card_number: authorization.value.cardNumber,
+      expiration_date: authorization.value.expirationDate,
+      cvv: authorization.value.cvv,
+      amount: authorization.value.amount,
+      transaction_type: 'auth'
+    });
+    transactionResult.value = response.data;
+    if (response.data.status === 'authorized') {
+      authorizedTransactionId.value = response.data.auth_net_transaction_id;
+      capture.value.amount = authorization.value.amount; // Pre-fill capture amount
+    }
+  } catch (error) {
+    console.error(error);
+    transactionResult.value = null;
+  }
+}
+
+const submitCapture = async () => {
+  try {
+    const response = await axios.post(`${API_URL}/capture/`, {
+      amount: capture.value.amount,
+      auth_net_transaction_id: authorizedTransactionId.value
+    });
+    transactionResult.value = response.data;
+  } catch (error) {
+    console.error(error);
+    transactionResult.value = null;
+  }
+}
+</script>