delete credit card

public/mix-manifest.json

@@ -74,7 +74,7 @@
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=861de7ccd2a5f139df1f",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=76b45c336e8e12b23e81",
     "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=efe2c08862993d3ef8fc",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=59b10fab66672a09b04a",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=67692ac0afb3453a30d7",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=743bf9cb1e62af56c04e",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
@@ -260,5 +260,11 @@
     "/chunks/settings-subscription.5f39dde47380d6cb8c43.hot-update.js": "/chunks/settings-subscription.5f39dde47380d6cb8c43.hot-update.js",
     "/chunks/settings-subscription.79d5da392288a5690256.hot-update.js": "/chunks/settings-subscription.79d5da392288a5690256.hot-update.js",
     "/chunks/settings-subscription.3e1631b1e644a30440ae.hot-update.js": "/chunks/settings-subscription.3e1631b1e644a30440ae.hot-update.js",
-    "/chunks/settings-subscription.8e285fa5e093c53fa556.hot-update.js": "/chunks/settings-subscription.8e285fa5e093c53fa556.hot-update.js"
+    "/chunks/settings-subscription.8e285fa5e093c53fa556.hot-update.js": "/chunks/settings-subscription.8e285fa5e093c53fa556.hot-update.js",
+    "/chunks/settings-subscription.172fcd3f92122e2df396.hot-update.js": "/chunks/settings-subscription.172fcd3f92122e2df396.hot-update.js",
+    "/chunks/settings-subscription.51e231575ffdff59516b.hot-update.js": "/chunks/settings-subscription.51e231575ffdff59516b.hot-update.js",
+    "/chunks/settings-subscription.31063d6543532c1d4ea9.hot-update.js": "/chunks/settings-subscription.31063d6543532c1d4ea9.hot-update.js",
+    "/chunks/settings-subscription.0a1f59e1539c01bb6b9b.hot-update.js": "/chunks/settings-subscription.0a1f59e1539c01bb6b9b.hot-update.js",
+    "/chunks/settings-subscription.498cc84922706745a572.hot-update.js": "/chunks/settings-subscription.498cc84922706745a572.hot-update.js",
+    "/chunks/settings-subscription.0e178ac3dad63f50c070.hot-update.js": "/chunks/settings-subscription.0e178ac3dad63f50c070.hot-update.js"
 }

resources/js/views/User/MeteredSubscription.vue

@@ -166,6 +166,7 @@
 					{{ $t('You have $10.00 in credit that will be automatically withdrawn on your next payment.') }}
 				</b>
 
+				<!-- Card -->
 				<div
 					v-for="card in user.data.relationships.creditCard.data"
 					:key="card.data.id"
@@ -180,7 +181,7 @@
 					<b class="text-sm font-bold leading-none">
 						{{ $t('Expires') }} {{ card.data.attributes.expiration }}
 					</b>
-					<Trash2Icon size="15" class="cursor-pointer" />
+					<Trash2Icon @click="deleteCreditCard(card.data.id)" size="15" class="cursor-pointer" />
 				</div>
 
 				<small class="text-xs text-gray-500 pt-3 leading-none sm:block hidden">
@@ -409,16 +410,6 @@
 						this.isSendingBillingAlert = false
 					})
 			},
-			deleteBillingAlert() {
-				events.$emit('confirm:open', {
-					title: this.$t('Are you sure you want to delete your alert?'),
-					message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
-					action: {
-						id: this.user.data.relationships.alert.data.id,
-						operation: 'delete-billing-alert',
-					}
-				})
-			},
 			async makePayment() {
 				// Validate fields
 				const isValid = await this.$refs.fundAccount.validate();
@@ -455,6 +446,8 @@
 						type: 'success',
 						message: this.$t('Your credit card was stored successfully'),
 					})
+
+					// TODO: L9 - load credit card after was stored in database
 				}
 
 				this.stripeData.storingStripePaymentMethod = false
@@ -504,6 +497,26 @@
 
 				this.stripeData.isInitialization = false
 			},
+			deleteBillingAlert() {
+				events.$emit('confirm:open', {
+					title: this.$t('Are you sure you want to delete your alert?'),
+					message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
+					action: {
+						id: this.user.data.relationships.alert.data.id,
+						operation: 'delete-billing-alert',
+					}
+				})
+			},
+			deleteCreditCard(id) {
+				events.$emit('confirm:open', {
+					title: this.$t('Are you sure you want to delete your credit card?'),
+					message: this.$t('We will no longer settle your payments automatically and you will have to fund your account for the next payments.'),
+					action: {
+						id: id,
+						operation: 'delete-credit-card',
+					}
+				})
+			},
 			showStoreCreditCardForm() {
 				this.isCreditCardForm = !this.isCreditCardForm
 				this.stripeInit()
@@ -526,6 +539,18 @@
 							})
 						})
 						.catch(() => this.$isSomethingWrong())
+
+				if (data.operation === 'delete-credit-card')
+					axios.delete(`/api/stripe/credit-cards/${data.id}`)
+						.then(() => {
+							this.$store.dispatch('getAppData')
+
+							events.$emit('toaster', {
+								type: 'success',
+								message: this.$t('Your credit card was deleted.'),
+							})
+						})
+						.catch(() => this.$isSomethingWrong())
 			})
 		}
 	}