Adds QR code link in the creator's profile

frontend/package-lock.json

@@ -19,6 +19,7 @@
         "i18n": "^0.15.1",
         "jwt-decode": "^4.0.0",
         "pinia": "^2.1.7",
+        "qrcode.vue": "^3.6.0",
         "uuid": "^10.0.0",
         "vue": "^3.4.15",
         "vue-advanced-cropper": "^2.8.9",
@@ -4373,6 +4374,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/qrcode.vue": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/qrcode.vue/-/qrcode.vue-3.6.0.tgz",
+      "integrity": "sha512-vQcl2fyHYHMjDO1GguCldJxepq2izQjBkDEEu9NENgfVKP6mv/e2SU62WbqYHGwTgWXLhxZ1NCD1dAZKHQq1fg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",

frontend/package.json

@@ -20,6 +20,7 @@
     "i18n": "^0.15.1",
     "jwt-decode": "^4.0.0",
     "pinia": "^2.1.7",
+    "qrcode.vue": "^3.6.0",
     "uuid": "^10.0.0",
     "vue": "^3.4.15",
     "vue-advanced-cropper": "^2.8.9",

frontend/src/views/profile/ProfilePage.vue

@@ -19,9 +19,12 @@ import Tiktok from "@/views/svg/Tiktok.vue";
 import Instagram from "@/views/svg/Instagram.vue";
 import Facebook from "@/views/svg/Facebook.vue";
 import {useI18n} from 'vue-i18n';
+import QRCodeVue from 'qrcode.vue';
 
 const {t} = useI18n();
 const userProfileStore = useUserProfileStore()
+const creatorProfileStore = useCreatorProfileStore();
+const baseURL = window.location.origin;
 
 // ### Fullname
 const dialogEditFullnameShown = ref(false)
@@ -71,8 +74,6 @@ function handleSaveEditEmail(firstname, lastname) {
   dialogEditEmailShown.value = false
 }
 
-const creatorProfileStore = useCreatorProfileStore();
-
 const dialogShown = ref(false);
 const currentComponent = ref('');
 const restoreDialogShown = ref(false);
@@ -270,6 +271,25 @@ function handleDelete() {
           </div>
         </div>
 
+        <div class="card">
+          <div class="card-title">
+            {{ t('qrCode') }}
+          </div>
+          <div class="content">
+            <div class="qr-container">
+              <p class="qr-text">{{ t('qrCodeDescription') }}</p>
+              <QRCodeVue
+                  v-if="creatorProfileStore.creator"
+                  :value="baseURL + '/@' + creatorProfileStore.creator.slug"
+                  :size="200"
+                  level="H"
+                  render-as="svg"
+                  class="qr-code"
+              />
+            </div>
+          </div>
+        </div>
+
         <div class="card">
           <div class="card-title">
             {{ t('dangerZone') }}
@@ -402,6 +422,18 @@ function handleDelete() {
 .safe-action {
   @apply bg-green-800 hover:bg-green-700 active:bg-green-600;
 }
+
+.qr-container {
+  @apply flex flex-col items-center gap-4 p-4;
+}
+
+.qr-code {
+  @apply bg-white p-4 rounded-lg;
+}
+
+.qr-text {
+  @apply text-hOnBackground text-center;
+}
 </style>
 
 <i18n>
@@ -421,7 +453,9 @@ function handleDelete() {
     "restoreCreatorPage": "Restore Creator Page",
     "stripeAccountId": "Stripe Account ID",
     "socialNetworks": "Social Networks",
-    "handle": "Creator Handle"
+    "handle": "Creator Handle",
+    "qrCode": "QR Code",
+    "qrCodeDescription": "Print this QR code to share your Hutopy with the world! Perfect for business cards, social media, and promotional materials."
   },
   "fr": {
     "personalInfo": "Informations Personnelles",
@@ -438,7 +472,9 @@ function handleDelete() {
     "restoreCreatorPage": "Restaurer la Page Créateur",
     "stripeAccountId": "ID de Compte Stripe",
     "socialNetworks": "Réseaux Sociaux",
-    "handle": "Identifiant du créateur"
+    "handle": "Identifiant du créateur",
+    "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."
   },
   "es": {
     "personalInfo": "Información Personal",
@@ -455,7 +491,9 @@ function handleDelete() {
     "restoreCreatorPage": "Restaurar Página de Creador",
     "stripeAccountId": "ID de Cuenta Stripe",
     "socialNetworks": "Redes Sociales",
-    "handle": "Identificador del creador"
+    "handle": "Identificador del creador",
+    "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."
   }
 }
 </i18n>