From bb39a06c6053c670648ea03316ff640f414e6c9b Mon Sep 17 00:00:00 2001
From: Jonathan Bourdon <lowrad000@gmail.com>
Date: Thu, 24 Apr 2025 03:48:37 -0400
Subject: [PATCH] feat: Enhance Stripe account configuration UI and update
 translations in ProfilePage.vue

---
 frontend/src/views/profile/ProfilePage.vue    | 63 ++++++++++++++++---
 .../profile/creators/ChangeStripeIdDialog.vue |  6 +-
 2 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index fddda88..8608127 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -256,12 +256,18 @@ function downloadQRCode() {
             {{ t('payment-information') }}
           </div>
 
-          <!-- STRIPE -->
-          <button class="action" @click="openDialog('ChangeStripeIdDialog')">
-            <span class="label">{{ t('stripeAccountId') }}</span>
-            <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
-            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-          </button>
+          <div class="content">
+            <div class="stripe-status">
+              <span class="label">{{ t('stripeStatus') }}</span>
+              <span class="value" :class="{ 'configured': creatorProfileStore.creator.acceptDonation }">
+                {{ creatorProfileStore.creator.acceptDonation ? t('configured') : t('notConfigured') }}
+              </span>
+              <button class="configure-stripe-button" @click="openDialog('ChangeStripeIdDialog')">
+                <v-icon>mdi-credit-card</v-icon>
+                {{ t('configureStripe') }}
+              </button>
+            </div>
+          </div>
 
         </div>
 
@@ -516,6 +522,30 @@ function downloadQRCode() {
   @apply hover:bg-hutopySecondary;
   @apply transition-colors duration-300;
 }
+
+.stripe-status {
+  @apply flex flex-row items-center w-full p-3 rounded-lg;
+  @apply bg-hSurface;
+  @apply cursor-default;
+  @apply transition-colors duration-300;
+}
+
+.stripe-status .value {
+  @apply text-hOnBackground flex-1 text-center;
+  @apply flex items-center justify-center;
+}
+
+.stripe-status .value.configured {
+  @apply text-green-500;
+}
+
+.configure-stripe-button {
+  @apply flex items-center justify-center gap-2 px-4 py-2 rounded-lg;
+  @apply bg-hutopyPrimary text-hOnPrimary;
+  @apply hover:bg-hutopySecondary;
+  @apply transition-colors duration-300;
+  @apply ml-4;
+}
 </style>
 
 <i18n>
@@ -538,7 +568,12 @@ function downloadQRCode() {
     "qrCode": "QR Code",
     "qrCodeDescription": "Print this QR code to share your Hutopy with the world! Perfect for business cards, social media, and promotional materials.",
     "downloadQRCode": "Download QR Code",
-    "payment-information": "Payment Information"
+    "payment-information": "Payment Information",
+    "stripeStatus": "Stripe Status",
+    "configured": "Configured",
+    "notConfigured": "Not Configured",
+    "notSet": "Not Set",
+    "configureStripe": "Configure Stripe Account"
   },
   "fr": {
     "personalInfo": "Informations Personnelles",
@@ -558,7 +593,12 @@ function downloadQRCode() {
     "qrCode": "Code QR",
     "qrCodeDescription": "Imprimez ce code QR pour partager votre Hutopy avec le monde ! Parfait pour les cartes de visite, les réseaux sociaux et les supports promotionnels.",
     "downloadQRCode": "Télécharger le Code QR",
-    "payment-information": "Informations de Paiement"
+    "payment-information": "Informations de Paiement",
+    "stripeStatus": "État de Stripe",
+    "configured": "Configuré",
+    "notConfigured": "Non Configuré",
+    "notSet": "Non Défini",
+    "configureStripe": "Configurer le Compte Stripe"
   },
   "es": {
     "personalInfo": "Información Personal",
@@ -578,7 +618,12 @@ function downloadQRCode() {
     "qrCode": "Código QR",
     "qrCodeDescription": "¡Imprime este código QR para compartir tu Hutopy con el mundo! Perfecto para tarjetas de presentación, redes sociales y materiales promocionales.",
     "downloadQRCode": "Descargar Código QR",
-    "payment-information": "Información de Pago"
+    "payment-information": "Información de Pago",
+    "stripeStatus": "Estado de Stripe",
+    "configured": "Configurado",
+    "notConfigured": "No Configurado",
+    "notSet": "No Establecido",
+    "configureStripe": "Configurar Cuenta Stripe"
   }
 }
 </i18n>
\ No newline at end of file
diff --git a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
index 5299528..e473522 100644
--- a/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
+++ b/frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
@@ -2,6 +2,7 @@
 import {useClient} from '@/plugins/api.js';
 import {ref} from 'vue';
 import { useI18n } from 'vue-i18n';
+import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
 
 const props = defineProps({
   creator: {
@@ -11,8 +12,9 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested']);
 
-const stripeId = ref(props.creator.stripeId);
+const stripeId = ref('');
 const { t } = useI18n();
+const creatorProfileStore = useCreatorProfileStore();
 
 const client = useClient();
 
@@ -22,7 +24,7 @@ const save = async () => {
       stripeAccountId: stripeId.value,
     });
 
-    props.creator.stripeId = stripeId.value;
+    await creatorProfileStore.fetchCreatorProfile();
     emits('closeRequested');
   } catch (error) {
     console.error('Error saving stripe id:', error);