Skip to content

Fix choice cards when same product listed twice #13984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Conversation

tomrf1
Copy link
Member

@tomrf1 tomrf1 commented May 21, 2025

It's technically possible for the epic/banner choice cards to have the same product listed more than once, for different rate plans. If this happens, the component does not distinguish between them and the input ids are the same. This is an issue because:

  1. both choices are displayed as selected
  2. clicking the label doesn't work correctly because the ids are the same

This PR fixes the product comparison logic, and adds the rate plan to the input ids.

Before:
Screenshot 2025-05-21 at 11 52 32

Screenshot 2025-05-21 at 11 51 45

After:
Screenshot 2025-05-21 at 12 04 16
Screenshot 2025-05-21 at 11 52 02

Copy link

github-actions bot commented May 21, 2025

Copy link

github-actions bot commented May 21, 2025

Size Change: +83 B (+0.01%)

Total Size: 1.04 MB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1032.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/1127.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/117.client.web.********************.js 2.88 kB 0 B
dotcom-rendering/dist/1346.client.web.********************.js 3.13 kB 0 B
dotcom-rendering/dist/1388.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/1656.client.web.********************.js 49.5 kB 0 B
dotcom-rendering/dist/1677.client.web.********************.js 3.28 kB 0 B
dotcom-rendering/dist/2045.client.web.********************.js 2.63 kB 0 B
dotcom-rendering/dist/2161.client.web.********************.js 3.9 kB 0 B
dotcom-rendering/dist/2201.client.web.********************.js 2.68 kB 0 B
dotcom-rendering/dist/223.client.web.********************.js 527 B 0 B
dotcom-rendering/dist/2270.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/2309.client.web.********************.js 3.27 kB 0 B
dotcom-rendering/dist/2360.client.web.********************.js 19.8 kB 0 B
dotcom-rendering/dist/2456.client.web.********************.js 16.5 kB 0 B
dotcom-rendering/dist/2823.client.web.********************.js 20.5 kB 0 B
dotcom-rendering/dist/3292.client.web.********************.js 2.11 kB 0 B
dotcom-rendering/dist/3374.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/3384.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/3485.client.web.********************.js 4.67 kB 0 B
dotcom-rendering/dist/3598.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/3605.client.web.********************.js 15.1 kB 0 B
dotcom-rendering/dist/3619.client.web.********************.js 4.46 kB 0 B
dotcom-rendering/dist/3747.client.web.********************.js 3.68 kB 0 B
dotcom-rendering/dist/3929.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/4063.client.web.********************.js 5.51 kB +38 B (+0.69%)
dotcom-rendering/dist/4258.client.web.********************.js 4.08 kB 0 B
dotcom-rendering/dist/4306.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/4308.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/4324.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/4399.client.web.********************.js 2.77 kB 0 B
dotcom-rendering/dist/4457.client.web.********************.js 6.23 kB 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4533.client.web.********************.js 3.1 kB 0 B
dotcom-rendering/dist/466.client.web.********************.js 7.94 kB 0 B
dotcom-rendering/dist/472.client.web.********************.js 3.11 kB 0 B
dotcom-rendering/dist/4992.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/5118.client.web.********************.js 5.82 kB 0 B
dotcom-rendering/dist/5144.client.web.********************.js 2.55 kB 0 B
dotcom-rendering/dist/5448.client.web.********************.js 4.37 kB 0 B
dotcom-rendering/dist/545.client.web.********************.js 531 B 0 B
dotcom-rendering/dist/5471.client.web.********************.js 5.41 kB 0 B
dotcom-rendering/dist/562.client.web.********************.js 11.8 kB 0 B
dotcom-rendering/dist/5715.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/6038.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/6217.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/6262.client.web.********************.js 11.8 kB 0 B
dotcom-rendering/dist/6501.client.web.********************.js 65.6 kB 0 B
dotcom-rendering/dist/6555.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/6562.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/6722.client.web.********************.js 3.05 kB 0 B
dotcom-rendering/dist/6750.client.web.********************.js 10.6 kB +44 B (+0.42%)
dotcom-rendering/dist/6873.client.web.********************.js 4.13 kB 0 B
dotcom-rendering/dist/695.client.web.********************.js 4.51 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23.2 kB 0 B
dotcom-rendering/dist/732.client.web.********************.js 3.09 kB 0 B
dotcom-rendering/dist/7395.client.web.********************.js 2.62 kB 0 B
dotcom-rendering/dist/7398.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/7708.client.web.********************.js 5.05 kB 0 B
dotcom-rendering/dist/7927.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/8151.client.web.********************.js 4.17 kB 0 B
dotcom-rendering/dist/8212.client.web.********************.js 5.04 kB 0 B
dotcom-rendering/dist/8385.client.web.********************.js 3.88 kB 0 B
dotcom-rendering/dist/8436.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/8602.client.web.********************.js 3.39 kB 0 B
dotcom-rendering/dist/8619.client.web.********************.js 4.44 kB 0 B
dotcom-rendering/dist/864.client.web.********************.js 3.17 kB 0 B
dotcom-rendering/dist/8942.client.web.********************.js 4.43 kB 0 B
dotcom-rendering/dist/9135.client.web.********************.js 3.54 kB 0 B
dotcom-rendering/dist/9376.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/967.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/9822.client.web.********************.js 7.68 kB 0 B
dotcom-rendering/dist/9870.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 8.42 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 4.76 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 425 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.61 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 2.66 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.6 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 2.76 kB 0 B
dotcom-rendering/dist/AudioPlayerWrapper-importable.client.web.********************.js 6.61 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.61 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 2.89 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 67.7 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.69 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.73 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 5.77 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.67 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.57 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 539 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 2.3 kB 0 B
dotcom-rendering/dist/CrosswordComponent-importable.client.web.********************.js 2.87 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.07 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 2.41 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 3.46 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.72 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 4.45 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 3.98 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 1.94 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/FootballMatchesPageWrapper-importable.client.web.********************.js 7.31 kB 0 B
dotcom-rendering/dist/FootballTablesCompetitionSelect-importable.client.web.********************.js 3.26 kB 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 364 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.44 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 7.49 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 8.12 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.58 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 15.7 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 10.2 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 782 B 0 B
dotcom-rendering/dist/index.client.web.********************.js 46.3 kB +1 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 2.9 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 854 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 8.83 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.19 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 7.84 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 435 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.58 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/LiveblogGutterAskWrapper-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 4.84 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/LoopVideo-importable.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.67 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 6.04 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.7 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 3.85 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 5.98 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 5.24 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.32 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.35 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 545 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 805 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 751 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 470 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.69 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.56 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 6.14 kB 0 B
dotcom-rendering/dist/ScrollableFeature-importable.client.web.********************.js 6.6 kB 0 B
dotcom-rendering/dist/ScrollableHighlights-importable.client.web.********************.js 7.16 kB 0 B
dotcom-rendering/dist/ScrollableMedium-importable.client.web.********************.js 2.1 kB 0 B
dotcom-rendering/dist/ScrollableSmall-importable.client.web.********************.js 2.17 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 4.21 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.22 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 802 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.91 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 486 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 2.18 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 899 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 919 B 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 1.11 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 2.6 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 5 kB 0 B
dotcom-rendering/dist/SlideshowCarousel-importable.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.8 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 6.14 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.66 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 13.6 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.84 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 6.06 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.33 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 843 B 0 B

compressed-size-action

@tomrf1 tomrf1 added the run_chromatic Runs chromatic when label is applied label May 21, 2025
@tomrf1 tomrf1 changed the title Add ratePlan to choice cards ids Fix choice cards when same product listed twice May 21, 2025
@tomrf1 tomrf1 marked this pull request as ready for review May 21, 2025 11:09
@tomrf1 tomrf1 requested a review from a team as a code owner May 21, 2025 11:09
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 21, 2025
Copy link

github-actions bot commented May 21, 2025

@@ -163,10 +163,14 @@ export const ThreeTierChoiceCards = ({
({ product, label, benefitsLabel, benefits, pill }) => {
const { supportTier } = product;

const selected =
selectedProduct.supportTier === supportTier;
const selected = selectedProduct === product;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this means we compare both the supportTier and ratePlan

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

though I've realised this doesn't always work as it's comparing object references! Fix incoming

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fix: 1946406

@tomrf1 tomrf1 added the run_chromatic Runs chromatic when label is applied label May 21, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 21, 2025
@tomrf1 tomrf1 added the run_chromatic Runs chromatic when label is applied label May 21, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 21, 2025
@tomrf1 tomrf1 added the run_chromatic Runs chromatic when label is applied label May 22, 2025
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label May 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants