config issues prod

src/pages/card/editcard.vue

@@ -124,7 +124,10 @@
           
           <!-- SUBMIT BUTTON -->
           <div class="pt-4">
-            <button type="submit" class="btn btn-primary btn-sm">Save Changes</button>
+            <button type="submit" class="btn btn-primary btn-sm" :disabled="isLoading">
+              <span v-if="isLoading" class="loading loading-spinner loading-xs"></span>
+              {{ isLoading ? 'Updating...' : 'Save Changes' }}
+            </button>
           </div>
         </form>
       </div>
@@ -140,6 +143,7 @@ import authHeader from '../../services/auth.header'
 import Footer from '../../layouts/footers/footer.vue'
 import useValidate from "@vuelidate/core";
 import { minLength, required } from "@vuelidate/validators";
+import { notify } from "@kyvg/vue3-notification";
 
 export default defineComponent({
   name: 'EditCard',
@@ -152,6 +156,9 @@ export default defineComponent({
       user: null as any,
       customer: {} as any,
       card: {} as any, // To store original card details for display
+      isLoading: false,
+      isLoadingAuthorize: true,
+      authorizeCheck: { profile_exists: false, has_payment_methods: false, missing_components: [] as string[], valid_for_charging: false },
       // --- REFACTORED: Simplified, flat form object ---
       CardForm: {
         name_on_card: '',
@@ -194,7 +201,33 @@ export default defineComponent({
     getCustomer(userid: any) {
       const path = `${import.meta.env.VITE_BASE_URL}/customer/${userid}`;
       axios.get(path, { headers: authHeader() })
-        .then((response: any) => { this.customer = response.data; });
+        .then((response: any) => {
+          this.customer = response.data;
+          this.checkAuthorizeAccount();
+        });
+    },
+    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;
+      }
     },
    getCard(card_id: any) {
   const path = `${import.meta.env.VITE_BASE_URL}/payment/card/${card_id}`;
@@ -241,14 +274,82 @@ editCard(payload: any) {
     })
     .catch(console.log("error"));
 },
-onSubmit() {
-  this.v$.$validate();
-  if (!this.v$.$error) {
-    this.editCard(this.CardForm); // This is correct, it sends the form object.
-  } else {
-    console.log("Form validation failed.");
-  }
-},
+async onSubmit() {
+      this.v$.$validate();
+      if (this.v$.$error) {
+        notify({ title: "Validation Error", text: "Please fill out all required fields.", type: "error" });
+        return;
+      }
+
+      this.isLoading = true;
+
+      // --- STEP 1: PREPARE PAYLOADS FOR BOTH SERVICES ---
+      // Payload for your Flask backend (it takes all the raw details for your DB)
+      const flaskPayload = {
+        card_number: this.CardForm.card_number,
+        expiration_month: this.CardForm.expiration_month,
+        expiration_year: this.CardForm.expiration_year,
+        type_of_card: this.CardForm.type_of_card,
+        security_number: this.CardForm.security_number,
+        main_card: this.CardForm.main_card,
+        zip_code: this.CardForm.zip_code,
+        name_on_card: this.CardForm.name_on_card,
+      };
+
+      // Payload for your FastAPI backend (it only needs the essentials for Authorize.Net)
+      const fastapiPayload = {
+        card_number: this.CardForm.card_number.replace(/\s/g, ''),
+        expiration_date: `${this.CardForm.expiration_year}-${this.CardForm.expiration_month}`,
+        cvv: this.CardForm.security_number,
+        main_card: this.CardForm.main_card,
+      };
+
+      // --- STEP 2: CRITICAL CALL - UPDATE CARD TO LOCAL DATABASE VIA FLASK ---
+      try {
+        const flaskPath = `${import.meta.env.VITE_BASE_URL}/payment/card/edit/${this.$route.params.id}`;
+        console.log("Attempting to update card to local DB via Flask:", flaskPath);
+        const flaskResponse = await axios.put(flaskPath, flaskPayload, { withCredentials: true, headers: authHeader() });
+
+        if (!flaskResponse.data.ok) {
+          throw new Error(flaskResponse.data.error || "Failed to update card.");
+        }
+        console.log("Card successfully updated to local database via Flask with ID:", this.$route.params.id);
+
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.error || "A critical error occurred while updating the card.";
+        notify({ title: "Error", text: errorMessage, type: "error" });
+        this.isLoading = false;
+        return;
+      }
+
+      // --- CHECK IF AUTHORIZE.NET PROFILE EXISTS ---
+      if (!this.authorizeCheck.profile_exists) {
+        console.log("Skipping Authorize.Net tokenization as no profile exists for customer.");
+        // Show success and redirect (card updated locally without tokenization)
+        notify({ title: "Success", text: "Credit card has been updated.", type: "success" });
+        this.isLoading = false;
+        this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
+        return;
+      }
+
+      // --- STEP 3: BEST-EFFORT CALL - TOKENIZE/UPDATE CARD VIA AUTHORIZE
+      try {
+        const fastapiPath = `${import.meta.env.VITE_AUTHORIZE_URL}/api/payments/customers/${this.customer.id}/cards/${this.$route.params.id}`;
+        console.log("Attempting to update card tokenization with Authorize.Net via FastAPI:", fastapiPath);
+        await axios.put(fastapiPath, fastapiPayload, { withCredentials: true, headers: authHeader() });
+        console.log("Card successfully updated with Authorize.Net via FastAPI.");
+
+      } catch (error: any) {
+        // If this fails, we just log it for the developers. We DON'T show an error to the user.
+        console.warn("NON-CRITICAL-ERROR: Authorize.Net update failed, but the card was updated locally.", error.response?.data || error.message);
+        // Card is updated but Authorize.Net profile may not be current, which is ok.
+      }
+
+      // --- STEP 4: ALWAYS SHOW SUCCESS AND REDIRECT ---
+      notify({ title: "Success", text: "Credit card has been updated.", type: "success" });
+      this.isLoading = false;
+      this.$router.push({ name: "customerProfile", params: { id: this.customer.id } });
+    },
   },
 });
-</script>
+</script>