site-kit-wp
site-kit-wp copied to clipboard
Improve already subscribed state in frequency selector component
Feature Description
Update the frequency selector component to make it clear that you are already subscribed (Figma)
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
- When the user is subscribed and a saved email reporting frequency exists, above frequency cards a “Current subscription” pill is shown matching the Figma design
- The prior checkmark indicator on the card is removed.
- The selected card remains visually selected (existing selected background state stays) and the new pill replaces the checkmark as the only saved indicator.
- If the user is not subscribed or no saved frequency is present, no “Current subscription” pill is shown.
Implementation Brief
- [ ] Update
assets/js/components/email-reporting/FrequencySelector.js:- Remove the tick/checkmark saved indicator logic.
- Render a new badge element (e.g.,
div.googlesitekit-frequency-selector__current-subscription) whensavedFrequencyhas value, placed near the top of the cards wrapper; keep existing selected styling for the card. But remove the current checkmark from individual card when saved.
- [ ] Update styles in
assets/sass/components/email-reporting/_googlesitekit-frequency-selector.scss:- Add styling for
.googlesitekit-frequency-selector__current-subscriptionas a small pill matching the Figma - Remove styles for the old
.googlesitekit-frequency-selector__saved-indicatorsince the checkmark is gone.
- Add styling for
- [ ] Ensure the new badge is only rendered when user is subscribed.
Test Coverage
- Update
assets/js/components/email-reporting/FrequencySelector.test.jssnapshots and expectations:- Replace
saved-indicatorassertions with checks for.googlesitekit-frequency-selector__current-subscriptionwhen subscribed. - Ensure no badge renders when not subscribed
- Replace