diff --git a/web/satellite/src/utils/constants/analyticsEventNames.ts b/web/satellite/src/utils/constants/analyticsEventNames.ts
index c8bb1aeece8f..14c6d2a5fdc2 100644
--- a/web/satellite/src/utils/constants/analyticsEventNames.ts
+++ b/web/satellite/src/utils/constants/analyticsEventNames.ts
@@ -125,4 +125,6 @@ export enum AnalyticsErrorEventSource {
JOIN_PROJECT_MODAL = 'Join project modal',
PROJECT_INVITATION = 'Project invitation',
DETAILED_USAGE_REPORT_MODAL = 'Detailed usage report modal',
+ REMOVE_CC_MODAL = 'Remove credit card modal',
+ EDIT_DEFAULT_CC_MODAL = 'Edit default credit card modal',
}
diff --git a/web/satellite/vuetify-poc/src/components/CreditCardComponent.vue b/web/satellite/vuetify-poc/src/components/CreditCardComponent.vue
index b21c214ef163..cdc26bc63f00 100644
--- a/web/satellite/vuetify-poc/src/components/CreditCardComponent.vue
+++ b/web/satellite/vuetify-poc/src/components/CreditCardComponent.vue
@@ -2,7 +2,7 @@
// See LICENSE for copying information.
-
+
{{ card.brand }}
Default
@@ -15,20 +15,29 @@
{{ card.expMonth }}/{{ card.expYear }}
- Remove
+ Remove
+
+
\ No newline at end of file
+
+const isRemoveCCDialog = ref(false);
+const isEditDefaultCCDialog = ref(false);
+
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue
new file mode 100644
index 000000000000..e7c9c568d6eb
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/EditDefaultCreditCardDialog.vue
@@ -0,0 +1,130 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+ Edit default credit card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+ Make Default
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue b/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue
new file mode 100644
index 000000000000..6838ba273866
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/RemoveCreditCardDialog.vue
@@ -0,0 +1,124 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+ Remove credit card
+
+
+
+
+
+
+
+
+ This is your default payment card. It can't be removed.
+ This is not your default payment card.
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+ Edit Default
+
+
+ Remove
+
+
+
+
+
+
+
+
+
diff --git a/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue b/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue
new file mode 100644
index 000000000000..7a662636ee5b
--- /dev/null
+++ b/web/satellite/vuetify-poc/src/components/dialogs/ccActionComponents/CreditCardItem.vue
@@ -0,0 +1,42 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+
+
+
+
+
+
+ {{ card.brand }}
+ Default
+
+ **** **** **** {{ card.last4 }}
+ {{ card.expMonth }}/{{ card.expYear }}
+
+
+
+
+
+
+
+