eamco_office_frontend/src/pages/authorize/PaymentForm.vue

<!-- src/pages/authorize/PaymentForm.vue -->
<!-- <template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">HVAC Payment</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <div>
        <h2 class="text-xl font-semibold mb-2">Direct Charge</h2>
        <form @submit.prevent="submitDirectCharge">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Card Number</span>
            </label>
            <input type="text" v-model="directCharge.cardNumber" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Expiration Date (MM/YY)</span>
            </label>
            <input type="text" v-model="directCharge.expirationDate" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">CVV</span>
            </label>
            <input type="text" v-model="directCharge.cvv" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Amount</span>
            </label>
            <input type="number" v-model="directCharge.amount" class="input input-bordered" required />
          </div>
          <div class="form-control mt-6">
            <button type="submit" class="btn btn-primary">Charge</button>
          </div>
        </form>
      </div>

      <div>
        <h2 class="text-xl font-semibold mb-2">Authorize and Capture</h2>
        <form @submit.prevent="submitAuthorization">
          <div class="form-control">
            <label class="label">
              <span class="label-text">Card Number</span>
            </label>
            <input type="text" v-model="authorization.cardNumber" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Expiration Date (MM/YY)</span>
            </label>
            <input type="text" v-model="authorization.expirationDate" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">CVV</span>
            </label>
            <input type="text" v-model="authorization.cvv" class="input input-bordered" required />
          </div>
          <div class="form-control">
            <label class="label">
              <span class="label-text">Amount</span>
            </label>
            <input type="number" v-model="authorization.amount" class="input input-bordered" required />
          </div>
          <div class="form-control mt-6">
            <button type="submit" class="btn btn-secondary">Authorize</button>
          </div>
        </form>

        <div v-if="authorizedTransactionId" class="mt-8">
          <h3 class="text-lg font-semibold mb-2">Capture Authorized Amount</h3>
          <p>Authorized Transaction ID: {{ authorizedTransactionId }}</p>
          <form @submit.prevent="submitCapture">
            <div class="form-control">
              <label class="label">
                <span class="label-text">Capture Amount</span>
              </label>
              <input type="number" v-model="capture.amount" class="input input-bordered" required />
            </div>
            <div class="form-control mt-6">
              <button type="submit" class="btn btn-accent">Capture</button>
            </div>
          </form>
        </div>
      </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'">
      <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>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

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> -->