Merge pull request #21728 from overleaf/as-checkout-currency-switcher

Add Bootstrap 5 Redesign variant of currency selector

GitOrigin-RevId: f0f4176f7d51835a7e15324be7cfcaab0af5bf36

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,
   }
 

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);
+}