Working payment accopunts

src/pages/customer/profile/profile.vue

@@ -71,10 +71,68 @@
 
         <!-- FIX: Changed `lg:` to `xl:` -->
         <div class="xl:col-span-4 space-y-6">
-          <CustomerComments 
-            :comments="comments" 
-            @add-comment="onSubmitSocial" 
-            @delete-comment="deleteCustomerSocial" 
+          <!-- Authorize.net Account Status Box -->
+          <div v-if="customer.id" class="bg-base-100 rounded-lg p-4 border">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-3">
+                <svg class="w-5 h-5 text-blue-600" 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" 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>
+
+          <CustomerComments
+            :comments="comments"
+            @add-comment="onSubmitSocial"
+            @delete-comment="deleteCustomerSocial"
           />
           <CustomerStats :stats="customer_stats" :last_delivery="customer_last_delivery" />
           <TankInfo :customer_id="customer.id" :tank="customer_tank" :description="customer_description" />
@@ -117,6 +175,46 @@
       @close-modal="closePartsModal"
       @save-parts="handleSaveParts"
     />
+
+  <!-- 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-primary">{{ createdProfileId }}</p>
+          </div>
+          <p class="text-sm text-gray-600">Your payment account is now ready for transactions.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
 </template>
 
 <script lang="ts">
@@ -263,6 +361,12 @@ export default defineComponent({
       isPartsModalOpen: false,
       currentParts: null as ServiceParts | null,
       servicePlan: null as ServicePlan | null,
+      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: '',
     }
   },
    computed: {
@@ -327,6 +431,7 @@ export default defineComponent({
         this.fetchCustomerParts(this.customer.id);
         this.loadServicePlan(this.customer.id);
         this.getCustomerTransactions(this.customer.id);
+        this.checkAuthorizeAccount();
 
       }).catch((error: any) => {
           console.error("CRITICAL: Failed to fetch main customer data. Aborting other calls.", error);
@@ -745,6 +850,151 @@ onSubmitSocial(commentText: string) {
         // Plan doesn't exist yet, that's okay
         console.log('No existing service plan found');
       }
+    },
+    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;
+      } 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
+        };
+      } 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;
+          notify({
+            title: "Error",
+            text: response.data.message || "Failed to create Authorize.net account",
+            type: "error"
+          });
+        }
+      } catch (error: any) {
+        console.error("Failed to create account:", error);
+        this.isCreateAccountModalVisible = false;
+        this.isCreatingAccount = false;
+
+        notify({
+          title: "Error",
+          text: error.response?.data?.detail || "Failed to create Authorize.net account",
+          type: "error"
+        });
+      }
+    },
+    addCreditCard() {
+      // Redirect to add card page
+      this.$router.push({ name: 'cardadd', params: { customerId: this.customer.id } });
+    },
+    showDeleteAccountModal() {
+      this.isDeleteAccountModalVisible = true;
+    },
+    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"
+        });
+      }
+    },
+    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';
+      }
     }
   },
 })