PAYMENTS-1160: Ensure Apple Pay button is hidden for incompatible browsers.

[PascalZajac]

What?

Remove an unnecessary display: block rule that was causing the Apple Pay button to appear in the Cart Modal even for browsers that do not support Apple Pay.

Why?

Shopper confusion. The rule in question is ignoring the apple-pay-supported class that gets attached to the body element, forcing the button to appear in all browsers. My first solution was to fix this by changing the nesting of the rules to respect this class, but then I realised that the display: block rule itself is unnecessary, because it will be inherited from the rule defined on L33.

Screenshots (if appropriate)

Since I can't enable Apple Pay for local development, I have screenshots showing the HTML structure in Chrome and Safari respectively to prove that this should work.

Ping @bigcommerce/stencil-team @bigcommerce/payments

[poweredbyanna]

Seems legit but you've made Travis unhappy

[davidchin]

It seems you have to apply // scss-lint:disable SelectorDepth, NestingDepth (unless you want to refactor the CSS, but I guess it's a bit difficult for you because you are not able to turn on Apple Pay locally so I'm happy for you to just fix the bug 😄)

[poweredbyanna]

@philipmuir may be able to help you test it locally if you need (and then you can both teach us!)

[PascalZajac]

Thanks to Travis' prompting, I decided to take a different approach to this, and instead remove the display: block rule from the previewCartCheckout ruleset, which means display will just be inherited from the rule defined above. I updated the PR description accordingly.

Dismissing due to changed implementation.

[junedkazi]

@PascalZajac can you add a changelog entry before you merge this one.

[PascalZajac]

Sure thing, under the Draft heading right?

[junedkazi]

Yes it should be in the draft section.

[davidchin]

Nice, thanks @PascalZajac for making the change, LGTM!