[backport cloud/1.36] Feat(cloud)/new top up dialog (#7932)

Backport of #7899 to `cloud/1.36`

## Summary
- Implement the new add credits (top up) dialog
- Refactor the subscription dialog to make different credit types easier
to understand

## Conflicts Resolved
- `src/components/dialog/content/TopUpCreditsDialogContent.vue` - Took
PR version (new UI)
- `src/locales/en/main.json` - Added missing `usdAmount` translation key

Automatically created by manual backport process.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7932-backport-cloud-1-36-Feat-cloud-new-top-up-dialog-2e36d73d3650812dba2cd7edcb43259b)
by [Unito](https://www.unito.io)

tests-ui/tests/platform/cloud/subscription/components/SubscriptionPanel.test.ts

@@ -33,6 +33,9 @@ const mockSubscriptionData = {
     const baseName = TIER_TO_NAME[mockSubscriptionTier.value]
     return mockIsYearlySubscription.value ? `${baseName} Yearly` : baseName
   }),
+  subscriptionStatus: computed(() => ({
+    renewal_date: '2024-12-31T00:00:00Z'
+  })),
   isYearlySubscription: computed(() => mockIsYearlySubscription.value),
   handleInvoiceHistory: vi.fn()
 }