updated pay oil

src/pages/pay/oil/pay_oil.vue

@@ -80,6 +80,63 @@
 
         <!-- RIGHT COLUMN: Payment and Pricing Details -->
         <div class="space-y-6">
+          <!-- Authorize.net Account Status Box -->
+          <div v-if="customer.id" class="bg-base-100 rounded-lg p-4 border">
+            <div class="flex flex-col xl:flex-row xl:items-center xl:justify-between gap-3">
+              <div class="flex items-center gap-3 min-w-0 flex-1">
+                <svg class="w-5 h-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v4a3 3 0 003 3z"/>
+                </svg>
+                <span v-if="isLoadingAuthorize" class="text-sm font-medium">
+                  <span class="loading loading-dots loading-xs mr-2"></span>
+                  Loading...
+                </span>
+                <span v-else-if="authorizeCheck.valid_for_charging" class="text-sm font-medium">
+                  Authorize Account ID: {{ customer.auth_net_profile_id }}
+                </span>
+                <span v-else class="text-sm font-medium text-red-600">
+                  {{ getAccountStatusMessage() }}
+                </span>
+              </div>
+              <div class="flex gap-2 flex-shrink-0" v-if="!isLoadingAuthorize">
+                <!-- CREATE ACCOUNT SECTION - Only show when account doesn't exist -->
+                <div v-if="!authorizeCheck.valid_for_charging" class="flex gap-2">
+                  <button
+                    v-if="credit_cards_count === 0"
+                    @click="addCreditCard"
+                    class="btn btn-primary btn-sm"
+                  >
+                    Add Card
+                  </button>
+                  <button
+                    @click="createAuthorizeAccount"
+                    :class="['btn btn-sm', credit_cards_count === 0 ? 'btn-disabled' : 'btn-primary']"
+                    :disabled="credit_cards_count === 0"
+                    v-if="credit_cards_count > 0"
+                  >
+                    Create Account
+                  </button>
+                  <button
+                    v-else
+                    @click="addCreditCard"
+                    class="btn btn-secondary btn-sm"
+                  >
+                    Add Card First
+                  </button>
+                </div>
+
+                <!-- DELETE ACCOUNT SECTION - Only show when account exists -->
+                <div v-if="authorizeCheck.valid_for_charging" class="flex gap-2">
+                  <button
+                    @click="showDeleteAccountModal"
+                    class="btn btn-error btn-sm"
+                  >
+                    Delete Account
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
 
           <!-- Payment & Pricing Card -->
           <div class="bg-neutral rounded-lg p-5">
@@ -153,15 +210,15 @@
           <div class="bg-neutral rounded-lg p-5">
              <div class="flex flex-wrap gap-4 justify-between items-center">
                 <!-- Pay Authorize Button -->
-                <button class="btn btn-warning" @click="$router.push({ name: 'authorizePreauthCharge', params: { id: $route.params.id } })">
+                <button class="btn btn-success" :class="{ 'btn-disabled': !authorizeCheck.valid_for_charging }" :disabled="!authorizeCheck.valid_for_charging" @click="$router.push({ name: 'authorizePreauthCharge', params: { id: $route.params.id } })">
                   Pay Authorize.net
                 </button>
                 <!-- A single confirm button is cleaner -->
-                <button class="btn btn-primary" @click="checkoutOilUpdatePayment(1)">
+                <button class="btn btn-warning" @click="checkoutOilUpdatePayment(1)">
                   Pay Tiger
                 </button>
                 <router-link v-if="delivery && delivery.id" :to="{ name: 'deliveryEdit', params: { id: delivery.id } }">
-                  <button class="btn btn-sm btn-ghost">Edit Delivery</button>
+                  <button class="btn btn-sm btn-primary">Edit Delivery</button>
                 </router-link>
             </div>
           </div>
@@ -171,6 +228,90 @@
     </div>
   </div>
 
+  <!-- Delete Account Confirmation Modal -->
+  <div class="modal" :class="{ 'modal-open': isDeleteAccountModalVisible }">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg">Confirm Account Deletion</h3>
+      <p class="py-4">This will permanently delete the Authorize.net account and remove all payment profiles. This action cannot be undone.</p>
+      <div class="modal-action">
+        <button @click="deleteAccount" class="btn btn-error">Delete Account</button>
+        <button @click="isDeleteAccountModalVisible = false" class="btn">Cancel</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Create Account Progress Modal -->
+  <div class="modal" :class="{ 'modal-open': isCreateAccountModalVisible }">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg">Creating Authorize.net Account</h3>
+      <div class="py-4 flex flex-col items-center">
+        <div v-if="isCreatingAccount" class="text-center">
+          <span class="text-lg mb-3">Setting up your payment account...</span>
+          <div class="loading loading-spinner loading-lg text-primary mb-3"></div>
+          <p class="text-sm text-gray-600">Please wait while we create your Authorize.net customer profile.</p>
+        </div>
+        <div v-else class="text-center">
+          <div class="text-success mb-3">
+            <svg class="w-12 h-12 mx-auto mb-2" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <p class="text-lg font-semibold mb-2">Account Created Successfully!</p>
+          <div class="bg-base-200 p-3 rounded-lg mb-4">
+            <p class="text-sm mb-1">Authorize.net Profile ID:</p>
+            <p class="font-mono font-bold text-success">{{ createdProfileId }}</p>
+          </div>
+          <p class="text-sm text-gray-600">Your payment account is now ready for transactions.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Duplicate Account Error Modal -->
+  <div class="modal" :class="{ 'modal-open': isDuplicateErrorModalVisible }">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg text-error">⚠️ Duplicate Account Detected</h3>
+      <div class="py-4 space-y-4">
+        <div class="text-center">
+          <svg class="w-16 h-16 mx-auto mb-4 text-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+          </svg>
+          <p class="text-lg font-semibold">Duplicate Account in Authorize.net</p>
+          <p class="text-sm text-gray-600 mt-2">
+            A duplicate account was found in your Authorize.net merchant account.
+          </p>
+          <p class="text-sm text-gray-600 mt-2">
+            Customer ID: <strong>{{ customer.id }}</strong>
+          </p>
+        </div>
+
+        <div class="bg-base-200 p-4 rounded-lg">
+          <h4 class="font-semibold mb-2 text-warning">Action Required:</h4>
+          <ul class="list-disc list-inside text-sm space-y-1">
+            <li>Manually check your Authorize.net merchant dashboard</li>
+            <li>Review existing customer profiles</li>
+            <li>Contact support for linkage if needed</li>
+          </ul>
+          <p class="text-xs text-gray-500 mt-2">
+            Inconsistency between your system and Authorize.net detected.
+          </p>
+        </div>
+
+        <div class="text-center pt-2">
+          <p class="text-xs text-gray-500">
+            This profile may have been created previously and needs manual linking.
+          </p>
+        </div>
+      </div>
+      <div class="modal-action">
+        <button class="btn btn-primary" @click="hideDuplicateErrorModal()">
+          Acknowledge
+        </button>
+      </div>
+    </div>
+  </div>
+
   <Footer />
 </template>
 
@@ -266,6 +407,7 @@ export default defineComponent({
         customer_home_type: 0,
         customer_phone_number: '',
         account_number: '',
+        auth_net_profile_id: null,
       },
       pricing: {
         price_from_supplier: 0,
@@ -289,6 +431,14 @@ export default defineComponent({
       total_amount: 0,
       discount: 0,
       total_amount_after_discount: 0,
+      credit_cards_count: 0,
+      isLoadingAuthorize: true,
+      authorizeCheck: { profile_exists: false, has_payment_methods: false, missing_components: [] as string[], valid_for_charging: false },
+      isDeleteAccountModalVisible: false,
+      isCreateAccountModalVisible: false,
+      isCreatingAccount: false,
+      createdProfileId: '',
+      isDuplicateErrorModalVisible: false,
     }
   },
   validations() {
@@ -423,6 +573,7 @@ export default defineComponent({
             console.log("=== DEBUG: Delivery ID after assignment:", this.delivery.id);
             this.getCustomer(this.delivery.customer_id)
             this.getCreditCards(this.delivery.customer_id)
+            this.getCreditCardsCount(this.delivery.customer_id)
             if (this.delivery.promo_id != null) {
                 this.getPromo(this.delivery.promo_id);
                 this.promo_active = true;
@@ -451,6 +602,16 @@ export default defineComponent({
         this.credit_cards = response.data
       })
     },
+    getCreditCardsCount(user_id: any) {
+      let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
+      axios({
+        method: 'get',
+        url: path,
+        headers: authHeader(),
+      }).then((response: any) => {
+        this.credit_cards_count = response.data.cards
+      })
+    },
     getCustomer(userid: any) {
       let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
       axios({
@@ -459,6 +620,7 @@ export default defineComponent({
         headers: authHeader(),
       }).then((response: any) => {
         this.customer = response.data
+        this.checkAuthorizeAccount();
       })
     },
     calculateTotalAmount() {
@@ -539,8 +701,218 @@ export default defineComponent({
           });
         });
     },
+    async checkAuthorizeAccount() {
+      if (!this.customer.id) return;
 
+      this.isLoadingAuthorize = true;
 
+      try {
+        const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/check-authorize-account/${this.customer.id}`;
+        const response = await axios.get(path, { headers: authHeader() });
+        this.authorizeCheck = response.data;
+
+        // Check if the API returned an error in the response body
+        if (this.authorizeCheck.missing_components && this.authorizeCheck.missing_components.includes('api_error')) {
+          console.log("API error detected in response, calling cleanup for customer:", this.customer.id);
+          this.cleanupAuthorizeData();
+          return; // Don't set loading to false yet, let cleanup handle it
+        }
+      } catch (error) {
+        console.error("Failed to check authorize account:", error);
+        notify({ title: "Error", text: "Could not check payment account status.", type: "error" });
+        // Set default error state
+        this.authorizeCheck = {
+          profile_exists: false,
+          has_payment_methods: false,
+          missing_components: ['api_error'],
+          valid_for_charging: false
+        };
+        // Automatically cleanup the local Authorize.Net data on API error
+        console.log("Calling cleanupAuthorizedData for customer:", this.customer.id);
+        this.cleanupAuthorizeData();
+      } finally {
+        this.isLoadingAuthorize = false;
+      }
+    },
+    async createAuthorizeAccount() {
+      // Show the creating account modal
+      this.isCreatingAccount = true;
+      this.isCreateAccountModalVisible = true;
+
+      try {
+        const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/create-account/${this.customer.id}`;
+        const response = await axios.post(path, {}, { headers: authHeader() });
+
+        if (response.data.success) {
+          // Update local state
+          this.customer.auth_net_profile_id = response.data.profile_id;
+          this.authorizeCheck.valid_for_charging = true;
+          this.authorizeCheck.profile_exists = true;
+          this.authorizeCheck.has_payment_methods = true;
+          this.authorizeCheck.missing_components = [];
+          this.createdProfileId = response.data.profile_id;
+
+          // Refresh credit cards to get updated payment profile IDs
+          await this.getCreditCards(this.customer.id);
+
+          // Switch modal to success view and close after delay
+          setTimeout(() => {
+            this.isCreatingAccount = false;
+            setTimeout(() => {
+              this.isCreateAccountModalVisible = false;
+              this.createdProfileId = '';
+
+              notify({
+                title: "Success",
+                text: "Authorize.net account created successfully!",
+                type: "success"
+              });
+            }, 3000); // Show success message for 3 seconds
+          }, 1000); // Brief delay to show success animation
+
+        } else {
+          // Hide modal on error
+          this.isCreateAccountModalVisible = false;
+
+          // Check for E00039 duplicate error
+          const errorMessage = response.data.message || response.data.error_detail || "Failed to create Authorize.net account";
+
+          if (response.data.is_duplicate || errorMessage.includes("E00039")) {
+            // Show duplicate account popup
+            setTimeout(() => {
+              this.showDuplicateErrorModal();
+            }, 300);
+            return;
+          } else {
+            // Normal error notification
+            notify({
+              title: "Error",
+              text: errorMessage,
+              type: "error"
+            });
+          }
+        }
+      } catch (error: any) {
+        console.error("Failed to create account:", error);
+        this.isCreateAccountModalVisible = false;
+        this.isCreatingAccount = false;
+
+        // Check for E00039 duplicate error
+        const errorMessage = error.response?.data?.error_detail ||
+                           error.response?.data?.detail ||
+                           error.response?.data?.message ||
+                           error.message || "Failed to create Authorize.net account";
+
+        if (error.response?.data?.is_duplicate || errorMessage.includes("E00039")) {
+          // Show duplicate account popup
+          setTimeout(() => {
+            this.showDuplicateErrorModal();
+          }, 300);
+          return;
+        }
+
+        // Normal error notification
+        notify({
+          title: "Error",
+          text: errorMessage,
+          type: "error"
+        });
+      }
+    },
+    showDeleteAccountModal() {
+      this.isDeleteAccountModalVisible = true;
+    },
+    showDuplicateErrorModal() {
+      this.isDuplicateErrorModalVisible = true;
+    },
+    hideDuplicateErrorModal() {
+      this.isDuplicateErrorModalVisible = false;
+    },
+    addCreditCard() {
+      // Redirect to add card page
+      this.$router.push({ name: 'cardadd', params: { customerId: this.customer.id } });
+    },
+    async deleteAccount() {
+      this.isDeleteAccountModalVisible = false;
+
+      try {
+        const path = `${import.meta.env.VITE_AUTHORIZE_URL}/user/delete-account/${this.customer.id}`;
+        const response = await axios.delete(path, { headers: authHeader() });
+
+        if (response.data.success) {
+          // Update local state
+          this.customer.auth_net_profile_id = null;
+          this.authorizeCheck.valid_for_charging = false;
+          this.authorizeCheck.profile_exists = false;
+          this.authorizeCheck.has_payment_methods = false;
+
+          // Refresh credit cards list (IDs should now be null)
+          this.getCreditCards(this.customer.id);
+
+          notify({
+            title: "Success",
+            text: "Authorize.net account deleted successfully",
+            type: "success"
+          });
+        } else {
+          notify({
+            title: "Warning",
+            text: response.data.message || "Account deletion completed with warnings",
+            type: "warning"
+          });
+        }
+      } catch (error: any) {
+        console.error("Failed to delete account:", error);
+        notify({
+          title: "Error",
+          text: "Failed to delete Authorize.net account",
+          type: "error"
+        });
+      }
+    },
+    async cleanupAuthorizeData() {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/payment/authorize/cleanup/${this.customer.id}`;
+        const response = await axios.post(path, {}, { headers: authHeader() });
+
+        if (response.data.ok) {
+          // Update local state to reflect cleanup
+          this.customer.auth_net_profile_id = null;
+          this.authorizeCheck.valid_for_charging = false;
+          this.authorizeCheck.profile_exists = false;
+          this.authorizeCheck.has_payment_methods = false;
+
+          // Refresh credit cards to reflect null payment profile IDs
+          this.getCreditCards(this.customer.id);
+
+          console.log("Successfully cleaned up Authorize.Net data:", response.data.message);
+        } else {
+          console.error("Failed to cleanup Authorize.Net data:", response.data.error);
+        }
+      } catch (error) {
+        console.error("Error during cleanup:", error);
+      }
+    },
+    getAccountStatusMessage(): string {
+      if (!this.authorizeCheck || !this.authorizeCheck.missing_components) {
+        return 'Account setup incomplete';
+      }
+
+      const missing = this.authorizeCheck.missing_components;
+      if (missing.includes('customer_not_found')) {
+        return 'Customer not found in Authorize.net';
+      } else if (missing.includes('authorize_net_profile')) {
+        return 'No Authorize.net profile configured';
+      } else if (missing.includes('authorize_net_profile_invalid')) {
+        return 'Authorize.net profile is invalid';
+      } else if (missing.includes('payment_method')) {
+        return 'No payment methods configured';
+      } else if (missing.includes('api_error')) {
+        return 'Error checking account status';
+      } else {
+        return 'Account requires setup';
+      }
+    }
 
   },
 })