refactor: update billing components for improved UX and localization

- Refactored BillingTopupDialog.vue to use localized strings for titles, subtitles, and labels.
- Modified PaymentHistory.tsx to use conditional rendering for item details.
- Enhanced PlanSelection.tsx with better prop handling and improved UI responsiveness.
- Removed UpgradeDialog.vue and replaced it with a new UpgradePlan.tsx component for better structure and functionality.
- Added logic to handle payment methods and top-up amounts in UpgradePlan.tsx.
- Improved overall code readability and maintainability across billing components.

src/routes/settings/Billing/components/PaymentHistory.tsx

@@ -171,9 +171,13 @@ const PaymentHistory = defineComponent({
                             </div>
                             <div class="col-span-3">
                                 <p class="text-sm text-foreground">{item.plan}</p>
-                                <p v-if="item.details?.length" class="mt-1 text-xs text-foreground/60">
-                                    {item.details.join(' · ')}
-                                </p>
+                                {
+                                    item.details?.length ? (
+                                        <p class="mt-1 text-xs text-foreground/60">
+                                            {item.details.join(' · ')}
+                                        </p>
+                                    ) : null
+                                }
                             </div>
                             <div class="col-span-2">
                                 <span class={`inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium ${getStatusStyles(item.status)}`}>