feat: texts and layout

src/locales/en/translation.json

@@ -283,16 +283,18 @@
     "show_hidden_achievement_description": "Show hidden achievements description before unlocking them",
     "account": "Account",
     "no_users_blocked": "You have no blocked users",
-    "subscription": "Hydra Cloud subscription",
+    "subscription_active_until": "Enjoy your Hydra Cloud until {{date}}",
-    "subscription_active_until": "Your Hydra Cloud is active until {{date}}",
     "subscription_not_active": "You don't have an active Hydra Cloud subscription",
-    "manage_account": "Manage account",
     "manage_subscription": "Manage subscription",
     "update_email": "Update email",
     "update_password": "Update password",
     "current_email": "Current email:",
     "no_email_account": "You have not set an email yet",
-    "account_data_updated_successfully": "Account data updated successfully"
+    "account_data_updated_successfully": "Account data updated successfully",
+    "renew_subscription": "Renew Hydra Cloud",
+    "subscription_expired_at": "Your subscription expired at {{date}}",
+    "no_subscription": "Enjoy Hydra in the best possible way",
+    "become_subscriber": "Be Hydra Cloud"
   },
   "notifications": {
     "download_complete": "Download complete",

src/locales/pt-BR/translation.json

@@ -271,16 +271,18 @@
     "show_hidden_achievement_description": "Mostrar descrição de conquistas ocultas antes de debloqueá-las",
     "account": "Conta",
     "no_users_blocked": "Você não bloqueou nenhum usuário",
-    "subscription": "Assinatura Hydra Cloud",
+    "subscription_active_until": "Aproveite seu Hydra Cloud até {{date}}",
-    "subscription_active_until": "Seu Hydra Cloud ficará ativo até {{date}}",
     "subscription_not_active": "Você não possui uma assinatura Hydra Cloud ativa",
-    "manage_account": "Gerenciar conta",
     "manage_subscription": "Gerenciar assinatura",
     "update_email": "Atualizar email",
     "update_password": "Atualizar senha",
     "current_email": "Email atual:",
     "no_email_account": "Você ainda não adicionou um email a sua conta",
-    "account_data_updated_successfully": "Dados da conta atualizados com sucesso"
+    "account_data_updated_successfully": "Dados da conta atualizados com sucesso",
+    "renew_subscription": "Renovar Hydra Cloud",
+    "subscription_expired_at": "Sua assinatura expirou em {{date}}",
+    "no_subscription": "Aproveite o Hydra ao seu máximo",
+    "become_subscriber": "Seja Hydra Cloud"
   },
   "notifications": {
     "download_complete": "Download concluído",

src/renderer/src/pages/settings/settings-account.tsx

@@ -39,6 +39,7 @@ export function SettingsAccount() {
 
   const {
     userDetails,
+    hasActiveSubscription,
     patchUser,
     fetchUserDetails,
     updateUserDetails,
@@ -93,6 +94,35 @@ export function SettingsAccount() {
     [unblockUser, fetchBlockedUsers, t, showSuccessToast]
   );
 
+  const getHydraCloudSectionContent = () => {
+    const hasSubscribedBefore = Boolean(userDetails?.subscription?.expiresAt);
+
+    if (!hasSubscribedBefore) {
+      return {
+        description: t("no_subscription"),
+        callToAction: t("become_subscriber"),
+      };
+    }
+
+    if (hasActiveSubscription) {
+      return {
+        description: t("subscription_active_until", {
+          date: formatDate(userDetails!.subscription!.expiresAt!),
+        }),
+        callToAction: t("manage_subscription"),
+      };
+    }
+
+    return {
+      description: t("subscription_expired_at", {
+        date: formatDate(userDetails!.subscription!.expiresAt!),
+      }),
+      callToAction: t("renew_subscription"),
+    };
+  };
+
+  if (!userDetails) return null;
+
   return (
     <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
       <Controller
@@ -126,18 +156,10 @@ export function SettingsAccount() {
         }}
       />
 
-      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
+      <div style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
-        {t("manage_account")}
+        <h4>{t("current_email")}</h4>
-      </h3>
+        <p>{userDetails?.email ?? t("no_email_account")}</p>
-
+      </div>
-      {userDetails?.email ? (
-        <div>
-          <h4>{t("current_email")}</h4>
-          <p>{userDetails.email}</p>
-        </div>
-      ) : (
-        <p>{t("no_email_account")}</p>
-      )}
 
       <div
         style={{
@@ -167,34 +189,20 @@ export function SettingsAccount() {
         </Button>
       </div>
 
-      <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
+      <div>
-        {t("subscription")}
+        <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>Hydra Cloud</h3>
-      </h3>
+        <small>{getHydraCloudSectionContent().description}</small>
-      {userDetails?.subscription?.expiresAt ? (
-        <p>
-          {t("subscription_active_until", {
-            date: formatDate(userDetails.subscription.expiresAt),
-          })}
-        </p>
-      ) : (
-        <p>{t("subscription_not_active")}</p>
-      )}
-
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "start",
-          alignItems: "center",
-          gap: `${SPACING_UNIT}px`,
-          marginTop: 8,
-        }}
-      >
-        <Button theme="outline" onClick={() => window.electron.openCheckout()}>
-          {t("manage_subscription")}
-          <CloudIcon />
-        </Button>
       </div>
 
+      <Button
+        style={{ placeSelf: "flex-start", marginTop: 8 }}
+        theme="outline"
+        onClick={() => window.electron.openCheckout()}
+      >
+        {getHydraCloudSectionContent().callToAction}
+        <CloudIcon />
+      </Button>
+
       <h3 style={{ marginTop: `${SPACING_UNIT * 2}px` }}>
         {t("blocked_users")}
       </h3>