Add Billing Cycle Toggle to Checkout Page for Improved Plan Selection UX

[Ashad001]

This PR improves the checkout experience by allowing users to toggle between monthly and yearly billing cycles directly on the checkout page. It removes the need to return to the pricing page to switch plans and provides clear, real-time feedback on pricing and savings.

---

🔧 Key Features

• 📅 Billing Cycle Toggle
  Users can switch between monthly and yearly plans during checkout.

• 💸 Real-Time Pricing Updates
  Updates setup intent and pricing dynamically on toggle.

• 💰 Savings Visualization
  Displays yearly discount breakdown and monthly equivalent pricing.

• 🎨 Enhanced UX
  Loading indicators and disabled states during plan updates for smooth interaction.

---

👨‍💻 Technical Summary

• Added billingCycle state to manage toggle logic.
• Updated checkout flow to dynamically fetch correct price IDs and recalculate totals.
• Improved Order Summary to reflect accurate totals, discounts, and billing info.
• Cleaned up props in CheckoutForm and removed unnecessary bindings.

---

✅ Result

• Users can now easily compare and switch between billing cycles at checkout.
• Promotes transparency and trust through clear pricing breakdowns.
• Encourages yearly plan adoption by highlighting savings.