Skip to content

fix: Add warning message when Paypal is selected

stephen requested to merge frontend-tickets--paypal-message into main

As per #38 (closed), there should be a warning message displayed when Paypal is selected as the payment method. This escaped my notice when planning out the various site components - this commit adds it and styles it appropriately.

To accomplish this, we add a file and make a few updates:

  • The SASS partial components/_alerts.scss has been added, and a custom definition for .alert-primary written which redefines relevant stock Bootstrap variables to match our designs
  • The definition of utility class .hidden was extended. By default, it does not use the !important rule, but because, for some reason, the flexbox utility class .d-flex does use !important, it simply doesn't work on any element with .d-flex. Therefore, we extend .hidden to contain a carve-out exception wherein, if it is used on an element which also has .d-flex, it also uses !important, and because .d-flex.hidden contains more specificity than .d-flex, the display: none rule cascades over display: flex.
  • The .sectionToggle Paypal button had its data-toggles attribute changed from #checkout_paypal to .checkout_paypal, and the element #checkout_paypal was additionally given the class .checkout_paypal. This allows us to also give the Paypal warning element the class .checkout_paypal, such that the Javascript powering section toggling will show and hide the Paypal warning along with the Paypal payment button block.

Closes: #38 (closed)

Edited by stephen

Merge request reports