From 18ab6904ddf957fce54bcc77cf59430112110dd5 Mon Sep 17 00:00:00 2001 From: Sina Date: Wed, 15 May 2024 18:21:23 +0200 Subject: [PATCH] [fix] add aws subscription to UI (#210) --- src/locales/de-DE/messages.po | 196 ++++--- src/locales/en-US/messages.po | 188 +++--- .../ChangePaymentMethod.tsx | 555 ------------------ .../ChangePaymentNoMethodModal.tsx | 93 +++ .../ChangeProductTier.tsx | 177 ++++++ .../ChangeProductTierModal.tsx | 196 +++++++ .../ChangeProductTierToFreeModal.tsx | 104 ++++ .../ConfirmChangePaymentModal.tsx | 118 ++++ .../ProductTierComp.tsx | 131 +++++ .../ProductTierDivider.tsx | 13 + .../WorkspaceSettingsBillingPage.tsx | 84 ++- .../workspace-settings-billing/utils/index.ts | 1 + .../utils/paymentMethodToLabel.ts | 4 +- .../utils/paymentMethods.ts | 3 + .../choose-workspace/ChooseWorkspacePage.tsx | 74 ++- src/shared/constants/endPoints.ts | 2 +- .../ErrorBoundaryFallback.tsx | 2 +- src/shared/link-button/LinkButton.tsx | 6 +- .../server/requests/PutWorkspaceBilling.ts | 5 +- src/shared/types/server/shared/Payment.ts | 4 +- src/shared/types/server/shared/index.ts | 2 +- 21 files changed, 1200 insertions(+), 758 deletions(-) delete mode 100644 src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ProductTierComp.tsx create mode 100644 src/pages/panel/workspace-settings-billing/ProductTierDivider.tsx create mode 100644 src/pages/panel/workspace-settings-billing/utils/paymentMethods.ts diff --git a/src/locales/de-DE/messages.po b/src/locales/de-DE/messages.po index 8cb06a2c..8b9b0260 100644 --- a/src/locales/de-DE/messages.po +++ b/src/locales/de-DE/messages.po @@ -13,14 +13,14 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:113 -msgid "({0} / month per additional account)" -msgstr "({0} / Monat pro zusätzlichem Konto)" - -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:127 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:90 msgid "({0} max)" msgstr "({0} max)" +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:76 +msgid "(${0} / month per additional account)" +msgstr "(${0} / Monat pro zusätzlichem Konto)" + #: src/shared/utils/parseDuration.ts:171 msgid "{0, plural, one {# Day} other {# Days}}" msgstr "{0, plural, one {# Tag} other {# Tage}}" @@ -59,7 +59,7 @@ msgstr "{0} Prüfungen sind fehlgeschlagen." msgid "{0} checks fixed." msgstr "{0} Prüfungen behoben" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:100 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:63 msgid "{0} cloud accounts included" msgstr "{0} Cloud-Konten enthalten" @@ -71,15 +71,15 @@ msgstr "{0} wurde verbunden" msgid "{0} Milliseconds" msgstr "{0} Millisekunden" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:122 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:85 msgid "{0} scans" -msgstr "{0} scans" +msgstr "{0} Scans" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:130 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:93 msgid "{0} seat max" msgstr "{0} Sitzplatz max" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:126 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:89 msgid "{0} seats included {1}" msgstr "{0} Sitzplätze inbegriffen {1}" @@ -92,26 +92,18 @@ msgstr "{0}: Wir haben {1} nicht konforme Ressourcen von insgesamt {2}." msgid "{added} configuration lines added and {removed} lines deleted." msgstr "{added} Konfigurationszeilen hinzugefügt und {removed} Zeilen gelöscht." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:78 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:41 msgid "/ month" -msgstr "/ monat" +msgstr "/ Monat" #: src/containers/panel/PanelContainer.tsx:34 msgid "© 2024 Some Engineering Inc. All rights reserved." msgstr "© 2024 Some Engineering Inc. Alle Rechte vorbehalten." -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:54 -msgid "<0>Billing cycle: {0}<1>Highest product tier this billing cycle: {title}" -msgstr "<0>Abrechnungszeitraum: {0}<1>Höchste Produktstufe in diesem Abrechnungszeitraum: {title}" - #: src/pages/panel/inventory/InventoryAdvanceSearchInfo.tsx:58 msgid "<0>Fix supports full text search by encasing the search term in double quotes. For instance,<1><2><3>{searchInstance}enables you to scan your entire infrastructure for a specific IP address.<4>Additionally, you can query for any resource attribute by utilizing the <5><6>{attributeOperatorValue} format, where the operator can be {0}or <7><8>{1}. For example,<9><10><11>{searchTagsOwners}allows you to find all resources tagged with an <12><13>{owner} attribute equal to <14><15>{sre}.<16>Search queries can be refined using boolean operators {2}<17><18>{3} to combine multiple terms. An example would be<19><20><21>{searchEc2InstanceCores}to identify all EC2 instances possessing more than 4 cores.<22>For detailed search syntax guidance, visit <23>https://docs.fix.security/search-syntax<24/>" msgstr "<0>Fix unterstützt die Volltextsuche, indem der Suchbegriff in Anführungszeichen eingeschlossen wird. Zum Beispiel ermöglicht<1><2><3>{searchInstance}Ihnen, Ihre gesamte Infrastruktur nach einer spezifischen IP-Adresse zu durchsuchen.<4>Zusätzlich können Sie jede Ressourceneigenschaft abfragen, indem Sie das Format <5><6>{attributeOperatorValue} verwenden, wobei der Operator {0}oder <7><8>{1} sein kann. Zum Beispiel erlaubt<9><10><11>{searchTagsOwners}Ihnen, alle Ressourcen zu finden, die mit einem <12><13>{owner}-Attribut gleich <14><15>{sre} markiert sind.<16>Suchanfragen können verfeinert werden, indem boolesche Operatoren {2}<17><18>{3} verwendet werden, um mehrere Begriffe zu kombinieren. Ein Beispiel wäre<19><20><21>{searchEc2InstanceCores}, um alle EC2-Instanzen zu identifizieren, die mehr als 4 CPU Kerne besitzen.<22>Für detaillierte Hilfe zur Suchsyntax besuchen Sie <23>https://docs.fix.security/search-syntax<24/>" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:59 -msgid "<0>Next invoice will be available: {0}" -msgstr "<0>Die nächste Rechnung wird verfügbar sein: {0}" - #: src/pages/panel/user-settings/UserSettingsTotpActivationModal.tsx:165 msgid "<0>Open Your Authenticator App: Head over to your authenticator app and choose to add a new account manually.<1>Enter Account Details: You'll need to type in your account's email address or username, and the key provided below.<2>Your Key: <3/><4>Verification Type: Make sure to select \"Time-based\" as the verification type.<5>Enter the Code: Once your account is added manually, the app will show a 6-digit code. Pop that code into the box below and hit \"Activate\"." msgstr "<0>Öffnen Sie Ihre Authenticator-App: Gehe zu deiner Authenticator-App und wähle, ein neues Konto manuell hinzuzufügen.<1>Gib Kontodetails ein: Du musst deine E-Mail-Adresse oder Benutzernamen des Kontos eingeben und den untenstehenden Schlüssel verwenden.<2>Dein Schlüssel: <3/><4>Verifizierungstyp: Stelle sicher, dass du \"Zeitbasiert\" als Verifizierungstyp auswählst.<5>Gib den Code ein: Sobald dein Konto manuell hinzugefügt ist, zeigt die App einen 6-stelligen Code an. Gib diesen Code in das untenstehende Feld ein und drücke auf \"Aktivieren\"." @@ -191,7 +183,7 @@ msgstr "Konto: {0}" #: src/pages/panel/inventory/InventoryTable.error.tsx:73 #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:42 #: src/shared/language-button/LanguageButton.stories.tsx:20 -#: src/shared/layouts/panel-layout/menuList.tsx:67 +#: src/shared/layouts/panel-layout/menuList.tsx:68 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:12 msgid "Accounts" msgstr "Konten" @@ -215,7 +207,9 @@ msgstr "Aktionen" msgid "Activate" msgstr "aktivieren Sie" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:384 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:61 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:101 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:84 msgid "Add a New Credit or Debit Card" msgstr "" @@ -223,10 +217,6 @@ msgstr "" msgid "Add an account" msgstr "Füge ein Konto hinzu" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:510 -msgid "Add AWS Marketplace payment method" -msgstr "" - #: src/pages/panel/workspace-settings-external-directory/AddExternalDirectory.tsx:33 msgid "Add Directory" msgstr "Verzeichnis hinzufügen" @@ -304,7 +294,9 @@ msgstr "Eine E-Mail wurde mit einem 'Passwort zurücksetzen'-Button an Ihren Pos msgid "An error occurred while connecting to {0}" msgstr "Beim Herstellen der Verbindung zu {0} ist ein Fehler aufgetreten." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:222 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:56 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:34 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:34 #: src/pages/panel/workspace-settings-users/InviteExternalUser.tsx:31 msgid "An error occurred, please try again later." msgstr "Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut." @@ -321,6 +313,10 @@ msgstr "API-Zugriff" msgid "API Key" msgstr "API-Schlüssel" +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:111 +msgid "Are you sure you want to change payment from <0>{0} to <1>{1}?" +msgstr "" + #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsDisconnectServiceModal.tsx:74 msgid "Are you sure you want to disconnect {name}?" msgstr "Möchten Sie die Verbindung zu {name} wirklich trennen?" @@ -374,9 +370,9 @@ msgstr "Benchmark: {0}" msgid "Benchmarks" msgstr "Benchmarks" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:33 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:50 #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:48 -#: src/shared/layouts/panel-layout/menuList.tsx:77 +#: src/shared/layouts/panel-layout/menuList.tsx:78 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:20 msgid "Billing" msgstr "Abrechnung" @@ -386,6 +382,10 @@ msgstr "Abrechnung" msgid "Billing Admin" msgstr "Abrechnungsadmin" +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:106 +msgid "Billing cycle" +msgstr "" + #: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingTable.tsx:23 msgid "Billing history" msgstr "" @@ -411,6 +411,7 @@ msgstr "Business" #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsOpsgenieService.tsx:101 #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsPagerdutyService.tsx:99 #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsTeamsService.tsx:111 +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:117 msgid "Cancel" msgstr "Stornieren" @@ -420,7 +421,16 @@ msgstr "Stornieren" msgid "Change" msgstr "" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:270 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:102 +msgid "Change payment" +msgstr "" + +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:107 +msgid "Change Payment method" +msgstr "" + +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:125 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:82 msgid "Change Product Tier" msgstr "Produktstufe ändern" @@ -437,10 +447,6 @@ msgstr "Änderungen" msgid "Changes in the past 7 days" msgstr "Änderungen in den letzten 7 Tagen" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:102 -msgid "Choose Workspace" -msgstr "Wählen Sie Arbeitsbereich" - #: src/pages/panel/inventory/inventory-form/InventoryFormReset.tsx:15 msgid "Clear the search" msgstr "" @@ -502,7 +508,7 @@ msgstr "Konfigurieren" msgid "Confirm" msgstr "Bestätigen" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:71 +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:74 msgid "Congratulations on your subscription" msgstr "Herzlichen Glückwunsch zu Ihrem Abonnement" @@ -564,6 +570,10 @@ msgstr "Kern-CSPM-Scanfunktionen" msgid "Created Time" msgstr "Erstellte Zeit" +#: src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts:9 +msgid "Credit or Debit Card" +msgstr "" + #: src/shared/constants/consts.ts:14 msgid "Credit/Debit Card has been successfully subscribed" msgstr "" @@ -572,7 +582,8 @@ msgstr "" msgid "Critical" msgstr "Kritisch" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:312 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:167 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:87 msgid "Current Product Tier" msgstr "" @@ -590,7 +601,7 @@ msgstr "Benutzerdefinierte Richtlinien (in Kürze verfügbar!)" #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:42 msgid "Daily" -msgstr "Täglich" +msgstr "Tägliche" #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:44 msgid "Data export (CSV, JSON, PDF)" @@ -696,7 +707,8 @@ msgstr "Möchten Sie diesen Benutzer löschen?" msgid "Don't have an account? Click here to Sign up." msgstr "Sie haben noch kein Konto? Klicken Sie hier, um sich anzumelden." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:266 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:120 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:78 msgid "Downgrade" msgstr "Downgrade" @@ -875,6 +887,10 @@ msgstr "Erhalten Sie Ihre fünf wichtigsten Empfehlungen zur Verbesserung Ihrer msgid "High" msgstr "Hoch" +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:113 +msgid "Highest product tier this billing cycle" +msgstr "" + #: src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx:81 msgid "Homepage" msgstr "Startseite" @@ -882,7 +898,7 @@ msgstr "Startseite" #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:56 #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:75 msgid "Hourly" -msgstr "Stündlich" +msgstr "Stündliche" #: src/pages/panel/shared/failed-checks/FailedChecks.tsx:108 msgid "How to fix" @@ -957,8 +973,8 @@ msgstr "Inaktivitätserinnerung" msgid "Info" msgstr "Info" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:322 -msgid "Info: Changes to your product tier will become active immediately and be applied for the current billing cycle!{0}<0/>Your next billing cycle starts: {1} UTC" +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:177 +msgid "Info: Changes to your product tier will become active immediately and be applied for the current billing cycle. {0}<0/>Your next billing cycle starts: {1} UTC" msgstr "" #: src/shared/charts/NetworkDiagram.tsx:420 @@ -978,7 +994,7 @@ msgstr "Integrationsschlüssel" msgid "Invalid Value" msgstr "Ungültiger Wert" -#: src/shared/layouts/panel-layout/menuList.tsx:38 +#: src/shared/layouts/panel-layout/menuList.tsx:39 msgid "Inventory" msgstr "Inventar" @@ -1050,15 +1066,15 @@ msgstr "Recheninstanzen und Datenbanken mit geringer Auslastung" msgid "Make sure that you are already logged into the correct AWS account, before pressing the DEPLOY STACK button." msgstr "Stellen Sie sicher, dass Sie bereits beim richtigen AWS Konto angemeldet sind, bevor Sie auf die Schaltfläche DEPLOY STACK klicken." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:510 +#: src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx:145 msgid "Manage AWS Market place payment method" msgstr "" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:528 +#: src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx:164 msgid "Manage Card Details" msgstr "" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:90 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:53 msgid "maximum of {0} cloud accounts" msgstr "maximal {0} Cloud-Konten" @@ -1072,9 +1088,9 @@ msgid "Member" msgstr "Mitglied" #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:19 -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:55 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:108 msgid "Monthly" -msgstr "Monatlich" +msgstr "Monatliche" #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:27 msgid "Monthly email report" @@ -1139,7 +1155,8 @@ msgstr "neue nicht konforme Ressourcen in der Vergangenheit {since}" msgid "New Password" msgstr "Neues Kennwort" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:315 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:170 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:90 msgid "New Product Tier" msgstr "" @@ -1147,6 +1164,10 @@ msgstr "" msgid "New security issues detected" msgstr "Neue Sicherheitsprobleme entdeckt" +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:121 +msgid "Next invoice will be available" +msgstr "" + #: src/pages/panel/accounts/AccountsTableItem.tsx:55 msgid "Next scan" msgstr "Nächster Scan" @@ -1189,6 +1210,10 @@ msgstr "" msgid "Note: You are about to delete a management or delegated admin account. Please be aware that once deleted, we will no longer have the capability to retrieve any account names, requiring you to edit them manually." msgstr "Sie löschen gerade ein Management- oder delegiertes Admin-Konto. Beachten Sie bitte, dass wir nach der Löschung nicht mehr in der Lage sein werden, Kontonamen abzurufen, wodurch Sie diese manuell bearbeiten müssen." +#: src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts:11 +msgid "Nothing" +msgstr "" + #: src/pages/panel/security/OverallCard.tsx:88 #: src/pages/panel/security/OverallCard.tsx:160 msgid "Nothing to show yet" @@ -1202,7 +1227,7 @@ msgstr "Benachrichtigung" msgid "Number Of Account Charged" msgstr "Anzahl der belasteten Konten" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:55 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:108 msgid "One time" msgstr "Einmal" @@ -1282,10 +1307,24 @@ msgstr "Passwort" msgid "Payment is required for your workspace, Please contact the workspace owner" msgstr "" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:390 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:131 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:74 +msgid "Payment method" +msgstr "" + +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:30 +msgid "Payment method changed to {0}" +msgstr "" + +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:67 msgid "Payment Method Required" msgstr "Zahlungsmethode erforderlich" +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:75 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:80 +msgid "Payment method to add" +msgstr "" + #: src/pages/panel/workspace-settings-users/WorkspaceSettingsUserInvitationsTable.tsx:24 #: src/pages/panel/workspace-settings-users/WorkspaceSettingsUserInvitationsTable.tsx:40 #: src/pages/panel/workspace-settings-users/WorkspaceSettingsUsersTable.tsx:29 @@ -1297,7 +1336,7 @@ msgstr "Ausstehende Einladungen" msgid "Pick one of the recommendations to the right and improve your security" msgstr "Wählen Sie eine der Empfehlungen rechts aus und verbessern Sie Ihre Sicherheit" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:394 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:71 msgid "Please add a payment method to switch your workspace's product tier" msgstr "" @@ -1309,9 +1348,9 @@ msgstr "Bitte geben Sie Ihr One-Time-Passwort oder einen Ihrer Wiederherstellung msgid "Please go to <0>Setup Accounts page to setup your account first" msgstr "Bitte gehen Sie zur Seite <0>Setup Accounts, um zunächst Ihr Konto einzurichten" -#: src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts:9 -msgid "Please select a payment method" -msgstr "Bitte Zahlungsart wählen" +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:79 +msgid "Please select the workspace where you would like to activate this subscription." +msgstr "" #: src/pages/panel/workspace-settings-billing/utils/productTierToLabel.ts:11 msgid "Plus" @@ -1341,10 +1380,14 @@ msgstr "Produktsupport per E-Mail und Live-Chat" msgid "Product support via email, live chat, and video call" msgstr "Produktsupport per E-Mail, Live-Chat und Videoanruf" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:218 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:52 msgid "Product tier changed to {selectedProductTier}" msgstr "" +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:30 +msgid "Product tier changed to Free" +msgstr "" + #: src/shared/layouts/panel-layout/UserProfileButton.tsx:92 msgid "Profile" msgstr "Profil" @@ -1462,7 +1505,7 @@ msgid "Secure read-only access" msgstr "Sicherer Lesezugriff" #: src/pages/panel/inventory/InventoryTemplateBoxes.tsx:24 -#: src/shared/layouts/panel-layout/menuList.tsx:53 +#: src/shared/layouts/panel-layout/menuList.tsx:54 msgid "Security" msgstr "Sicherheit" @@ -1562,7 +1605,7 @@ msgstr "Quellen" msgid "Submit" msgstr "Einreichen" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:27 +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:29 msgid "Subscription successfully added to {0}" msgstr "Abonnement erfolgreich zu {0} hinzugefügt" @@ -1628,14 +1671,12 @@ msgstr "Stufe" msgid "To access this resource, please ensure that you are logged into the AWS account: {account}" msgstr "Um auf diese Ressource zuzugreifen, stellen Sie bitte sicher, dass Sie beim AWS-Konto angemeldet sind: {account}" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:382 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:59 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:99 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:82 msgid "To AWS Marketplace" msgstr "Zum AWS Marketplace" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:79 -msgid "To enhance your experience, please select the workspace where you'd like to activate your subscription" -msgstr "Um Ihr Erlebnis zu verbessern, wählen Sie bitte den Arbeitsbereich aus, in dem Sie Ihr Abonnement aktivieren möchten" - #: src/pages/panel/security/OverallCard.tsx:123 #: src/pages/panel/shared/failed-checks/FailedChecks.tsx:114 msgid "Top Non-Compliant Resources" @@ -1716,7 +1757,7 @@ msgstr "E-Mail aktualisieren" msgid "Update Password" msgstr "Kennwort aktualisieren" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:266 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:120 msgid "Upgrade" msgstr "Aktualisierung" @@ -1731,7 +1772,7 @@ msgstr "Benachrichtigung über Benutzereinstellungen" #: src/pages/panel/workspace-settings-external-directory/WorkspaceSettingsExternalDirectoryPage.tsx:27 #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:45 -#: src/shared/layouts/panel-layout/menuList.tsx:72 +#: src/shared/layouts/panel-layout/menuList.tsx:73 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:16 msgid "Users" msgstr "Benutzer" @@ -1745,14 +1786,14 @@ msgstr "Wert" msgid "Warning" msgstr "Warnung" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:76 -msgid "We appreciate your decision to subscribe to our service through AWS Marketplace." -msgstr "Wir freuen uns über Ihre Entscheidung, unseren Service über AWS Marketplace zu abonnieren." - #: src/pages/auth/login/LoginPage.tsx:197 msgid "We have sent an email with a confirmation link to your email address. Please follow the link to activate your account." msgstr "Wir haben eine E-Mail mit einem Bestätigungslink an Ihre E-Mail-Adresse gesendet. Bitte folgen Sie dem Link, um Ihr Konto zu aktivieren." +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:94 +msgid "We're sad to see you downgrade, but we're grateful to still have you with us on the free tier. If there's anything specific you're missing, please reach out to me personally at <0>lars@some.engineering. I'd love to hear from you and help in any way I can." +msgstr "Es tut uns leid, dass Sie herunterstufen, aber wir sind dankbar, Sie weiterhin in unserer kostenlosen Stufe zu haben. Wenn Ihnen etwas Bestimmtes fehlt, wenden Sie sich bitte direkt an mich, <0>lars@some.engineering. Ich würde gerne von Ihnen hören und Ihnen so gut wie möglich helfen." + #: src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx:59 msgid "We're sorry for the inconvenience. Our team has been notified, and the issue is being looked into. Please try again in a few minutes. If the problem persists, feel free to contact us <0>on Discord. Thanks for your patience!" msgstr "Wir entschuldigen uns für die Unannehmlichkeiten. Unser Team wurde benachrichtigt und das Problem wird untersucht. Bitte versuchen Sie es in ein paar Minuten noch einmal. Wenn das Problem weiterhin besteht, können Sie uns gerne <0>auf Discord kontaktieren. Danke für Ihre Geduld!" @@ -1769,7 +1810,7 @@ msgstr "Wöchentlicher E-Mail-Bericht" msgid "Weekly Report" msgstr "Wöchentlicher Report" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:324 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:179 msgid "Within a billing cycle you will be charged for the highest product tier that was active." msgstr "" @@ -1791,7 +1832,7 @@ msgid "Workspace Name" msgstr "Arbeitsbereichsname" #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:17 -#: src/shared/layouts/panel-layout/menuList.tsx:61 +#: src/shared/layouts/panel-layout/menuList.tsx:62 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:10 msgid "Workspace Settings" msgstr "Arbeitsbereichseinstellungen" @@ -1807,11 +1848,16 @@ msgstr "Workspace-Benutzer" msgid "Yes" msgstr "" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:271 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:108 +msgid "You are about to change workspace's payment method" +msgstr "" + +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:126 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:83 msgid "You are about to change workspace's product tier" msgstr "" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:39 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:56 msgid "You are currently in your trial period, which will end in {0} days.<0/>During your trial period, you have access to all features of the product." msgstr "Sie befinden sich derzeit in Ihrer Testphase, die in {0} Tagen endet.<0/>In dieser Zeit haben Sie Zugang zu allen Funktionen des Produkts." @@ -1839,14 +1885,10 @@ msgstr "Sie haben Ihr Passwort erfolgreich zurückgesetzt." msgid "You have successfully verified your account." msgstr "Sie haben Ihr Konto erfolgreich verifiziert." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:391 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:68 msgid "You need a payment method to change your product tier" msgstr "" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:307 -msgid "You need a payment method to upgrade your plan." -msgstr "" - #: src/pages/panel/shared/failed-checks/FailedCheckIgnoreButton.tsx:44 #: src/pages/panel/shared/failed-checks/FailedChecks.tsx:94 msgid "You've chosen to ignore this security check for the resource. Please note:" diff --git a/src/locales/en-US/messages.po b/src/locales/en-US/messages.po index 14f221d8..e40f5bd8 100644 --- a/src/locales/en-US/messages.po +++ b/src/locales/en-US/messages.po @@ -13,14 +13,14 @@ msgstr "" "Language-Team: \n" "Plural-Forms: \n" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:113 -msgid "({0} / month per additional account)" -msgstr "({0} / month per additional account)" - -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:127 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:90 msgid "({0} max)" msgstr "({0} max)" +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:76 +msgid "(${0} / month per additional account)" +msgstr "(${0} / month per additional account)" + #: src/shared/utils/parseDuration.ts:171 msgid "{0, plural, one {# Day} other {# Days}}" msgstr "{0, plural, one {# Day} other {# Days}}" @@ -59,7 +59,7 @@ msgstr "{0} checks failed." msgid "{0} checks fixed." msgstr "{0} checks fixed." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:100 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:63 msgid "{0} cloud accounts included" msgstr "{0} cloud accounts included" @@ -71,15 +71,15 @@ msgstr "{0} has been connected" msgid "{0} Milliseconds" msgstr "{0} Milliseconds" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:122 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:85 msgid "{0} scans" msgstr "{0} scans" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:130 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:93 msgid "{0} seat max" msgstr "{0} seat max" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:126 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:89 msgid "{0} seats included {1}" msgstr "{0} seats included {1}" @@ -92,7 +92,7 @@ msgstr "{0}: We've identified {1} non-compliant resources out of {2}." msgid "{added} configuration lines added and {removed} lines deleted." msgstr "{added} configuration lines added and {removed} lines deleted." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:78 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:41 msgid "/ month" msgstr "/ month" @@ -100,18 +100,10 @@ msgstr "/ month" msgid "© 2024 Some Engineering Inc. All rights reserved." msgstr "© 2024 Some Engineering Inc. All rights reserved." -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:54 -msgid "<0>Billing cycle: {0}<1>Highest product tier this billing cycle: {title}" -msgstr "<0>Billing cycle: {0}<1>Highest product tier this billing cycle: {title}" - #: src/pages/panel/inventory/InventoryAdvanceSearchInfo.tsx:58 msgid "<0>Fix supports full text search by encasing the search term in double quotes. For instance,<1><2><3>{searchInstance}enables you to scan your entire infrastructure for a specific IP address.<4>Additionally, you can query for any resource attribute by utilizing the <5><6>{attributeOperatorValue} format, where the operator can be {0}or <7><8>{1}. For example,<9><10><11>{searchTagsOwners}allows you to find all resources tagged with an <12><13>{owner} attribute equal to <14><15>{sre}.<16>Search queries can be refined using boolean operators {2}<17><18>{3} to combine multiple terms. An example would be<19><20><21>{searchEc2InstanceCores}to identify all EC2 instances possessing more than 4 cores.<22>For detailed search syntax guidance, visit <23>https://docs.fix.security/search-syntax<24/>" msgstr "<0>Fix supports full text search by encasing the search term in double quotes. For instance,<1><2><3>{searchInstance}enables you to scan your entire infrastructure for a specific IP address.<4>Additionally, you can query for any resource attribute by utilizing the <5><6>{attributeOperatorValue} format, where the operator can be {0}or <7><8>{1}. For example,<9><10><11>{searchTagsOwners}allows you to find all resources tagged with an <12><13>{owner} attribute equal to <14><15>{sre}.<16>Search queries can be refined using boolean operators {2}<17><18>{3} to combine multiple terms. An example would be<19><20><21>{searchEc2InstanceCores}to identify all EC2 instances possessing more than 4 cores.<22>For detailed search syntax guidance, visit <23>https://docs.fix.security/search-syntax<24/>" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:59 -msgid "<0>Next invoice will be available: {0}" -msgstr "<0>Next invoice will be available: {0}" - #: src/pages/panel/user-settings/UserSettingsTotpActivationModal.tsx:165 msgid "<0>Open Your Authenticator App: Head over to your authenticator app and choose to add a new account manually.<1>Enter Account Details: You'll need to type in your account's email address or username, and the key provided below.<2>Your Key: <3/><4>Verification Type: Make sure to select \"Time-based\" as the verification type.<5>Enter the Code: Once your account is added manually, the app will show a 6-digit code. Pop that code into the box below and hit \"Activate\"." msgstr "<0>Open Your Authenticator App: Head over to your authenticator app and choose to add a new account manually.<1>Enter Account Details: You'll need to type in your account's email address or username, and the key provided below.<2>Your Key: <3/><4>Verification Type: Make sure to select \"Time-based\" as the verification type.<5>Enter the Code: Once your account is added manually, the app will show a 6-digit code. Pop that code into the box below and hit \"Activate\"." @@ -191,7 +183,7 @@ msgstr "Account: {0}" #: src/pages/panel/inventory/InventoryTable.error.tsx:73 #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:42 #: src/shared/language-button/LanguageButton.stories.tsx:20 -#: src/shared/layouts/panel-layout/menuList.tsx:67 +#: src/shared/layouts/panel-layout/menuList.tsx:68 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:12 msgid "Accounts" msgstr "Accounts" @@ -215,7 +207,9 @@ msgstr "Actions" msgid "Activate" msgstr "Activate" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:384 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:61 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:101 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:84 msgid "Add a New Credit or Debit Card" msgstr "Add a New Credit or Debit Card" @@ -223,10 +217,6 @@ msgstr "Add a New Credit or Debit Card" msgid "Add an account" msgstr "Add an account" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:510 -msgid "Add AWS Marketplace payment method" -msgstr "Add AWS Marketplace payment method" - #: src/pages/panel/workspace-settings-external-directory/AddExternalDirectory.tsx:33 msgid "Add Directory" msgstr "Add Directory" @@ -304,7 +294,9 @@ msgstr "An email has been sent to your inbox with a 'Reset Password' button. Ple msgid "An error occurred while connecting to {0}" msgstr "An error occurred while connecting to {0}" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:222 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:56 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:34 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:34 #: src/pages/panel/workspace-settings-users/InviteExternalUser.tsx:31 msgid "An error occurred, please try again later." msgstr "An error occurred, please try again later." @@ -321,6 +313,10 @@ msgstr "API access" msgid "API Key" msgstr "API Key" +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:111 +msgid "Are you sure you want to change payment from <0>{0} to <1>{1}?" +msgstr "Are you sure you want to change payment from <0>{0} to <1>{1}?" + #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsDisconnectServiceModal.tsx:74 msgid "Are you sure you want to disconnect {name}?" msgstr "Are you sure you want to disconnect {name}?" @@ -374,9 +370,9 @@ msgstr "Benchmark: {0}" msgid "Benchmarks" msgstr "Benchmarks" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:33 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:50 #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:48 -#: src/shared/layouts/panel-layout/menuList.tsx:77 +#: src/shared/layouts/panel-layout/menuList.tsx:78 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:20 msgid "Billing" msgstr "Billing" @@ -386,6 +382,10 @@ msgstr "Billing" msgid "Billing Admin" msgstr "Billing Admin" +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:106 +msgid "Billing cycle" +msgstr "Billing cycle" + #: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingTable.tsx:23 msgid "Billing history" msgstr "Billing history" @@ -411,6 +411,7 @@ msgstr "Business" #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsOpsgenieService.tsx:101 #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsPagerdutyService.tsx:99 #: src/pages/panel/workspace-settings/workspace-settings-services/WorkspaceSettingsTeamsService.tsx:111 +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:117 msgid "Cancel" msgstr "Cancel" @@ -420,7 +421,16 @@ msgstr "Cancel" msgid "Change" msgstr "Change" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:270 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:102 +msgid "Change payment" +msgstr "Change payment" + +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:107 +msgid "Change Payment method" +msgstr "Change Payment method" + +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:125 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:82 msgid "Change Product Tier" msgstr "Change Product Tier" @@ -437,10 +447,6 @@ msgstr "Changes" msgid "Changes in the past 7 days" msgstr "Changes in the past 7 days" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:102 -msgid "Choose Workspace" -msgstr "Choose Workspace" - #: src/pages/panel/inventory/inventory-form/InventoryFormReset.tsx:15 msgid "Clear the search" msgstr "Clear the search" @@ -502,7 +508,7 @@ msgstr "Configure" msgid "Confirm" msgstr "Confirm" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:71 +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:74 msgid "Congratulations on your subscription" msgstr "Congratulations on your subscription" @@ -564,6 +570,10 @@ msgstr "Core CSPM scanning capabilities" msgid "Created Time" msgstr "Created Time" +#: src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts:9 +msgid "Credit or Debit Card" +msgstr "Credit or Debit Card" + #: src/shared/constants/consts.ts:14 msgid "Credit/Debit Card has been successfully subscribed" msgstr "Credit/Debit Card has been successfully subscribed" @@ -572,7 +582,8 @@ msgstr "Credit/Debit Card has been successfully subscribed" msgid "Critical" msgstr "Critical" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:312 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:167 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:87 msgid "Current Product Tier" msgstr "Current Product Tier" @@ -696,7 +707,8 @@ msgstr "Do you want to delete this user?" msgid "Don't have an account? Click here to Sign up." msgstr "Don't have an account? Click here to Sign up." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:266 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:120 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:78 msgid "Downgrade" msgstr "Downgrade" @@ -875,6 +887,10 @@ msgstr "Get your top 5 recommendations to improve your security once the first s msgid "High" msgstr "High" +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:113 +msgid "Highest product tier this billing cycle" +msgstr "Highest product tier this billing cycle" + #: src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx:81 msgid "Homepage" msgstr "Homepage" @@ -957,9 +973,9 @@ msgstr "Inactivity reminder" msgid "Info" msgstr "Info" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:322 -msgid "Info: Changes to your product tier will become active immediately and be applied for the current billing cycle!{0}<0/>Your next billing cycle starts: {1} UTC" -msgstr "Info: Changes to your product tier will become active immediately and be applied for the current billing cycle!{0}<0/>Your next billing cycle starts: {1} UTC" +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:177 +msgid "Info: Changes to your product tier will become active immediately and be applied for the current billing cycle. {0}<0/>Your next billing cycle starts: {1} UTC" +msgstr "Info: Changes to your product tier will become active immediately and be applied for the current billing cycle. {0}<0/>Your next billing cycle starts: {1} UTC" #: src/shared/charts/NetworkDiagram.tsx:420 msgid "Instance is terminated" @@ -978,7 +994,7 @@ msgstr "Integration Key" msgid "Invalid Value" msgstr "Invalid Value" -#: src/shared/layouts/panel-layout/menuList.tsx:38 +#: src/shared/layouts/panel-layout/menuList.tsx:39 msgid "Inventory" msgstr "Inventory" @@ -1050,15 +1066,15 @@ msgstr "Low Utilization Compute Instances and Databases" msgid "Make sure that you are already logged into the correct AWS account, before pressing the DEPLOY STACK button." msgstr "Make sure that you are already logged into the correct AWS account, before pressing the DEPLOY STACK button." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:510 +#: src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx:145 msgid "Manage AWS Market place payment method" msgstr "Manage AWS Market place payment method" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:528 +#: src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx:164 msgid "Manage Card Details" msgstr "Manage Card Details" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:90 +#: src/pages/panel/workspace-settings-billing/ProductTierComp.tsx:53 msgid "maximum of {0} cloud accounts" msgstr "maximum of {0} cloud accounts" @@ -1072,7 +1088,7 @@ msgid "Member" msgstr "Member" #: src/pages/panel/workspace-settings-billing/utils/productTierToDescription.ts:19 -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:55 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:108 msgid "Monthly" msgstr "Monthly" @@ -1139,7 +1155,8 @@ msgstr "new non compliant resources in the past {since}" msgid "New Password" msgstr "New Password" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:315 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:170 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:90 msgid "New Product Tier" msgstr "New Product Tier" @@ -1147,6 +1164,10 @@ msgstr "New Product Tier" msgid "New security issues detected" msgstr "New security issues detected" +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:121 +msgid "Next invoice will be available" +msgstr "Next invoice will be available" + #: src/pages/panel/accounts/AccountsTableItem.tsx:55 msgid "Next scan" msgstr "Next scan" @@ -1189,6 +1210,10 @@ msgstr "Node Vulnerable" msgid "Note: You are about to delete a management or delegated admin account. Please be aware that once deleted, we will no longer have the capability to retrieve any account names, requiring you to edit them manually." msgstr "Note: You are about to delete a management or delegated admin account. Please be aware that once deleted, we will no longer have the capability to retrieve any account names, requiring you to edit them manually." +#: src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts:11 +msgid "Nothing" +msgstr "Nothing" + #: src/pages/panel/security/OverallCard.tsx:88 #: src/pages/panel/security/OverallCard.tsx:160 msgid "Nothing to show yet" @@ -1202,7 +1227,7 @@ msgstr "Notification" msgid "Number Of Account Charged" msgstr "Number Of Account Charged" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:55 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:108 msgid "One time" msgstr "One time" @@ -1282,10 +1307,24 @@ msgstr "Password" msgid "Payment is required for your workspace, Please contact the workspace owner" msgstr "Payment is required for your workspace, Please contact the workspace owner" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:390 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:131 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:74 +msgid "Payment method" +msgstr "Payment method" + +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:30 +msgid "Payment method changed to {0}" +msgstr "Payment method changed to {0}" + +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:67 msgid "Payment Method Required" msgstr "Payment Method Required" +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:75 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:80 +msgid "Payment method to add" +msgstr "Payment method to add" + #: src/pages/panel/workspace-settings-users/WorkspaceSettingsUserInvitationsTable.tsx:24 #: src/pages/panel/workspace-settings-users/WorkspaceSettingsUserInvitationsTable.tsx:40 #: src/pages/panel/workspace-settings-users/WorkspaceSettingsUsersTable.tsx:29 @@ -1297,7 +1336,7 @@ msgstr "Pending Invitations" msgid "Pick one of the recommendations to the right and improve your security" msgstr "Pick one of the recommendations to the right and improve your security" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:394 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:71 msgid "Please add a payment method to switch your workspace's product tier" msgstr "Please add a payment method to switch your workspace's product tier" @@ -1309,9 +1348,9 @@ msgstr "Please enter your One-Time-Password or one of your Recovery code." msgid "Please go to <0>Setup Accounts page to setup your account first" msgstr "Please go to <0>Setup Accounts page to setup your account first" -#: src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts:9 -msgid "Please select a payment method" -msgstr "Please select a payment method" +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:79 +msgid "Please select the workspace where you would like to activate this subscription." +msgstr "Please select the workspace where you would like to activate this subscription." #: src/pages/panel/workspace-settings-billing/utils/productTierToLabel.ts:11 msgid "Plus" @@ -1341,10 +1380,14 @@ msgstr "Product support via email and live chat" msgid "Product support via email, live chat, and video call" msgstr "Product support via email, live chat, and video call" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:218 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:52 msgid "Product tier changed to {selectedProductTier}" msgstr "Product tier changed to {selectedProductTier}" +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:30 +msgid "Product tier changed to Free" +msgstr "Product tier changed to Free" + #: src/shared/layouts/panel-layout/UserProfileButton.tsx:92 msgid "Profile" msgstr "Profile" @@ -1462,7 +1505,7 @@ msgid "Secure read-only access" msgstr "Secure read-only access" #: src/pages/panel/inventory/InventoryTemplateBoxes.tsx:24 -#: src/shared/layouts/panel-layout/menuList.tsx:53 +#: src/shared/layouts/panel-layout/menuList.tsx:54 msgid "Security" msgstr "Security" @@ -1562,7 +1605,7 @@ msgstr "Sources" msgid "Submit" msgstr "Submit" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:27 +#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:29 msgid "Subscription successfully added to {0}" msgstr "Subscription successfully added to {0}" @@ -1628,14 +1671,12 @@ msgstr "Tier" msgid "To access this resource, please ensure that you are logged into the AWS account: {account}" msgstr "To access this resource, please ensure that you are logged into the AWS account: {account}" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:382 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:59 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:99 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:82 msgid "To AWS Marketplace" msgstr "To AWS Marketplace" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:79 -msgid "To enhance your experience, please select the workspace where you'd like to activate your subscription" -msgstr "To enhance your experience, please select the workspace where you'd like to activate your subscription" - #: src/pages/panel/security/OverallCard.tsx:123 #: src/pages/panel/shared/failed-checks/FailedChecks.tsx:114 msgid "Top Non-Compliant Resources" @@ -1716,7 +1757,7 @@ msgstr "Update Email" msgid "Update Password" msgstr "Update Password" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:266 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:120 msgid "Upgrade" msgstr "Upgrade" @@ -1731,7 +1772,7 @@ msgstr "User Settings Notification" #: src/pages/panel/workspace-settings-external-directory/WorkspaceSettingsExternalDirectoryPage.tsx:27 #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:45 -#: src/shared/layouts/panel-layout/menuList.tsx:72 +#: src/shared/layouts/panel-layout/menuList.tsx:73 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:16 msgid "Users" msgstr "Users" @@ -1745,14 +1786,14 @@ msgstr "Value" msgid "Warning" msgstr "Warning" -#: src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx:76 -msgid "We appreciate your decision to subscribe to our service through AWS Marketplace." -msgstr "We appreciate your decision to subscribe to our service through AWS Marketplace." - #: src/pages/auth/login/LoginPage.tsx:197 msgid "We have sent an email with a confirmation link to your email address. Please follow the link to activate your account." msgstr "We have sent an email with a confirmation link to your email address. Please follow the link to activate your account." +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:94 +msgid "We're sad to see you downgrade, but we're grateful to still have you with us on the free tier. If there's anything specific you're missing, please reach out to me personally at <0>lars@some.engineering. I'd love to hear from you and help in any way I can." +msgstr "We're sad to see you downgrade, but we're grateful to still have you with us on the free tier. If there's anything specific you're missing, please reach out to me personally at <0>lars@some.engineering. I'd love to hear from you and help in any way I can." + #: src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx:59 msgid "We're sorry for the inconvenience. Our team has been notified, and the issue is being looked into. Please try again in a few minutes. If the problem persists, feel free to contact us <0>on Discord. Thanks for your patience!" msgstr "We're sorry for the inconvenience. Our team has been notified, and the issue is being looked into. Please try again in a few minutes. If the problem persists, feel free to contact us <0>on Discord. Thanks for your patience!" @@ -1769,7 +1810,7 @@ msgstr "Weekly email report" msgid "Weekly Report" msgstr "Weekly Report" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:324 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:179 msgid "Within a billing cycle you will be charged for the highest product tier that was active." msgstr "Within a billing cycle you will be charged for the highest product tier that was active." @@ -1791,7 +1832,7 @@ msgid "Workspace Name" msgstr "Workspace Name" #: src/pages/panel/workspace-settings/WorkspaceSettingsPage.tsx:17 -#: src/shared/layouts/panel-layout/menuList.tsx:61 +#: src/shared/layouts/panel-layout/menuList.tsx:62 #: src/shared/layouts/panel-layout/PanelBreadcrumbs.tsx:10 msgid "Workspace Settings" msgstr "Workspace Settings" @@ -1807,11 +1848,16 @@ msgstr "Workspace Users" msgid "Yes" msgstr "Yes" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:271 +#: src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx:108 +msgid "You are about to change workspace's payment method" +msgstr "You are about to change workspace's payment method" + +#: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:126 +#: src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx:83 msgid "You are about to change workspace's product tier" msgstr "You are about to change workspace's product tier" -#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:39 +#: src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx:56 msgid "You are currently in your trial period, which will end in {0} days.<0/>During your trial period, you have access to all features of the product." msgstr "You are currently in your trial period, which will end in {0} days.<0/>During your trial period, you have access to all features of the product." @@ -1839,14 +1885,10 @@ msgstr "You have successfully reset your password." msgid "You have successfully verified your account." msgstr "You have successfully verified your account." -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:391 +#: src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx:68 msgid "You need a payment method to change your product tier" msgstr "You need a payment method to change your product tier" -#: src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx:307 -msgid "You need a payment method to upgrade your plan." -msgstr "You need a payment method to upgrade your plan." - #: src/pages/panel/shared/failed-checks/FailedCheckIgnoreButton.tsx:44 #: src/pages/panel/shared/failed-checks/FailedChecks.tsx:94 msgid "You've chosen to ignore this security check for the resource. Please note:" diff --git a/src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx b/src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx deleted file mode 100644 index 5b8118b9..00000000 --- a/src/pages/panel/workspace-settings-billing/ChangePaymentMethod.tsx +++ /dev/null @@ -1,555 +0,0 @@ -import { Trans, t } from '@lingui/macro' -import { useLingui } from '@lingui/react' -import CreditCardIcon from '@mui/icons-material/CreditCard' -import DoneIcon from '@mui/icons-material/Done' -import OpenInNewIcon from '@mui/icons-material/OpenInNew' -import { LoadingButton } from '@mui/lab' -import { - Alert, - Box, - Button, - ButtonBase, - Divider, - List, - ListItem, - ListItemIcon, - ListItemText, - Stack, - Theme, - Typography, - alpha, - useMediaQuery, -} from '@mui/material' -import { useMutation, useQueryClient } from '@tanstack/react-query' -import { AxiosError } from 'axios' -import { Fragment, MutableRefObject, useRef, useState } from 'react' -import { AwsLogo } from 'src/assets/icons' -import { useUserProfile } from 'src/core/auth' -import { useSnackbar } from 'src/core/snackbar' -import { endPoints, env } from 'src/shared/constants' -import { LinkButton } from 'src/shared/link-button' -import { Modal } from 'src/shared/modal' -import { PaymentMethod, ProductTier } from 'src/shared/types/server' -import { putWorkspaceBillingMutation } from './putWorkspaceBilling.mutation' -import { productTierToDescription, productTierToLabel, useGetProductTierFromSearchParams } from './utils' - -interface ChangePaymentMethodProps { - selectedWorkspacePaymentMethod: PaymentMethod - workspacePaymentMethods: PaymentMethod[] - defaultProductTier: ProductTier - nextBillingCycle: Date -} - -const allProductTiers: readonly ProductTier[] = ['Free', 'Plus', 'Business', 'Enterprise'] as const - -interface ProductTierCompProps { - productTier: ProductTier -} - -const ProductTierComp = ({ productTier }: ProductTierCompProps) => { - const { - i18n: { locale }, - } = useLingui() - const label = productTierToLabel(productTier) - const desc = productTierToDescription(productTier) - if (!desc) { - return null - } - return ( - - - - - - {label} - - - - {desc.description} - {' '} - - - - - {desc.price.toLocaleString(locale, { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })} - - {desc.monthly ? ( - - / month - - ) : null} - - {desc.cloudAccounts.maximum ? ( - (palette.mode === 'dark' ? palette.grey[400] : palette.grey[700])} - > - {t`maximum of ${desc.cloudAccounts.maximum} cloud accounts`} - - ) : desc.cloudAccounts.included ? ( - (palette.mode === 'dark' ? palette.grey[400] : palette.grey[700])} - > - {t`${desc.cloudAccounts.included} cloud accounts included`} - - ) : ( - - )} - {desc.cloudAccounts.additionalCost ? ( - (palette.mode === 'dark' ? palette.grey[400] : palette.grey[700])} - > - {t`(${desc.cloudAccounts.additionalCost.toLocaleString(locale, { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })} / month per additional account)`} - - ) : ( - - )} - - - - - {desc.scanFrequency} scans - - - {desc.seats.included ? ( - - {desc.seats.included} seats included {desc.seats.maximum ? t`(${desc.seats.maximum} max)` : ''} - - ) : ( - {desc.seats.maximum} seat max - )} - - - - {desc.featuresTitle}: - - {desc.features.map((feature, i) => ( - - - - - - {feature} - - - ))} - - - - - Support: - - {desc.support.map((support, i) => ( - - - - - - {support} - - - ))} - - - - - ) -} - -const PaymentMethodDivider = () => { - const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm')) - - return ( - - ) -} - -interface ChangePaymentMethodModal { - selectedWorkspacePaymentMethod: PaymentMethod - awsPaymentMethod?: PaymentMethod - stripePaymentMethod?: PaymentMethod - productTier: ProductTier - selectedProductTier: ProductTier - showModalRef: MutableRefObject<((show?: boolean | undefined) => void) | undefined> - isUpgrade: boolean - defaultOpen?: boolean - nextBillingCycle: Date - onClose?: () => void -} - -const ChangePaymentMethodModal = ({ - productTier, - selectedProductTier, - selectedWorkspacePaymentMethod, - // awsPaymentMethod, - // stripePaymentMethod, - showModalRef, - isUpgrade, - defaultOpen, - nextBillingCycle, - onClose, -}: ChangePaymentMethodModal) => { - const { - i18n: { locale }, - } = useLingui() - const [paymentMethod, _setPaymentMethod] = useState(selectedWorkspacePaymentMethod) - const { showSnackbar } = useSnackbar() - const { selectedWorkspace } = useUserProfile() - const queryClient = useQueryClient() - - const { mutate: changeBilling, isPending: changeBillingIsPending } = useMutation({ - mutationFn: putWorkspaceBillingMutation, - onSuccess: () => { - void showSnackbar(t`Product tier changed to ${selectedProductTier}`, { severity: 'success' }) - }, - onError: (err) => { - const { response: { data } = { data: { message: '' } } } = err as AxiosError - void showSnackbar((data as { message: string } | undefined)?.message ?? t`An error occurred, please try again later.`, { - severity: 'error', - }) - }, - onSettled: () => { - void queryClient.invalidateQueries({ - queryKey: ['workspace-billing'], - }) - showModalRef.current?.(false) - }, - }) - return ( - - - { - changeBilling({ - product_tier: selectedProductTier, - workspaceId: selectedWorkspace?.id ?? '', - }) - }} - size="large" - sx={{ width: 180 }} - disabled={paymentMethod.method === 'none' || !paymentMethod.subscription_id} - endIcon={<>} - > - {isUpgrade ? Upgrade : Downgrade} - - - } - title={t`Change Product Tier`} - description={You are about to change workspace's product tier} - > - {/* - - Payment method - - - */} - {paymentMethod.method === 'none' ? ( - - You need a payment method to upgrade your plan. - - ) : ( - - - Current Product Tier: {productTierToLabel(productTier)} - - - New Product Tier: {productTierToLabel(selectedProductTier)} - - {paymentMethod.method === 'aws_marketplace' && !paymentMethod.subscription_id ? ( - Make sure to log in to AWS Console before proceeding. - ) : null} - - - - Info: Changes to your product tier will become active immediately and be applied for the current billing cycle! - {isUpgrade ? null : ` ${t`Within a billing cycle you will be charged for the highest product tier that was active.`}`} -
- Your next billing cycle starts:{' '} - {nextBillingCycle.toLocaleString(locale, { - year: 'numeric', - month: '2-digit', - day: '2-digit', - hour: '2-digit', - minute: '2-digit', - })}{' '} - UTC - - - - - )} - - ) -} - -interface ChangePaymentNoMethodModalProps { - showModalRef: MutableRefObject<((show?: boolean | undefined) => void) | undefined> - defaultOpen?: boolean - onClose?: () => void -} - -const ChangePaymentNoMethodModal = ({ showModalRef, defaultOpen, onClose }: ChangePaymentNoMethodModalProps) => { - const [paymentMethod, _setPaymentMethod] = useState({ method: 'stripe', subscription_id: '' }) - const { selectedWorkspace } = useUserProfile() - - return ( - - - {paymentMethod.method === 'none' ? null : ( - - {paymentMethod.method === 'aws_marketplace' ? ( - To AWS Marketplace - ) : ( - Add a New Credit or Debit Card - )} - - )} - - } - title={t`Payment Method Required`} - description={You need a payment method to change your product tier} - > - - Please add a payment method to switch your workspace's product tier - - - ) -} - -export const ChangePaymentMethod = ({ - defaultProductTier, - selectedWorkspacePaymentMethod, - // workspacePaymentMethods, - nextBillingCycle, -}: ChangePaymentMethodProps) => { - const { selectedWorkspace } = useUserProfile() - const tierFromSearchParams = useGetProductTierFromSearchParams() - const showModalRef = useRef<(show?: boolean | undefined) => void>() - const showNoMethodModalRef = useRef<(show?: boolean | undefined) => void>() - - const [awsMarketPlacePaymentMethod, stripePaymentMethod] = [ - selectedWorkspacePaymentMethod.method === 'aws_marketplace' ? selectedWorkspacePaymentMethod : undefined, - selectedWorkspacePaymentMethod.method === 'stripe' ? selectedWorkspacePaymentMethod : undefined, - ] // useMemo(() => { - // let awsMarketPlacePaymentMethod: PaymentMethod | undefined - // let stripePaymentMethod: PaymentMethod | undefined - // workspacePaymentMethods.forEach((paymentMethod) => { - // if (paymentMethod.method === 'aws_marketplace') { - // awsMarketPlacePaymentMethod = paymentMethod - // } else if (paymentMethod.method === 'stripe') { - // stripePaymentMethod = paymentMethod - // } - // }) - // return [awsMarketPlacePaymentMethod, stripePaymentMethod] - // }, [workspacePaymentMethods]) - - const noWorkspaceMethod = selectedWorkspacePaymentMethod.method !== 'stripe' // selectedWorkspacePaymentMethod.method === 'none' // !stripePaymentMethod && !awsMarketPlacePaymentMethod - - const [productTier, setProductTier] = useState(() => - noWorkspaceMethod ? defaultProductTier : tierFromSearchParams ?? defaultProductTier, - ) - - const isUpgrade = - productTier === defaultProductTier || (defaultProductTier === 'Trial' && productTier === 'Free') - ? null - : allProductTiers.indexOf(productTier) > allProductTiers.indexOf(defaultProductTier) - - return ( - <> - - {allProductTiers.map((curProductTier, i) => { - const selectedProductTier = curProductTier === productTier || (productTier === 'Trial' && curProductTier === 'Free') - return ( - - {i ? : null} - {selectedProductTier ? ( - alpha(main, 0.15), - borderRadius: 2, - boxShadow: 12, - transition: (theme) => theme.transitions.create(['box-shadow', 'background-color']), - }} - > - - - ) : ( - theme.transitions.create(['box-shadow', 'background-color']), - }} - onClick={noWorkspaceMethod ? () => showNoMethodModalRef.current?.(true) : () => setProductTier(curProductTier)} - > - - - )} - - ) - })} - - {noWorkspaceMethod ? ( - setProductTier(defaultProductTier)} - /> - ) : ( - - {noWorkspaceMethod ? null : ( - <> - - {/* - Payment Methods - */} - {awsMarketPlacePaymentMethod ? ( - - } - endIcon={} - variant="outlined" - href={env.aws_marketplace_url} - > - - {awsMarketPlacePaymentMethod ? t`Manage AWS Market place payment method` : t`Add AWS Marketplace payment method`} - - - - ) : null} - {stripePaymentMethod ? ( - - } - endIcon={<>} - sx={{ - maxWidth: '100%', - width: 580, - }} - variant="outlined" - href={`${env.apiUrl}/${endPoints.workspaces.workspace(selectedWorkspace?.id ?? '').subscription.stripe}`} - > - - Manage Card Details - - - - ) : null} - - - )} - - )} - {!noWorkspaceMethod && isUpgrade !== null ? ( - setProductTier(defaultProductTier)} - isUpgrade={isUpgrade} - productTier={defaultProductTier} - selectedProductTier={productTier} - selectedWorkspacePaymentMethod={selectedWorkspacePaymentMethod} - showModalRef={showModalRef} - awsPaymentMethod={awsMarketPlacePaymentMethod} - stripePaymentMethod={stripePaymentMethod} - defaultOpen={true} - /> - ) : null} - - - ) -} diff --git a/src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx b/src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx new file mode 100644 index 00000000..e910e375 --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ChangePaymentNoMethodModal.tsx @@ -0,0 +1,93 @@ +import { Trans, t } from '@lingui/macro' +import { Button, FormControl, InputLabel, MenuItem, Select, Stack, Typography } from '@mui/material' +import { MutableRefObject, useId, useState } from 'react' +import { useUserProfile } from 'src/core/auth' +import { endPoints, env } from 'src/shared/constants' +import { LinkButton } from 'src/shared/link-button' +import { Modal } from 'src/shared/modal' +import { PaymentMethod, PaymentMethods, ProductTier } from 'src/shared/types/server' +import { paymentMethodToLabel, paymentMethods } from './utils' + +export interface ChangePaymentNoMethodModalProps { + showModalRef: MutableRefObject<((show?: boolean | undefined) => void) | undefined> + selectedProductTier: ProductTier + defaultOpen?: boolean + onClose?: () => void +} + +export const ChangePaymentNoMethodModal = ({ + showModalRef, + defaultOpen, + selectedProductTier, + onClose, +}: ChangePaymentNoMethodModalProps) => { + const [paymentMethod, setPaymentMethod] = useState({ method: 'stripe', subscription_id: '' }) + const id = useId() + const { selectedWorkspace } = useUserProfile() + + return ( + + + {paymentMethod.method === 'none' ? null : ( + + {paymentMethod.method === 'aws_marketplace' ? ( + To AWS Marketplace + ) : ( + Add a New Credit or Debit Card + )} + + )} + + } + title={t`Payment Method Required`} + description={You need a payment method to change your product tier} + > + + Please add a payment method to switch your workspace's product tier + + + + Payment method to add + + + + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx b/src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx new file mode 100644 index 00000000..00358049 --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ChangeProductTier.tsx @@ -0,0 +1,177 @@ +import { Trans } from '@lingui/macro' +import CreditCardIcon from '@mui/icons-material/CreditCard' +import { ButtonBase, Divider, Stack, Typography, alpha } from '@mui/material' +import { Fragment, useRef, useState } from 'react' +import { AwsLogo } from 'src/assets/icons' +import { useUserProfile } from 'src/core/auth' +import { endPoints, env } from 'src/shared/constants' +import { LinkButton } from 'src/shared/link-button' +import { PaymentMethod, ProductTier } from 'src/shared/types/server' +import { ChangePaymentNoMethodModal } from './ChangePaymentNoMethodModal' +import { ChangeProductTierModal } from './ChangeProductTierModal' +import { ChangeProductTierToFreeModal } from './ChangeProductTierToFreeModal' +import { ProductTierComp } from './ProductTierComp' +import { ProductTierDivider } from './ProductTierDivider' +import { useGetProductTierFromSearchParams } from './utils' + +interface ChangeProductTierProps { + selectedWorkspacePaymentMethod: PaymentMethod + workspacePaymentMethods: PaymentMethod[] + defaultProductTier: ProductTier + nextBillingCycle: Date +} + +const allProductTiers: readonly ProductTier[] = ['Free', 'Plus', 'Business', 'Enterprise'] as const + +export const ChangeProductTier = ({ + defaultProductTier, + selectedWorkspacePaymentMethod, + workspacePaymentMethods, + nextBillingCycle, +}: ChangeProductTierProps) => { + const { selectedWorkspace } = useUserProfile() + const tierFromSearchParams = useGetProductTierFromSearchParams() + const showModalRef = useRef<(show?: boolean | undefined) => void>() + const showNoMethodModalRef = useRef<(show?: boolean | undefined) => void>() + + const [awsMarketPlacePaymentMethod, stripePaymentMethod] = [ + selectedWorkspacePaymentMethod.method === 'aws_marketplace' ? selectedWorkspacePaymentMethod : undefined, + selectedWorkspacePaymentMethod.method === 'stripe' ? selectedWorkspacePaymentMethod : undefined, + ] + + const noWorkspaceMethod = selectedWorkspacePaymentMethod.method === 'none' + + const [productTier, setProductTier] = useState(() => + noWorkspaceMethod ? defaultProductTier : tierFromSearchParams ?? defaultProductTier, + ) + + const isUpgrade = + productTier === defaultProductTier || (defaultProductTier === 'Trial' && productTier === 'Free') + ? null + : allProductTiers.indexOf(productTier) > allProductTiers.indexOf(defaultProductTier) + + return ( + <> + + {allProductTiers.map((curProductTier, i) => { + const selectedProductTier = curProductTier === productTier || (productTier === 'Trial' && curProductTier === 'Free') + return ( + + {i ? : null} + {selectedProductTier ? ( + alpha(main, 0.15), + borderRadius: 2, + boxShadow: 12, + transition: (theme) => theme.transitions.create(['box-shadow', 'background-color']), + }} + > + + + ) : ( + theme.transitions.create(['box-shadow', 'background-color']), + }} + onClick={() => setProductTier(curProductTier)} + > + + + )} + + ) + })} + + {isUpgrade !== null ? ( + productTier === 'Free' ? ( + setProductTier(defaultProductTier)} + productTier={defaultProductTier} + showModalRef={showModalRef} + defaultOpen={true} + /> + ) : noWorkspaceMethod ? ( + setProductTier(defaultProductTier)} + /> + ) : ( + setProductTier(defaultProductTier)} + isUpgrade={isUpgrade} + productTier={defaultProductTier} + selectedProductTier={productTier} + selectedWorkspacePaymentMethod={selectedWorkspacePaymentMethod} + showModalRef={showModalRef} + defaultOpen={true} + /> + ) + ) : ( + + {noWorkspaceMethod ? null : ( + <> + + {awsMarketPlacePaymentMethod ? ( + + } + endIcon={null} + loadingPosition="start" + variant="outlined" + href={`${env.aws_marketplace_url}`} + > + + Manage AWS Market place payment method + + + + ) : null} + {stripePaymentMethod ? ( + + } + endIcon={null} + loadingPosition="start" + sx={{ + maxWidth: '100%', + width: 580, + }} + variant="outlined" + href={`${env.apiUrl}/${endPoints.workspaces.workspace(selectedWorkspace?.id ?? '').subscription.stripe}`} + > + + Manage Card Details + + + + ) : null} + + + )} + + )} + + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx b/src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx new file mode 100644 index 00000000..99d2ee24 --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx @@ -0,0 +1,196 @@ +import { Trans, t } from '@lingui/macro' +import { useLingui } from '@lingui/react' +import InfoIcon from '@mui/icons-material/Info' +import { LoadingButton } from '@mui/lab' +import { Alert, Button, MenuItem, Select, Stack, Typography } from '@mui/material' +import { useMutation, useQueryClient } from '@tanstack/react-query' +import { AxiosError } from 'axios' +import { MutableRefObject, useState } from 'react' +import { useUserProfile } from 'src/core/auth' +import { useSnackbar } from 'src/core/snackbar' +import { endPoints, env } from 'src/shared/constants' +import { LinkButton } from 'src/shared/link-button' +import { Modal } from 'src/shared/modal' +import { PaymentMethod, PaymentMethodWithoutNone, PaymentMethods, ProductTier } from 'src/shared/types/server' +import { putWorkspaceBillingMutation } from './putWorkspaceBilling.mutation' +import { paymentMethodToLabel, paymentMethods, productTierToLabel } from './utils' + +export interface ChangeProductTierModalProps { + productTier: ProductTier + workspacePaymentMethods: PaymentMethod[] + selectedWorkspacePaymentMethod: PaymentMethodWithoutNone + selectedProductTier: ProductTier + showModalRef: MutableRefObject<((show?: boolean | undefined) => void) | undefined> + isUpgrade: boolean + defaultOpen?: boolean + nextBillingCycle: Date + onClose?: () => void +} + +export const ChangeProductTierModal = ({ + productTier, + workspacePaymentMethods, + selectedProductTier, + selectedWorkspacePaymentMethod, + showModalRef, + isUpgrade, + defaultOpen, + nextBillingCycle, + onClose, +}: ChangeProductTierModalProps) => { + const { + i18n: { locale }, + } = useLingui() + const [paymentMethod, setPaymentMethod] = useState(selectedWorkspacePaymentMethod) + const { showSnackbar } = useSnackbar() + const { selectedWorkspace } = useUserProfile() + const queryClient = useQueryClient() + + const { mutate: changeBilling, isPending: changeBillingIsPending } = useMutation({ + mutationFn: putWorkspaceBillingMutation, + onSuccess: () => { + void showSnackbar(t`Product tier changed to ${selectedProductTier}`, { severity: 'success' }) + }, + onError: (err) => { + const { response: { data } = { data: { message: '' } } } = err as AxiosError + void showSnackbar((data as { message: string } | undefined)?.message ?? t`An error occurred, please try again later.`, { + severity: 'error', + }) + }, + onSettled: () => { + void queryClient.invalidateQueries({ + queryKey: ['workspace-billing'], + }) + showModalRef.current?.(false) + }, + }) + return ( + + + {paymentMethod.method === 'none' ? null : !paymentMethod.subscription_id ? ( + + {paymentMethod.method === 'aws_marketplace' ? ( + To AWS Marketplace + ) : ( + Add a New Credit or Debit Card + )} + + ) : ( + { + changeBilling({ + product_tier: selectedProductTier, + workspace_payment_method: paymentMethod, + workspaceId: selectedWorkspace?.id ?? '', + }) + }} + size="large" + sx={{ width: 180 }} + > + {isUpgrade ? Upgrade : Downgrade} + + )} + + } + title={t`Change Product Tier`} + description={You are about to change workspace's product tier} + > + + + + Payment method + + :{' '} + + + + Current Product Tier: {productTierToLabel(productTier)} + + + New Product Tier: {productTierToLabel(selectedProductTier)} + + {paymentMethod.method === 'aws_marketplace' && !paymentMethod.subscription_id ? ( + Make sure to log in to AWS Console before proceeding. + ) : null} + }> + + + Info: Changes to your product tier will become active immediately and be applied for the current billing cycle.{' '} + {isUpgrade ? null : ` ${t`Within a billing cycle you will be charged for the highest product tier that was active.`}`} +
+ Your next billing cycle starts:{' '} + {nextBillingCycle.toLocaleString(locale, { + year: 'numeric', + month: '2-digit', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + })}{' '} + UTC + + + + + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx b/src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx new file mode 100644 index 00000000..40b0ba29 --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ChangeProductTierToFreeModal.tsx @@ -0,0 +1,104 @@ +import { Trans, t } from '@lingui/macro' +import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied' +import { LoadingButton } from '@mui/lab' +import { Alert, Button, Link, Stack, Typography } from '@mui/material' +import { useMutation, useQueryClient } from '@tanstack/react-query' +import { AxiosError } from 'axios' +import { MutableRefObject } from 'react' +import { useUserProfile } from 'src/core/auth' +import { useSnackbar } from 'src/core/snackbar' +import { Modal } from 'src/shared/modal' +import { ProductTier } from 'src/shared/types/server' +import { putWorkspaceBillingMutation } from './putWorkspaceBilling.mutation' +import { productTierToLabel } from './utils' + +export interface ChangeProductTierModalProps { + productTier: ProductTier + showModalRef: MutableRefObject<((show?: boolean | undefined) => void) | undefined> + defaultOpen?: boolean + onClose?: () => void +} + +export const ChangeProductTierToFreeModal = ({ showModalRef, defaultOpen, productTier, onClose }: ChangeProductTierModalProps) => { + const { showSnackbar } = useSnackbar() + const { selectedWorkspace } = useUserProfile() + const queryClient = useQueryClient() + + const { mutate: changeBilling, isPending: changeBillingIsPending } = useMutation({ + mutationFn: putWorkspaceBillingMutation, + onSuccess: () => { + void showSnackbar(t`Product tier changed to Free`, { severity: 'success' }) + }, + onError: (err) => { + const { response: { data } = { data: { message: '' } } } = err as AxiosError + void showSnackbar((data as { message: string } | undefined)?.message ?? t`An error occurred, please try again later.`, { + severity: 'error', + }) + }, + onSettled: () => { + void queryClient.invalidateQueries({ + queryKey: ['workspace-billing'], + }) + showModalRef.current?.(false) + }, + }) + return ( + + + { + changeBilling({ + product_tier: 'Free', + workspace_payment_method: { method: 'none' }, + workspaceId: selectedWorkspace?.id ?? '', + }) + }} + size="large" + sx={{ width: 180 }} + > + Downgrade + + + } + title={t`Change Product Tier`} + description={You are about to change workspace's product tier} + > + + + Current Product Tier: {productTierToLabel(productTier)} + + + New Product Tier: {productTierToLabel('Free')} + + }> + + + We're sad to see you downgrade, but we're grateful to still have you with us on the free tier. If there's anything specific + you're missing, please reach out to me personally at lars@some.engineering. + I'd love to hear from you and help in any way I can. + + + + + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx b/src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx new file mode 100644 index 00000000..5c7e737c --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ConfirmChangePaymentModal.tsx @@ -0,0 +1,118 @@ +import { Trans, t } from '@lingui/macro' +import { LoadingButton } from '@mui/lab' +import { Box, Button, Stack } from '@mui/material' +import { useMutation, useQueryClient } from '@tanstack/react-query' +import { AxiosError } from 'axios' +import { MutableRefObject, useEffect, useRef, useState } from 'react' +import { useUserProfile } from 'src/core/auth' +import { useSnackbar } from 'src/core/snackbar' +import { endPoints, env } from 'src/shared/constants' +import { LinkButton } from 'src/shared/link-button' +import { Modal } from 'src/shared/modal' +import { PaymentMethod, PaymentMethodWithoutNone } from 'src/shared/types/server' +import { putWorkspaceBillingMutation } from './putWorkspaceBilling.mutation' +import { paymentMethodToLabel } from './utils' + +interface ConfirmChangePaymentModalProps { + currentPaymentMethod: PaymentMethod + paymentModalShowRef: MutableRefObject<((paymentMethod: PaymentMethodWithoutNone) => void) | undefined> +} + +export const ConfirmChangePaymentModal = ({ paymentModalShowRef, currentPaymentMethod }: ConfirmChangePaymentModalProps) => { + const [paymentMethod, setPaymentMethod] = useState({ method: 'none' }) + const { showSnackbar } = useSnackbar() + const { selectedWorkspace } = useUserProfile() + const queryClient = useQueryClient() + const showModalRef = useRef<(show?: boolean) => void>() + const { mutate: changeBilling, isPending: changeBillingIsPending } = useMutation({ + mutationFn: putWorkspaceBillingMutation, + onSuccess: () => { + void showSnackbar(t`Payment method changed to ${paymentMethodToLabel(paymentMethod.method)}`, { severity: 'success' }) + }, + onError: (err) => { + const { response: { data } = { data: { message: '' } } } = err as AxiosError + void showSnackbar((data as { message: string } | undefined)?.message ?? t`An error occurred, please try again later.`, { + severity: 'error', + }) + }, + onSettled: () => { + void queryClient.invalidateQueries({ + queryKey: ['workspace-billing'], + }) + showModalRef.current?.(false) + }, + }) + useEffect(() => { + paymentModalShowRef.current = (selectedPaymentMethod: PaymentMethodWithoutNone) => { + if (showModalRef.current) { + showModalRef.current(true) + setPaymentMethod(selectedPaymentMethod) + } + } + }, [paymentModalShowRef]) + return ( + + + {paymentMethod.method === 'none' ? null : !paymentMethod.subscription_id ? ( + + {paymentMethod.method === 'aws_marketplace' ? ( + To AWS Marketplace + ) : ( + Add a New Credit or Debit Card + )} + + ) : ( + { + changeBilling({ + product_tier: null, + workspace_payment_method: paymentMethod, + workspaceId: selectedWorkspace?.id ?? '', + }) + }} + size="large" + sx={{ width: 180 }} + > + Change payment + + )} + + } + title={t`Change Payment method`} + description={You are about to change workspace's payment method} + > + + + Are you sure you want to change payment from {paymentMethodToLabel(currentPaymentMethod.method)} to{' '} + {paymentMethodToLabel(paymentMethod.method)}? + + + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/ProductTierComp.tsx b/src/pages/panel/workspace-settings-billing/ProductTierComp.tsx new file mode 100644 index 00000000..0c3ba9cb --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ProductTierComp.tsx @@ -0,0 +1,131 @@ +import { Trans, t } from '@lingui/macro' +import { useLingui } from '@lingui/react' +import DoneIcon from '@mui/icons-material/Done' +import { Box, Divider, List, ListItem, ListItemIcon, ListItemText, Stack, Typography } from '@mui/material' +import { ProductTier } from 'src/shared/types/server' +import { productTierToDescription, productTierToLabel } from './utils' + +export interface ProductTierCompProps { + productTier: ProductTier +} + +export const ProductTierComp = ({ productTier }: ProductTierCompProps) => { + const { + i18n: { locale }, + } = useLingui() + const label = productTierToLabel(productTier) + const desc = productTierToDescription(productTier) + if (!desc) { + return null + } + return ( + + + + + + {label} + + + + {desc.description} + {' '} + + + + + ${desc.price.toLocaleString(locale)} + + {desc.monthly ? ( + + / month + + ) : null} + + {desc.cloudAccounts.maximum ? ( + (palette.mode === 'dark' ? palette.grey[400] : palette.grey[700])} + > + {t`maximum of ${desc.cloudAccounts.maximum} cloud accounts`} + + ) : desc.cloudAccounts.included ? ( + (palette.mode === 'dark' ? palette.grey[400] : palette.grey[700])} + > + {t`${desc.cloudAccounts.included} cloud accounts included`} + + ) : ( + + )} + {desc.cloudAccounts.additionalCost ? ( + (palette.mode === 'dark' ? palette.grey[400] : palette.grey[700])} + > + {t`($${desc.cloudAccounts.additionalCost.toLocaleString(locale)} / month per additional account)`} + + ) : ( + + )} + + + + + {desc.scanFrequency} scans + + + {desc.seats.included ? ( + + {desc.seats.included} seats included {desc.seats.maximum ? t`(${desc.seats.maximum} max)` : ''} + + ) : ( + {desc.seats.maximum} seat max + )} + + + + {desc.featuresTitle}: + + {desc.features.map((feature, i) => ( + + + + + + {feature} + + + ))} + + + + + Support: + + {desc.support.map((support, i) => ( + + + + + + {support} + + + ))} + + + + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/ProductTierDivider.tsx b/src/pages/panel/workspace-settings-billing/ProductTierDivider.tsx new file mode 100644 index 00000000..d349c395 --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/ProductTierDivider.tsx @@ -0,0 +1,13 @@ +import { Divider, Theme, useMediaQuery } from '@mui/material' + +export const ProductTierDivider = () => { + const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm')) + + return ( + + ) +} diff --git a/src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx b/src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx index db3cb228..8f4c53d5 100644 --- a/src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx +++ b/src/pages/panel/workspace-settings-billing/WorkspaceSettingsBillingPage.tsx @@ -1,13 +1,16 @@ import { Trans, t } from '@lingui/macro' import { useLingui } from '@lingui/react' -import { Alert, Divider, Stack, Typography } from '@mui/material' +import { Alert, Divider, MenuItem, Select, SelectChangeEvent, Stack, Typography } from '@mui/material' import { useSuspenseQuery } from '@tanstack/react-query' +import { useRef } from 'react' import { useUserProfile } from 'src/core/auth' import { useHasBillingPermissionCheck } from 'src/shared/layouts/panel-layout' -import { ChangePaymentMethod } from './ChangePaymentMethod' +import { PaymentMethodWithoutNone } from 'src/shared/types/server' +import { ChangeProductTier } from './ChangeProductTier' +import { ConfirmChangePaymentModal } from './ConfirmChangePaymentModal' import { WorkspaceSettingsBillingTable } from './WorkspaceSettingsBillingTable' import { getWorkspaceBillingQuery } from './getWorkspaceBilling.query' -import { productTierToDescription, productTierToLabel } from './utils' +import { paymentMethodToLabel, paymentMethods, productTierToDescription, productTierToLabel } from './utils' export default function WorkspaceSettingsBillingPage() { const { @@ -21,6 +24,15 @@ export default function WorkspaceSettingsBillingPage() { queryFn: getWorkspaceBillingQuery, queryKey: ['workspace-billing', hasBillingPermission ? selectedWorkspace?.id : undefined], }) + const paymentModalShowRef = useRef<(paymentMethod: PaymentMethodWithoutNone) => void>() + const handleOnPaymentMethodChange = (event: SelectChangeEvent<'aws_marketplace' | 'stripe'>) => { + paymentModalShowRef.current?.({ + method: event.target.value as PaymentMethodWithoutNone['method'], + subscription_id: + (available_payment_methods.find((paymentMethod) => paymentMethod.method === event.target.value) as PaymentMethodWithoutNone) + ?.subscription_id ?? '', + }) + } const currentDate = new Date() currentDate.setMilliseconds(0) currentDate.setSeconds(0) @@ -50,26 +62,70 @@ export default function WorkspaceSettingsBillingPage() { ) : null} - - - Billing cycle: {desc.monthly ? t`Monthly` : t`One time`} - Highest product tier this billing cycle: {title} - + {workspace_payment_method.method !== 'none' ? ( + + + Payment method + + :{' '} + + + ) : null} + + + + Billing cycle + + : {desc.monthly ? t`Monthly` : t`One time`} + + + + + Highest product tier this billing cycle + + : {title} + + {desc.monthly ? ( - - - Next invoice will be available:{' '} - {nextBillingCycle.toLocaleDateString(locale, { year: 'numeric', month: '2-digit', day: '2-digit' })} - - + + + Next invoice will be available + + : {nextBillingCycle.toLocaleDateString(locale, { year: 'numeric', month: '2-digit', day: '2-digit' })} + ) : null} + ) : null } diff --git a/src/pages/panel/workspace-settings-billing/utils/index.ts b/src/pages/panel/workspace-settings-billing/utils/index.ts index 9be9d704..a93ba9b9 100644 --- a/src/pages/panel/workspace-settings-billing/utils/index.ts +++ b/src/pages/panel/workspace-settings-billing/utils/index.ts @@ -1,4 +1,5 @@ export { paymentMethodToLabel } from './paymentMethodToLabel' +export { paymentMethods } from './paymentMethods' export { productTierToDescription } from './productTierToDescription' export { productTierToLabel } from './productTierToLabel' export { useGetProductTierFromSearchParams } from './useGetProductTierFromSearchParams' diff --git a/src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts b/src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts index a519554c..1f88bd2d 100644 --- a/src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts +++ b/src/pages/panel/workspace-settings-billing/utils/paymentMethodToLabel.ts @@ -5,8 +5,10 @@ export const paymentMethodToLabel = (paymentMethod: PaymentMethods) => { switch (paymentMethod) { case 'aws_marketplace': return t`AWS Marketplace` + case 'stripe': + return t`Credit or Debit Card` case 'none': - return t`Please select a payment method` + return t`Nothing` default: return paymentMethod } diff --git a/src/pages/panel/workspace-settings-billing/utils/paymentMethods.ts b/src/pages/panel/workspace-settings-billing/utils/paymentMethods.ts new file mode 100644 index 00000000..ca5927c9 --- /dev/null +++ b/src/pages/panel/workspace-settings-billing/utils/paymentMethods.ts @@ -0,0 +1,3 @@ +import { PaymentMethods } from 'src/shared/types/server' + +export const paymentMethods: PaymentMethods[] = ['stripe'] //, 'aws_marketplace'] diff --git a/src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx b/src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx index 8bb13c04..126f728f 100644 --- a/src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx +++ b/src/pages/subscription/choose-workspace/ChooseWorkspacePage.tsx @@ -1,6 +1,6 @@ import { t, Trans } from '@lingui/macro' import { LoadingButton } from '@mui/lab' -import { alpha, ButtonBase, Card, CardHeader, Grid, Stack, styled, Typography } from '@mui/material' +import { Button, Card, CardHeader, Grid, Stack, Typography } from '@mui/material' import { useMutation } from '@tanstack/react-query' import { AxiosError } from 'axios' import { useCallback, useEffect } from 'react' @@ -12,18 +12,20 @@ import { LoadingSuspenseFallback } from 'src/shared/loading' import { setSubscriptionId } from 'src/shared/utils/localstorage' import { putWorkspaceSubscriptionMutation } from './putWorkspaceSubscription.mutation' -const ChooseWorkspaceButton = styled(LoadingButton)({ - minHeight: 50, -}) - export default function ChooseWorkspacePage() { const { workspaces, selectedWorkspace, selectWorkspace } = useUserProfile() const { showSnackbar } = useSnackbar() + const navigate = useAbsoluteNavigate() + + const afterSubmit = useCallback(() => { + setSubscriptionId() + navigate('/workspace-settings/billing-receipts') + }, [navigate]) + const { mutateAsync, isPending, error } = useMutation({ mutationFn: putWorkspaceSubscriptionMutation, onSuccess: () => { - setSubscriptionId() - navigate('/workspace-settings/billing-receipts') + afterSubmit() void showSnackbar(t`Subscription successfully added to ${selectedWorkspace?.name}`, { severity: 'success', snackbarProps: { sx: { zIndex: ({ zIndex: { tooltip } }) => tooltip + 4 } }, @@ -41,28 +43,29 @@ export default function ChooseWorkspacePage() { ) }, }) - const navigate = useAbsoluteNavigate() const [getSearch] = useSearchParams() const subscriptionId = getSearch.get('subscription_id') - const afterSubmit = useCallback(() => { - setSubscriptionId(undefined) - navigate('/') - }, [navigate]) - useEffect(() => { if (subscriptionId) { if (workspaces?.length === 1) { - void mutateAsync({ workspaceId: workspaces[0].id ?? '', subscriptionId: subscriptionId ?? '' }).then(afterSubmit) + void mutateAsync({ workspaceId: workspaces[0].id ?? '', subscriptionId: subscriptionId ?? '' }) } setSubscriptionId(subscriptionId) } else { navigate('/') } - }, [subscriptionId, navigate, workspaces, mutateAsync, afterSubmit]) + }, [subscriptionId, navigate, workspaces, mutateAsync]) - const handleSubmit = () => { - void mutateAsync({ workspaceId: selectedWorkspace?.id ?? '', subscriptionId: subscriptionId ?? '' }).then(afterSubmit) + const handleSubmit = async (id: string) => { + await selectWorkspace(id) + window.setTimeout(() => { + void mutateAsync({ workspaceId: selectedWorkspace?.id ?? '', subscriptionId: subscriptionId ?? '' }) + }) + } + const handleCancel = () => { + setSubscriptionId() + navigate('/workspace-settings/billing-receipts') } return (subscriptionId && workspaces?.length && workspaces.length > 1) || error ? ( @@ -73,34 +76,47 @@ export default function ChooseWorkspacePage() { - We appreciate your decision to subscribe to our service through AWS Marketplace. - - - To enhance your experience, please select the workspace where you'd like to activate your subscription: + Please select the workspace where you would like to activate this subscription. {workspaces?.map((item) => ( - { - void selectWorkspace(item.id) + void handleSubmit(item.id) }} + disabled={isPending} + loading={item.id === selectedWorkspace?.id && isPending} + sx={{ p: 0 }} > - + transitions.create('opacity'), + }, + }} subheader={item.slug} - subheaderTypographyProps={item.id === selectedWorkspace?.id ? { color: alpha('#ffffff', 0.6) } : undefined} + subheaderTypographyProps={{ + sx: { + opacity: item.id === selectedWorkspace?.id && isPending ? 0 : 1, + transition: ({ transitions }) => transitions.create('opacity'), + }, + }} /> - + ))} - - Choose Workspace - + + + ) : ( diff --git a/src/shared/constants/endPoints.ts b/src/shared/constants/endPoints.ts index ea3c5025..cf0d5725 100644 --- a/src/shared/constants/endPoints.ts +++ b/src/shared/constants/endPoints.ts @@ -100,7 +100,7 @@ export const endPoints = { }, users: { list: `api/workspaces/${workspaceId}/users/`, - self: (userId: string) => `api/workspaces/${workspaceId}/users/${userId}`, + self: (userId: string) => `api/workspaces/${workspaceId}/users/${userId}/`, }, roles: { list: `api/workspaces/${workspaceId}/roles`, diff --git a/src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx b/src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx index 0063b454..4dac67bb 100644 --- a/src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx +++ b/src/shared/error-boundary-fallback/ErrorBoundaryFallback.tsx @@ -74,7 +74,7 @@ export const ErrorBoundaryFallback = ({ error, resetErrorBoundary }: FallbackPro onClick={() => { resetErrorBoundary() if (navigate) { - navigate('/') + navigate('/inventory') } }} > diff --git a/src/shared/link-button/LinkButton.tsx b/src/shared/link-button/LinkButton.tsx index 09e2042c..23365ea3 100644 --- a/src/shared/link-button/LinkButton.tsx +++ b/src/shared/link-button/LinkButton.tsx @@ -1,11 +1,11 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew' -import { LoadingButton } from '@mui/lab' -import { ButtonProps, ButtonTypeMap } from '@mui/material' +import { LoadingButton, LoadingButtonProps } from '@mui/lab' +import { ButtonTypeMap } from '@mui/material' import { ElementType, useState } from 'react' // eslint-disable-next-line @typescript-eslint/ban-types export function LinkButton( - props: ButtonProps, + props: LoadingButtonProps, ) { const [loading, setLoading] = useState(false) diff --git a/src/shared/types/server/requests/PutWorkspaceBilling.ts b/src/shared/types/server/requests/PutWorkspaceBilling.ts index d95d0d04..42c015b4 100644 --- a/src/shared/types/server/requests/PutWorkspaceBilling.ts +++ b/src/shared/types/server/requests/PutWorkspaceBilling.ts @@ -1,5 +1,6 @@ -import { ProductTier } from 'src/shared/types/server' +import { PaymentMethod, ProductTier } from 'src/shared/types/server' export interface PutWorkspaceBillingRequest { - product_tier: ProductTier + product_tier: ProductTier | null + workspace_payment_method: PaymentMethod | null } diff --git a/src/shared/types/server/shared/Payment.ts b/src/shared/types/server/shared/Payment.ts index 04f739a7..996b1274 100644 --- a/src/shared/types/server/shared/Payment.ts +++ b/src/shared/types/server/shared/Payment.ts @@ -1,5 +1,7 @@ export type PaymentMethods = 'aws_marketplace' | 'stripe' | 'none' -export type PaymentMethod = { method: Exclude; subscription_id: string } | { method: 'none' } +export type PaymentMethodWithoutNone = { method: Exclude; subscription_id: string } + +export type PaymentMethod = PaymentMethodWithoutNone | { method: 'none' } export type ProductTier = 'Free' | 'Trial' | 'Plus' | 'Business' | 'Enterprise' diff --git a/src/shared/types/server/shared/index.ts b/src/shared/types/server/shared/index.ts index 81ea12cf..5bb23f6e 100644 --- a/src/shared/types/server/shared/index.ts +++ b/src/shared/types/server/shared/index.ts @@ -1,2 +1,2 @@ export type { NotificationChannel } from './NotificationChannel' -export type { PaymentMethod, PaymentMethods, ProductTier } from './Payment' +export type { PaymentMethod, PaymentMethodWithoutNone, PaymentMethods, ProductTier } from './Payment'