feat(account): add purchase quota and join activity options in account localization (#630)

feat(apiErrors): add activity-related strings for quota management in localization
refactor(ErrorCodeManager): simplify error handling for insufficient quota and star required

Co-authored-by: xjm <[email protected]>

Author: xiaojingming

src/core/costrict/error-code/ErrorCodeManager.ts

@@ -182,26 +182,10 @@ export class ErrorCodeManager {
 				message = defaultError["401"].message
 				solution = defaultError["401"].solution
 				error.status = status = 401
-			} else if (code === "ai-gateway.insufficient_quota" || code === "ai-gateway.star_required") {
-				const hash = await this.hashToken(apiConfiguration.zgsmAccessToken || "")
-				const baseurl = apiConfiguration.zgsmBaseUrl || ZgsmAuthConfig.getInstance().getDefaultLoginBaseUrl()
-				const isQuota = code === "ai-gateway.insufficient_quota"
-
-				const solution1 = isQuota
-					? t("apiErrors:solution.ai-gateway.insufficientCredits")
-					: t("apiErrors:solution.ai-gateway.pleaseStarProject")
-				const solution2 = isQuota
-					? t("apiErrors:solution.ai-gateway.quotaAcquisition")
-					: t("apiErrors:solution.ai-gateway.howToStar")
-
-				const checkRemainingQuotaStr = !isQuota
-					? `${t("apiErrors:solution.quota-check.checkRemainingQuota")} “ <a href='${baseurl}/credit/manager/credits?state=${hash}' style="font-size: 12px;color:#0078d4;text-decoration: none;">${t("apiErrors:solution.quota-check.creditUsageStats")}</a> ” ${t("apiErrors:solution.quota-check.viewDetails")}`
-					: ""
-
-				solution = `
-<span style="color:#E64545;font-size: 12px;">${solution1}</span> <a href='${baseurl}/credit/manager/md-preview?state=${hash}' style="font-size: 12px;color:#0078d4;text-decoration: none;">${solution2}</a>
-${checkRemainingQuotaStr}
-`
+			} else if (code === "ai-gateway.insufficient_quota") {
+				solution = await this.handleInsufficientQuotaError(apiConfiguration)
+			} else if (code === "ai-gateway.star_required") {
+				solution = await this.handleStarRequiredError(apiConfiguration)
 			}
 			TelemetryService.instance.captureError(`ApiError_${code}`)
 			this.provider.log(`[CoStrict#apiErrors] task ${taskId}.${instanceId} Raw Error: ${rawError}`)
@@ -218,6 +202,47 @@ ${checkRemainingQuotaStr}
 		this.provider.log(`[CoStrict#apiErrors] task ${taskId}.${instanceId} Raw Error: ${rawError}`)
 		return `${t("apiErrors:request.error_details")}\n\n${message}\n\n${requestId ? `RequestID: ${requestId}\n\n` : ""}${t("apiErrors:request.solution")}\n${solution}`
 	}
+
+	/**
+	 * Handling insufficient quota errors
+	 * @param apiConfiguration api config
+	 * @returns string
+	 */
+	private async handleInsufficientQuotaError(apiConfiguration: any): Promise<string> {
+		const hash = await this.hashToken(apiConfiguration.zgsmAccessToken || "")
+		const baseurl = apiConfiguration.zgsmBaseUrl || ZgsmAuthConfig.getInstance().getDefaultLoginBaseUrl()
+
+		const solution1 = t("apiErrors:solution.ai-gateway.insufficientCredits")
+		const solution2 = t("apiErrors:solution.ai-gateway.quotaAcquisition")
+
+		const activitiesStr = `${t("apiErrors:solution.activitiesStr.participate")}<a href='${baseurl}/credit/manager/?state=${hash}&tab=activity' style="font-size: 12px;color:#0078d4;text-decoration: none;">${t("apiErrors:solution.activitiesStr.operationalActivities")}</a> ${t("apiErrors:solution.activitiesStr.or")} <a href='${baseurl}/credit/manager/?state=${hash}&tab=subscription' style="font-size: 12px;color:#0078d4;text-decoration: none;">${t("apiErrors:solution.activitiesStr.purchaseQuota")}</a> ${t("apiErrors:solution.activitiesStr.getCreditLimit")}`
+
+		return `
+<span style="color:#E64545;font-size: 12px;">${solution1}</span> <a href='${baseurl}/credit/manager/md-preview' style="font-size: 12px;color:#0078d4;text-decoration: none;">${solution2}</a>
+\n${activitiesStr}
+`
+	}
+
+	/**
+	 * Handling errors that require starring
+	 * @param apiConfiguration api config
+	 * @returns string
+	 */
+	private async handleStarRequiredError(apiConfiguration: any): Promise<string> {
+		const hash = await this.hashToken(apiConfiguration.zgsmAccessToken || "")
+		const baseurl = apiConfiguration.zgsmBaseUrl || ZgsmAuthConfig.getInstance().getDefaultLoginBaseUrl()
+
+		const solution1 = t("apiErrors:solution.ai-gateway.pleaseStarProject")
+		const solution2 = t("apiErrors:solution.ai-gateway.howToStar")
+
+		const checkRemainingQuotaStr = `${t("apiErrors:solution.quota-check.checkRemainingQuota")} " <a href='${baseurl}/credit/manager/?state=${hash}&tab=usage' style="font-size: 12px;color:#0078d4;text-decoration: none;">${t("apiErrors:solution.quota-check.creditUsageStats")}</a> " ${t("apiErrors:solution.quota-check.viewDetails")}`
+
+		return `
+<span style="color:#E64545;font-size: 12px;">${solution1}</span> <a href='${baseurl}/credit/manager/md-preview' style="font-size: 12px;color:#0078d4;text-decoration: none;">${solution2}</a>
+\n${checkRemainingQuotaStr}
+`
+	}
+
 	private async hashToken(token: string) {
 		const encoder = new TextEncoder()
 		const data = encoder.encode(token)

src/i18n/costrict-i18n/locales/en/apiErrors.json

@@ -37,6 +37,13 @@
 			"creditUsageStats": "Credit usage statistics",
 			"viewDetails": "View details"
 		},
+		"activitiesStr": {
+			"participate": "You can participate ",
+			"operationalActivities": "Operational activities",
+			"or": "or",
+			"purchaseQuota": "Purchase quota",
+			"getCreditLimit": "Get credit limit"
+		},
 		"undefined": "1. Check your network connection\n2. Check your proxy/firewall\n3. Contact the administrator",
 		"unknown": "1. Please try again later\n2. Try switching models\n3. Contact the administrator"
 	},

src/i18n/costrict-i18n/locales/zh-CN/apiErrors.json

@@ -111,7 +111,6 @@ const QuotaInfoDisplay = memo(
 		quotaInfo,
 		showQuotaInfo,
 		t,
-		handleGetMoreQuota,
 	}: {
 		quotaInfo: QuotaInfo
 		showQuotaInfo: boolean
@@ -219,11 +218,6 @@ const QuotaInfoDisplay = memo(
 							<span className="text-xs text-vscode-descriptionForeground font-medium">
 								{t("cloud:quota.usedQuota")}
 							</span>
-							<span
-								className="text-[10px] font-medium bg-gradient-to-br from-blue-400 to-blue-600 px-1 py-0.5 rounded-full cursor-pointer select-none text-white flex items-center gap-1"
-								onClick={handleGetMoreQuota}>
-								{t("cloud:quota.getMoreQuota")} 🎁
-							</span>
 						</div>
 						<div className="flex items-baseline gap-1">
 							<span className="text-sm font-bold text-vscode-foreground group-hover:text-vscode-focusBorder transition-colors">
@@ -268,7 +262,7 @@ const ZgsmAccountViewComponent = ({ apiConfiguration, onDone }: AccountViewProps
 	const handleVisitCloudWebsite = useCallback(() => {
 		// Send telemetry for cloud website visit
 		telemetryClient.capture(TelemetryEventName.ACCOUNT_CONNECT_CLICKED)
-		const cloudUrl = `${apiConfiguration?.zgsmBaseUrl?.trim() || "https://zgsm.sangfor.com"}/credit/manager?state=${hash}`
+		const cloudUrl = `${apiConfiguration?.zgsmBaseUrl?.trim() || "https://zgsm.sangfor.com"}/credit/manager?state=${hash}&tab=usage`
 		vscode.postMessage({ type: "openExternal", url: cloudUrl })
 	}, [apiConfiguration?.zgsmBaseUrl, hash])
 
@@ -282,6 +276,11 @@ const ZgsmAccountViewComponent = ({ apiConfiguration, onDone }: AccountViewProps
 		vscode.postMessage({ type: "openExternal", url: "https://github.com/zgsm-ai/costrict" })
 	}, [])
 
+	const handlePurchaseQuota = useCallback(() => {
+		const cloudUrl = `${apiConfiguration?.zgsmBaseUrl?.trim() || "https://zgsm.sangfor.com"}/credit/manager?state=${hash}&tab=subscription`
+		vscode.postMessage({ type: "openExternal", url: cloudUrl })
+	}, [apiConfiguration?.zgsmBaseUrl, hash])
+
 	const onMessage = useCallback(
 		(event: MessageEvent) => {
 			const message: ExtensionMessage = event.data
@@ -409,6 +408,18 @@ const ZgsmAccountViewComponent = ({ apiConfiguration, onDone }: AccountViewProps
 									</StandardTooltip>
 								</h2>
 							)}
+							<div className="w-full flex gap-2 mt-4 justify-center">
+								<span
+									className="text-[10px] font-medium bg-gradient-to-br border border-[var(--vscode-editorWidget-border)] bg-[var(--vscode-editorWidget-background)] text-[var(--vscode-editor-foreground)] px-2 py-1 rounded-full cursor-pointer select-none flex items-center gap-1"
+									onClick={handlePurchaseQuota}>
+									{t("account:purchaseQuota")}
+								</span>
+								<span
+									className="text-[10px] font-medium bg-gradient-to-br border border-[var(--vscode-editorWidget-border)] bg-[var(--vscode-editorWidget-background)] text-[var(--vscode-editor-foreground)] px-2 py-1 rounded-full cursor-pointer select-none flex items-center gap-1"
+									onClick={handleGetMoreQuota}>
+									{t("account:joinActivityForQuota")}
+								</span>
+							</div>
 							{/* Star status card */}
 							{quotaInfo?.is_star != null && (
 								<StarStatusCard quotaInfo={quotaInfo} onStarRepository={handleStarRepository} _t={t} />

src/i18n/costrict-i18n/locales/zh-TW/apiErrors.json

@@ -11,5 +11,7 @@
 	"starThanksDesc": "You have starred the CoStrict repository",
 	"starProject": "Support CoStrict Project",
 	"starProjectDesc": "Star our open source project to show support",
-	"starButton": "Star Now"
+	"starButton": "Star Now",
+	"purchaseQuota": "💰 Purchase more quotas",
+	"joinActivityForQuota": "🎁 Obtain quotas"
 }