web: show subscription provider info in subscription settings

apps/web/src/dialogs/settings/components/subscription-status.tsx

@@ -32,13 +32,6 @@ import { BuyDialog } from "../../buy-dialog";
 import { strings } from "@notesnook/intl";
 import { PromptDialog } from "../../prompt";
 
-const PROVIDER_MAP = {
-  0: "Streetwriters",
-  1: "iOS",
-  2: "Android",
-  3: "Web",
-  4: "Gift card"
-} as const;
 export function SubscriptionStatus() {
   const user = useUserStore((store) => store.user);
 
@@ -46,7 +39,8 @@ export function SubscriptionStatus() {
     await db.user.activateTrial();
   });
 
-  const provider = PROVIDER_MAP[user?.subscription?.provider || 0];
+  const provider =
+    strings.subscriptionProviderInfo[user?.subscription?.provider || 0];
   const {
     isTrial,
     isBeta,
@@ -74,7 +68,7 @@ export function SubscriptionStatus() {
     const expiryDate = dayjs(user?.subscription?.expiry).format("MMMM D, YYYY");
     const startDate = dayjs(user?.subscription?.start).format("MMMM D, YYYY");
     return isPro
-      ? provider === "Streetwriters" || provider === "Gift card"
+      ? provider.type === "Streetwriters" || provider.type === "Gift card"
         ? `Ending on ${expiryDate}`
         : `Next payment on ${expiryDate}.`
       : isProCancelled
@@ -134,10 +128,10 @@ export function SubscriptionStatus() {
             : "Access only to basic features including unlimited notes & end-to-end encrypted syncing to unlimited devices."}
         </Text>
         <Text sx={{ mt: 2 }} variant="subBody">
-          {subtitle}
+          {subtitle}. {provider.desc()}
         </Text>
         <Flex sx={{ gap: 1, mt: 2 }}>
-          {provider === "Web" && (isPro || isProCancelled) ? (
+          {provider.type === "Web" && (isPro || isProCancelled) ? (
             <>
               {isPro && (
                 <Button