list credit card in metered billing

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=00289abdac0e7d31fd76",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=59b10fab66672a09b04a",
     "/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",
@@ -249,5 +249,16 @@
     "/chunks/settings-subscription.958e12d1dbdfc4ae7e5b.hot-update.js": "/chunks/settings-subscription.958e12d1dbdfc4ae7e5b.hot-update.js",
     "/chunks/settings-subscription.66058a8918f1788d8a2c.hot-update.js": "/chunks/settings-subscription.66058a8918f1788d8a2c.hot-update.js",
     "/chunks/settings-subscription.fc4ea1026b973b0594d1.hot-update.js": "/chunks/settings-subscription.fc4ea1026b973b0594d1.hot-update.js",
-    "/chunks/settings-subscription.c33140b7a65851b43641.hot-update.js": "/chunks/settings-subscription.c33140b7a65851b43641.hot-update.js"
+    "/chunks/settings-subscription.c33140b7a65851b43641.hot-update.js": "/chunks/settings-subscription.c33140b7a65851b43641.hot-update.js",
+    "/chunks/settings-subscription.b3a848278472c0000154.hot-update.js": "/chunks/settings-subscription.b3a848278472c0000154.hot-update.js",
+    "/chunks/settings-subscription.8eac6d790e1a6b4e1064.hot-update.js": "/chunks/settings-subscription.8eac6d790e1a6b4e1064.hot-update.js",
+    "/chunks/settings-subscription.c0e4e3506043d72afd09.hot-update.js": "/chunks/settings-subscription.c0e4e3506043d72afd09.hot-update.js",
+    "/chunks/settings-subscription.e5570612bd6e3daf839a.hot-update.js": "/chunks/settings-subscription.e5570612bd6e3daf839a.hot-update.js",
+    "/chunks/settings-subscription.75b5e433263ab1229a9d.hot-update.js": "/chunks/settings-subscription.75b5e433263ab1229a9d.hot-update.js",
+    "/chunks/settings-subscription.bcc9ff8824d6e1d0d2a0.hot-update.js": "/chunks/settings-subscription.bcc9ff8824d6e1d0d2a0.hot-update.js",
+    "/chunks/settings-subscription.0e21c891ebacd263da50.hot-update.js": "/chunks/settings-subscription.0e21c891ebacd263da50.hot-update.js",
+    "/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"
 }

resources/js/views/User/MeteredSubscription.vue

@@ -166,15 +166,19 @@
 					{{ $t('You have $10.00 in credit that will be automatically withdrawn on your next payment.') }}
 				</b>
 
-				<div class="flex items-center justify-between py-3 px-4 input-dark">
+				<div
+					v-for="card in user.data.relationships.creditCard.data"
+					:key="card.data.id"
+					class="flex items-center justify-between py-3 px-4 input-dark"
+				>
 					<div class="flex items-center">
-						<img src="/assets/gateways/visa.svg" alt="" class="h-5 mr-3 rounded">
+						<img :src="`/assets/gateways/${card.data.attributes.brand}.svg`" alt="" class="h-5 mr-3 rounded">
-						<b class="text-sm font-bold leading-none">
+						<b class="text-sm font-bold leading-none capitalize">
-							Visa •••• 4242
+							{{ card.data.attributes.brand }} •••• {{ card.data.attributes.last4 }}
 						</b>
 					</div>
 					<b class="text-sm font-bold leading-none">
-						Expires Nov 2022
+						{{ $t('Expires') }} {{ card.data.attributes.expiration }}
 					</b>
 					<Trash2Icon size="15" class="cursor-pointer" />
 				</div>
@@ -291,13 +295,14 @@
 				'config',
 				'user',
 			]),
+			hasPaymentMethod() {
+				return this.user.data.relationships.creditCard && this.user.data.relationships.creditCard.data.length > 0
+			},
 		},
 		data() {
 			return {
 				isLoading: false,
 
-				hasPaymentMethod: true,
-
 				isSendingBillingAlert: false,
 				billingAlertAmount: undefined,
 				showUpdateBillingAlertForm: false,

src/App/Users/Resources/UserResource.php

@@ -4,6 +4,7 @@ namespace App\Users\Resources;
 use Domain\Folders\Resources\FolderCollection;
 use Illuminate\Http\Resources\Json\JsonResource;
 use App\Users\Actions\FormatUsageEstimatesAction;
+use VueFileManager\Subscription\Domain\CreditCards\Resources\CreditCardCollection;
 use VueFileManager\Subscription\Domain\Credits\Resources\BalanceResource;
 use VueFileManager\Subscription\Domain\BillingAlerts\Resources\BillingAlertResource;
 use VueFileManager\Subscription\Domain\Subscriptions\Resources\SubscriptionResource;
@@ -50,6 +51,9 @@ class UserResource extends JsonResource
                     $this->mergeWhen($isMeteredSubscription, fn () => [
                         'alert' => new BillingAlertResource($this->billingAlert),
                     ]),
+                    $this->mergeWhen($isMeteredSubscription, fn () => [
+                        'creditCard' => new CreditCardCollection($this->creditCards),
+                    ]),
                 ],
                 'meta'          => [
                     $this->mergeWhen($isFixedSubscription, fn () => [