Guard invoice empty state on canSendInvoice and fix money request back nav#90760
Guard invoice empty state on canSendInvoice and fix money request back nav#90760MelvinBot wants to merge 3 commits into
Conversation
… back navigation When a user without an invoice-enabled admin workspace taps "Send invoice" from the empty search view, they are sent to a "not found" page. This hides the Send invoice button for users who cannot send invoices and shows an informative subtitle instead. Also fixes inconsistent back navigation on the not-found page for money request flows — the header back button now calls Navigation.goBack() instead of goBackFromWorkspaceSettingPages(), matching the hardware back behavior. Co-authored-by: ahmedGaber93 <ahmedGaber93@users.noreply.github.com>
This comment has been minimized.
This comment has been minimized.
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@MelvinBot Mark this PR as ready for review. |
|
🤖 I attempted to mark this PR as ready for review, but I don't have permission to change the draft status in this environment. Please mark it as ready for review manually using the GitHub UI (click "Ready for review" at the bottom of the PR). |
|
@MelvinBot Mark this PR as ready for review. |
|
🤖 Done! This PR has been marked as ready for review. |
melvin-bot
Bot
requested review from
ahmedGaber93 and
joekaufmanexpensify
and removed request for
a team
|
@ahmedGaber93 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| const userCanSendInvoice = canSendInvoice(allPolicies, currentUserPersonalDetails.login); | ||
| if (!content && !hasResults) { | ||
| content = { | ||
| ...defaultViewItemHeader.folder, |
There was a problem hiding this comment.
❌ CONSISTENCY-5 (docs)
The eslint-disable-next-line no-nested-ternary directive lacks an accompanying comment explaining why the rule is disabled. ESLint disables without justification can mask underlying issues and reduce code quality.
Add a comment explaining why the nested ternary is acceptable here, or better yet, refactor to avoid the nested ternary entirely. For example, extract the subtitle selection into a helper function:
const getInvoiceSubtitleKey = () => {
if (!userCanSendInvoice) {
return 'search.searchResults.emptyInvoiceResults.subtitleCannotSend';
}
if (hasSeenTour) {
return 'search.searchResults.emptyInvoiceResults.subtitleWithOnlyCreateButton';
}
return 'search.searchResults.emptyInvoiceResults.subtitle';
};
subtitle: translate(getInvoiceSubtitleKey()),This eliminates the need for the eslint-disable entirely.
Reviewed at: de65f77 | Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
|
@MelvinBot On staging we currently have different
In this PR, you added a new case for users who do not have any workspace with invoices enabled, but the same @MelvinBot Could you please suggest on a comment two different messages to handle both cases?
|
|
Good catch — the Here are two suggested messages:
This mirrors the existing pattern: when the user has already taken the tour, we skip mentioning it; when they haven't, we surface it as a next step. The "cannot send" part stays consistent in both. Would you like me to implement this, or do you have different wording in mind? |
Hmm! I’m not sure if this part “Take a test drive of Expensify to learn more” would be helpful here. The test drive doesn’t provide any steps for enabling invoices for the workspace. |
|
Let’s get feedback from the product teams. @joekaufmanexpensify We have a minor UX issue here: #89259 (comment) I consider this a minor issue because users cannot normally access the invoice type filter in the RHP unless they already have a workspace with invoices enabled. They can only reach it directly via URL or search keywords. The current plan is to hide the "Send Invoice" button on the empty state page when the user does not have any workspace with invoices enabled.
Current messages on staging:
What do you think about those messages? Also, what do you think here #90760 (comment)? |
|
@ahmedGaber93 @joekaufmanexpensify to directly answer the UX question: the cleanest pattern here is to mirror what the workspaces empty state already does offer a New workspace CTA that routes to workspace creation (with invoicing pre-enabled) when policy creation isn't restricted, and fall back to subtitle-only copy when it is restricted. For copy, something like:
This avoids the dead-end after test drive (the main gap in the current PR) and gives users an actionable next step without referencing the test drive as a workaround for an invoicing setup problem. I already have this flow working locally and sharing demo video again or coordinate if it helps move this forward. lv_0_20260518142729.mp4 |
|
@neerajbachani, I responded to your proposal here: #89259 (comment) I’m also open to moving forward with your proposal if the product team prefers it. However, I believe Melvin’s proposal is the better approach, as explained in the link above. |
|
Hm, with the current Melvin proposal, if there's no workspace, do we show the option to create one from the empty state, or is it just a dead-end and the user's on their phone to go separately create one? |
|
@joekaufmanexpensify, with the current Melvin proposal, this is a dead end, and there is no option to create a workspace from the empty state. The user would need to:
However, this dead end is not reachable through normal app navigation. Users cannot normally access the invoice type filter in the RHP unless they already have a workspace with invoices enabled. The only ways to reach it are via a direct URL or search keywords. |
|
I see. I agree with you that this seems fine then. I doubt any actual customer is ever going to run into this. |
joekaufmanexpensify
left a comment
joekaufmanexpensify
left a comment
There was a problem hiding this comment.
Good for product
| `), | ||
| subtitle: 'Send an invoice or take a test drive of Expensify to learn more.', | ||
| subtitleWithOnlyCreateButton: 'Use the green button below to send an invoice.', | ||
| subtitleCannotSend: 'You need a workspace with invoicing enabled to send invoices.', |
There was a problem hiding this comment.
@MelvinBot the feature name is Invoices not invoicing, please update it. Also, update the translation files.
There was a problem hiding this comment.
Updated the feature name from "invoicing" to "Invoices" in the subtitleCannotSend string across all 10 translation files (en, de, es, fr, it, ja, nl, pl, pt-BR, zh-hans) in 98ec545.
| shouldShowOfflineIndicator={false} | ||
| onBackButtonPress={() => { | ||
| if (isPolicyNotAccessible) { | ||
| if (isPolicyNotAccessible && !isMoneyRequest) { |
There was a problem hiding this comment.
@MelvinBot This file is no longer reachable after we hid the "Send Invoice" button when there’s no workspace with Invoices enabled.
Please remove this change: && !isMoneyRequest, as it looks out of scope for this PR.
There was a problem hiding this comment.
Reverted the && !isMoneyRequest change in AccessOrNotFoundWrapper.tsx in b8ebb3d.
…end across all translation files Co-authored-by: ahmedGaber93 <ahmedGaber93@users.noreply.github.com>
|
@ahmedGaber93 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Co-authored-by: ahmedGaber93 <ahmedGaber93@users.noreply.github.com>
|
No actionable check failures on this PR. The only failing checks are PR Author Checklist and PR Reviewer Checklist, which track manual checkbox completion in the PR description — not code issues. All other checks (ESLint, TypeScript, tests, Prettier, etc.) are either passing or still running. If any of those fail once the current run completes, feel free to tag me again. |
This comment has been minimized.
This comment has been minimized.
🦜 Polyglot Parrot! 🦜Squawk! Looks like you added some shiny new English strings. Allow me to parrot them back to you in other tongues: View the translation diffdiff --git a/src/languages/de.ts b/src/languages/de.ts
index 72dff4a7d53..d2e44328c0e 100644
--- a/src/languages/de.ts
+++ b/src/languages/de.ts
@@ -7711,7 +7711,7 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
`),
subtitle: 'Sende eine Rechnung oder mache eine Probefahrt mit Expensify, um mehr zu erfahren.',
subtitleWithOnlyCreateButton: 'Verwende die grüne Schaltfläche unten, um eine Rechnung zu senden.',
- subtitleCannotSend: 'Du benötigst einen Arbeitsbereich mit aktiviertem Invoices, um Rechnungen zu senden.',
+ subtitleCannotSend: 'Sie benötigen einen Workspace mit aktivierten Rechnungen, um Rechnungen zu versenden.',
},
emptyTripResults: {
title: 'Keine Reisen zum Anzeigen',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index a91d77318da..543d3a321af 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1690,10 +1690,8 @@ const translations: TranslationDeepObject<typeof en> = {
backdropLabel: 'Fondo del Modal',
},
nextStep: {
- /* eslint-disable @typescript-eslint/no-unused-vars */
message: {
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_TO_ADD_TRANSACTIONS]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> añadas gastos.`;
@@ -1704,7 +1702,6 @@ const translations: TranslationDeepObject<typeof en> = {
}
},
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_TO_SUBMIT]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> envíes los gastos.`;
@@ -1716,7 +1713,6 @@ const translations: TranslationDeepObject<typeof en> = {
},
[CONST.NEXT_STEP.MESSAGE_KEY.NO_FURTHER_ACTION]: (_actor, _actorType, _eta, _etaType) => `¡No se requiere ninguna acción adicional!`,
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_FOR_SUBMITTER_ACCOUNT]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> añadas una cuenta bancaria.`;
@@ -1731,7 +1727,6 @@ const translations: TranslationDeepObject<typeof en> = {
if (eta) {
formattedETA = etaType === CONST.NEXT_STEP.ETA_TYPE.DATE_TIME ? ` el ${eta} de cada mes` : ` ${eta}`;
}
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que tus gastos se envíen automáticamente${formattedETA}.`;
@@ -1742,7 +1737,6 @@ const translations: TranslationDeepObject<typeof en> = {
}
},
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_TO_FIX_ISSUES]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> soluciones ellos problemas.`;
@@ -1753,7 +1747,6 @@ const translations: TranslationDeepObject<typeof en> = {
}
},
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_TO_APPROVE]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> apruebes los gastos.`;
@@ -1764,7 +1757,6 @@ const translations: TranslationDeepObject<typeof en> = {
}
},
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_TO_EXPORT]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> exportes este informe.`;
@@ -1775,7 +1767,6 @@ const translations: TranslationDeepObject<typeof en> = {
}
},
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_TO_PAY]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> pagues los gastos.`;
@@ -1786,7 +1777,6 @@ const translations: TranslationDeepObject<typeof en> = {
}
},
[CONST.NEXT_STEP.MESSAGE_KEY.WAITING_FOR_POLICY_BANK_ACCOUNT]: (actor, actorType, _eta, _etaType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Esperando a que <strong>tú</strong> termines de configurar una cuenta bancaria de empresa.`;
@@ -1806,7 +1796,6 @@ const translations: TranslationDeepObject<typeof en> = {
[CONST.NEXT_STEP.MESSAGE_KEY.SUBMITTING_TO_SELF]: (_actor, _actorType, _eta, _etaType) =>
`¡Ups! Parece que estás enviando el informe a <strong>ti mismo</strong>. Aprobar tus propios informes está <strong>prohibido</strong> por tu espacio de trabajo. Por favor, envía este informe a otra persona o contacta a tu administrador para cambiar la persona a la que lo envías.`,
[CONST.NEXT_STEP.MESSAGE_KEY.REJECTED_REPORT]: (actor, actorType) => {
- // eslint-disable-next-line default-case
switch (actorType) {
case CONST.NEXT_STEP.ACTOR_TYPE.CURRENT_USER:
return `Este informe fue rechazado. Esperando a que <strong>tú</strong> corrijas los problemas y lo vuelvas a enviar manualmente.`;
@@ -2462,7 +2451,6 @@ ${amount} para ${merchant} - ${date}`,
two: 'º',
few: 'º',
other: 'º',
- /* eslint-disable @typescript-eslint/naming-convention */
'1': 'Primero',
'2': 'Segundo',
'3': 'Tercero',
@@ -2473,7 +2461,6 @@ ${amount} para ${merchant} - ${date}`,
'8': 'Octavo',
'9': 'Noveno',
'10': 'Décimo',
- /* eslint-enable @typescript-eslint/naming-convention */
},
},
approverInMultipleWorkflows: 'Este miembro ya pertenece a otro flujo de aprobación. Cualquier actualización aquí se reflejará allí también.',
@@ -6959,7 +6946,6 @@ ${amount} para ${merchant} - ${date}`,
restrictedDescription: 'Sólo las personas en tu espacio de trabajo pueden encontrar esta sala',
privateDescription: 'Sólo las personas que están invitadas a esta sala pueden encontrarla',
publicDescription: 'Cualquier persona puede unirse a esta sala',
- // eslint-disable-next-line @typescript-eslint/naming-convention
public_announceDescription: 'Cualquier persona puede unirse a esta sala',
createRoom: 'Crea una sala de chat',
roomAlreadyExistsError: 'Ya existe una sala con este nombre',
@@ -6979,7 +6965,6 @@ ${amount} para ${merchant} - ${date}`,
restricted: 'Espacio de trabajo',
private: 'Privada',
public: 'Público',
- // eslint-disable-next-line @typescript-eslint/naming-convention
public_announce: 'Anuncio Público',
},
},
@@ -7294,7 +7279,6 @@ ${amount} para ${merchant} - ${date}`,
updatedDefaultTitle: (newDefaultTitle, oldDefaultTitle) => `cambió la fórmula personalizada del nombre del informe a "${newDefaultTitle}" (previamente "${oldDefaultTitle}")`,
updatedOwnership: (oldOwnerEmail, oldOwnerName, policyName) => `asumió la propiedad del espacio de trabajo ${policyName} de ${oldOwnerName} (${oldOwnerEmail})`,
updatedAutoHarvesting: (enabled) => `${enabled ? 'habilitó' : 'deshabilitó'} el envío programado`,
- // eslint-disable-next-line @typescript-eslint/max-params
updatedIndividualBudgetNotification: (
budgetAmount,
budgetFrequency,
@@ -7554,7 +7538,7 @@ ${amount} para ${merchant} - ${date}`,
title: 'Aún no has creado \nninguna factura',
subtitle: 'Envía una factura o haz una prueba por Expensify para aprender más.',
subtitleWithOnlyCreateButton: 'Usa el botón verde de abajo para enviar una factura.',
- subtitleCannotSend: 'Necesitas un espacio de trabajo con Invoices habilitado para enviar facturas.',
+ subtitleCannotSend: 'Necesitas un espacio de trabajo con Facturas habilitadas para enviar facturas.',
},
emptyTripResults: {
title: 'No tienes viajes',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
index 4bc399862db..15b5edb0df1 100644
--- a/src/languages/fr.ts
+++ b/src/languages/fr.ts
@@ -7733,7 +7733,7 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
`),
subtitle: 'Envoyez une facture ou faites un essai d’Expensify pour en savoir plus.',
subtitleWithOnlyCreateButton: 'Utilisez le bouton vert ci-dessous pour envoyer une facture.',
- subtitleCannotSend: "Vous avez besoin d'un espace de travail avec Invoices activé pour envoyer des factures.",
+ subtitleCannotSend: 'Vous avez besoin d’un espace de travail avec les Factures activées pour envoyer des factures.',
},
emptyTripResults: {
title: 'Aucun voyage à afficher',
diff --git a/src/languages/it.ts b/src/languages/it.ts
index ba1495e2be2..88eb46926aa 100644
--- a/src/languages/it.ts
+++ b/src/languages/it.ts
@@ -7702,7 +7702,7 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
`),
subtitle: 'Invia una fattura o fai un giro di prova con Expensify per saperne di più.',
subtitleWithOnlyCreateButton: 'Usa il pulsante verde qui sotto per inviare una fattura.',
- subtitleCannotSend: 'Hai bisogno di uno spazio di lavoro con Invoices abilitato per inviare fatture.',
+ subtitleCannotSend: 'Ti serve uno spazio di lavoro con Fatture abilitate per inviare fatture.',
},
emptyTripResults: {
title: 'Nessun viaggio da visualizzare',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
index ac44af23ac6..fda0f73cb07 100644
--- a/src/languages/ja.ts
+++ b/src/languages/ja.ts
@@ -7608,7 +7608,7 @@ ${reportName}
`),
subtitle: '請求書を送信するか、Expensify を試用してさらに詳しく知りましょう。',
subtitleWithOnlyCreateButton: '下の緑色のボタンを使って請求書を送信してください。',
- subtitleCannotSend: '請求書を送信するには、Invoicesが有効なワークスペースが必要です。',
+ subtitleCannotSend: '請求書を送信するには、請求書機能が有効になっているワークスペースが必要です。',
},
emptyTripResults: {
title: '表示する出張はありません',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
index e1dd7ce9d34..ccb1778c6a0 100644
--- a/src/languages/nl.ts
+++ b/src/languages/nl.ts
@@ -7673,7 +7673,7 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
`),
subtitle: 'Stuur een factuur of maak een testrit met Expensify om meer te weten te komen.',
subtitleWithOnlyCreateButton: 'Gebruik de groene knop hieronder om een factuur te versturen.',
- subtitleCannotSend: 'Je hebt een werkruimte met Invoices ingeschakeld nodig om facturen te versturen.',
+ subtitleCannotSend: 'Je hebt een workspace met facturen ingeschakeld nodig om facturen te kunnen versturen.',
},
emptyTripResults: {
title: 'Geen reizen om weer te geven',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
index f822e86373b..7bb9f0c6705 100644
--- a/src/languages/pl.ts
+++ b/src/languages/pl.ts
@@ -7665,7 +7665,7 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
`),
subtitle: 'Wyślij fakturę lub wypróbuj Expensify, aby dowiedzieć się więcej.',
subtitleWithOnlyCreateButton: 'Użyj zielonego przycisku poniżej, aby wysłać fakturę.',
- subtitleCannotSend: 'Potrzebujesz przestrzeni roboczej z włączonym Invoices, aby wysyłać faktury.',
+ subtitleCannotSend: 'Musisz mieć przestrzeń roboczą z włączonymi fakturami, żeby móc wysyłać faktury.',
},
emptyTripResults: {
title: 'Brak podróży do wyświetlenia',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
index fa61dc79d7a..b29c4f9fb49 100644
--- a/src/languages/pt-BR.ts
+++ b/src/languages/pt-BR.ts
@@ -7667,7 +7667,7 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
`),
subtitle: 'Envie uma fatura ou faça um test drive do Expensify para saber mais.',
subtitleWithOnlyCreateButton: 'Use o botão verde abaixo para enviar uma fatura.',
- subtitleCannotSend: 'Você precisa de um espaço de trabalho com Invoices habilitado para enviar faturas.',
+ subtitleCannotSend: 'Você precisa de um espaço de trabalho com Faturas ativadas para enviar faturas.',
},
emptyTripResults: {
title: 'Nenhuma viagem para exibir',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
index 4f5c073843e..4d08cb21517 100644
--- a/src/languages/zh-hans.ts
+++ b/src/languages/zh-hans.ts
@@ -7473,7 +7473,7 @@ ${reportName}
`),
subtitle: '发送发票或试用 Expensify，了解更多信息。',
subtitleWithOnlyCreateButton: '使用下方的绿色按钮发送发票。',
- subtitleCannotSend: '您需要一个启用了Invoices的工作区才能发送发票。',
+ subtitleCannotSend: '要发送发票，您需要一个已启用发票功能的工作区。',
},
emptyTripResults: {
title: '没有行程可显示',
Note You can apply these changes to your branch by copying the patch to your clipboard, then running |
5 participants
Explanation of Change
Two fixes for the invoice empty search state:
Guard the "Send invoice" CTA on
canSendInvoice: The invoice empty state inEmptySearchViewalways showed the "Send invoice" button, even for users without an invoice-enabled admin workspace. Tapping it navigated to a "Hmm not here" not-found page. Now the button is hidden whencanSendInvoicereturns false, and an informative subtitle is shown instead ("You need a workspace with invoicing enabled to send invoices."). This mirrors how the FAB'sInvoiceMenuItemalready gates itself.Fix inconsistent back navigation on money request not-found pages: In
PageNotFoundFallback, whenisPolicyNotAccessiblewas true, the back button always calledgoBackFromWorkspaceSettingPages(), which redirects to the Workspaces list. For money request flows (where there's no owning workspace), this was incorrect — the header back button now falls through toNavigation.goBack()whenisMoneyRequestis true, matching the hardware back button behavior.Fixed Issues
$ #89259
PROPOSAL: #89259 (comment)
Tests
// TODO: The human co-author must fill out the tests you ran before marking this PR as "ready for review"
// Please describe what tests you performed that validates your changed worked.
Offline tests
// TODO: The human co-author must fill out offline test steps
QA Steps
// TODO: The human co-author must fill out the QA tests you ran before marking this PR as "ready for review".
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari