From e588b0748af9b931face8435cf0d2b19d0d47380 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 14 Nov 2024 09:20:31 -0700
Subject: [PATCH] Merge pull request #21728 from
 overleaf/as-checkout-currency-switcher

Add Bootstrap 5 Redesign variant of currency selector

GitOrigin-RevId: f0f4176f7d51835a7e15324be7cfcaab0af5bf36
---
 .../components/ol/ol-dropdown-menu-item.tsx   |  1 +
 .../bootstrap-5/pages/subscription.scss       | 36 +++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/services/web/frontend/js/features/ui/components/ol/ol-dropdown-menu-item.tsx b/services/web/frontend/js/features/ui/components/ol/ol-dropdown-menu-item.tsx
index 3b68faf57e..84550542e6 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-dropdown-menu-item.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-dropdown-menu-item.tsx
@@ -23,6 +23,7 @@ function OLDropdownMenuItem(props: OLDropdownMenuItemProps) {
     onClick: rest.onClick,
     href: rest.href,
     download: rest.download,
+    eventKey: rest.eventKey,
     ...bs3Props,
   }
 
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
index 6c96903b68..1bf57a33eb 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/subscription.scss
@@ -251,3 +251,39 @@
     --bs-btn-bg: transparent;
   }
 }
+
+.change-currency {
+  .dropdown-item:not(:first-child) {
+    margin-top: var(--spacing-02);
+  }
+}
+
+.change-currency-toggle {
+  padding-left: 0;
+  text-decoration: underline;
+  color: var(--content-secondary);
+
+  &:hover,
+  &:focus,
+  &:active {
+    // !important is unfortunately necessary to override btn:first-child:active
+    color: var(--content-secondary) !important;
+  }
+
+  &:not(:hover) {
+    text-decoration: underline;
+  }
+
+  // Hide the dropdown caret, BS5 react-bootstrap does not have a prop for this
+  &::after {
+    display: none;
+  }
+
+  @include body-xs;
+}
+
+.change-currency-dropdown-selected-icon {
+  position: absolute;
+  right: 10px;
+  top: var(--bs-dropdown-item-padding-y);
+}