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>
This commit is contained in:
@@ -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¤cy=${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>
|
||||
</>
|
||||
|
||||
@@ -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">
|
||||
To pay via Revolut, please click the following link:{' '}
|
||||
<label className="label p-2 grow bg-white border border-gray-300 rounded-box justify-center">
|
||||
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)}¤cy=${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
|
||||
}
|
||||
|
||||
@@ -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.",
|
||||
|
||||
|
||||
@@ -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:",
|
||||
@@ -200,7 +201,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.",
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user