feat: add Revolut profile tooltip and test link to UserSettingsForm

- Add tooltip under Revolut profile input explaining where to find the profile name
- Add test payment link that appears when profile name is valid (>5 chars)
- Reorder ViewLocationCard payment UI: QR code placeholder first, link below centered
- Replace hardcoded text with translation keys for better i18n support
- Add English and Croatian translations for test link and payment button

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/ui/UserSettingsForm.tsx

@@ -297,6 +297,9 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                             onChange={(e) => handleInputChange("ownerRevolutProfileName", e.target.value)}
                             disabled={pending}
                         />
+                        <label className="label">
+                            <span className="label-text-alt text-gray-500 max-w-[25rem]">{t("revolut-profile-tooltip")}</span>
+                        </label>
                         <div id="ownerRevolutProfileName-error" aria-live="polite" aria-atomic="true">
                             {errors?.ownerRevolutProfileName &&
                                 errors.ownerRevolutProfileName.map((error: string) => (
@@ -305,6 +308,17 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                                     </p>
                                 ))}
                         </div>
+                         {
+                            !errors?.ownerRevolutProfileName && formValues.ownerRevolutProfileName.length > 5 ? (
+                            <p className="p-3 text-center">{t("revolut-profile--test-link-label")} <Link
+                                    href={`https://revolut.me/${formValues.ownerRevolutProfileName?.replace('@', '')}?amount=100&currency=${formValues.currency}`}
+                                    target="_blank"
+                                    className="text-blue-600 underline"
+                                >
+                                    {t("revolut-profile--test-link-text")}
+                                </Link></p>
+                            ) : null
+                         }
                     </div>
                     <NoteBox className="p-1 mt-1">{t("payment-additional-notes")}</NoteBox>
                 </>

app/ui/ViewLocationCard.tsx

@@ -149,19 +149,18 @@ export const ViewLocationCard:FC<ViewLocationCardProps> = ({location, userSettin
                     userSettings?.enableRevolutPayment && tenantPaymentMethod === "revolut" ?
                     <>
                         <p className="max-w-[25em] ml-1 mt-1 mb-1">{t("payment-info-header")}</p>
-                        <p className="ml-1">
+                        <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                            To pay via Revolut, please click the following link:{' '}
+                            ToDo: QR Code goes here
+                        </label>
+                        <p className="text-center mt-1 mb-3">
                             <Link
                                 href={`https://revolut.me/${userSettings.ownerRevolutProfileName?.replace('@', '')}?amount=${(monthlyExpense / 100).toFixed(2)}&currency=${userSettings.currency}}`}
                                 target="_blank"
                                 className="text-blue-600 underline"
                             >
-                                Pay with Revolut
+                                {t("revolut-link-text")}
                             </Link>
                         </p>
-                        <label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
-                            ToDo: QR Code goes here
-                        </label>
                     </>
                     : null
                 }

messages/en.json

@@ -70,7 +70,8 @@
       "payment-purpose-code-label": "Purpose code:",
       "payment-description-label": "Payment description:",
       "upload-proof-of-payment-legend": "Proof of payment",
-      "upload-proof-of-payment-label": "Here you can upload proof of payment:"
+      "upload-proof-of-payment-label": "Here you can upload proof of payment:",
+      "revolut-link-text": "Pay with Revolut"
     },
     "month-card": {
       "payed-total-label": "Total monthly expenditure:",
@@ -218,6 +219,8 @@
     "revolut-profile-label": "Revolut profile name",
     "revolut-profile-placeholder": "enter your Revolut profile name for receiving payments",
     "revolut-profile-tooltip": "You can find your Revolut profile name in the Revolut app under your user profile. It is displayed below your name and starts with the '@' symbol (e.g., '@john123').",
+    "revolut-profile--test-link-label": "Test your Revolut link:",
+    "revolut-profile--test-link-text": "Pay with Revolut",
 
     "payment-additional-notes": "IMPORTANT: For the payment instructions to be displayed to the tenant, you must also enable this option in the property's settings.",
 

messages/hr.json

@@ -70,7 +70,8 @@
       "payment-purpose-code-label": "Šifra namjene:",
       "payment-description-label": "Opis plaćanja:",
       "upload-proof-of-payment-legend": "Potvrda o uplati",
-      "upload-proof-of-payment-label": "Ovdje možete priložiti potvrdu o uplati:"
+      "upload-proof-of-payment-label": "Ovdje možete priložiti potvrdu o uplati:",
+      "revolut-link-text": "Plati pomoću Revoluta"
     },
     "month-card": {
       "payed-total-label": "Ukupni mjesečni trošak:",
@@ -201,7 +202,6 @@
   "user-settings-form": {
     "title": "Korisničke postavke",
     
-    
     "iban-payment-instructions--legend": "Uplata na vaš IBAN",
     "iban-payment-instructions--intro-message": "Aktiviranjem ove opcije, upute za uplatu bit će uključene u mjesečni izvještaj poslan podstanaru, omogućujući im da izvrše izravnu uplatu putem IBAN-a na vaš bankovni račun.",
     "iban-payment-instructions--toggle-label": "uključi IBAN uplatu",
@@ -224,6 +224,8 @@
     "revolut-profile-label": "Naziv vašeg Revolut profila",
     "revolut-profile-placeholder": "profil putem kojeg ćete primati uplate",
     "revolut-profile-tooltip": "Naziv vašeg Revolut profila možete pronaći u aplikaciji Revolut u korisničkom profilu. Prikazan je ispod vašeg imena i prezimena - počinje sa znakom '@' (npr: '@ivan123').",
+    "revolut-profile--test-link-label": "Testiraj svoju Revolut poveznicu:",
+    "revolut-profile--test-link-text": "Plati pomoću Revoluta",
 
     "general-settings-legend": "Opće postavke",
     "currency-label": "Valuta",