diff --git a/assets/js/components/email-reporting/FrequencySelector.js b/assets/js/components/email-reporting/FrequencySelector.js index a9874b153ef..71e59523173 100644 --- a/assets/js/components/email-reporting/FrequencySelector.js +++ b/assets/js/components/email-reporting/FrequencySelector.js @@ -39,7 +39,7 @@ import { } from '@/js/googlesitekit/datastore/user/constants'; import { Fragment } from 'react'; import Typography from '@/js/components/Typography'; -import Tick from '@/svg/icons/tick.svg'; +import P from '@/js/components/Typography/P'; export default function FrequencySelector( { isUserSubscribed } ) { const DAY_NAMES = useMemo( @@ -118,6 +118,12 @@ export default function FrequencySelector( { isUserSubscribed } ) { } } + // Determine which column the saved frequency is in (0, 1, or 2). + const savedFrequencyIndex = + EMAIL_REPORT_FREQUENCIES.indexOf( savedFrequency ); + const showCurrentSubscription = + isUserSubscribed && savedFrequencyIndex !== -1; + return ( { __( 'Frequency', 'google-site-kit' ) } + { showCurrentSubscription && ( +
+ { EMAIL_REPORT_FREQUENCIES.map( + ( reportFrequency, index ) => ( +
+ { index === savedFrequencyIndex && ( +
+

+ { __( + 'Current subscription', + 'google-site-kit' + ) } +

+
+ ) } +
+ ) + ) } +
+ ) }
- - { label } +
+ + { label } + +
+
+ +
+ + { period } - { savedFrequency === reportFrequency && - isUserSubscribed && ( -
-
- ) }
- - { period } - - - - { description } - +
+ + { description } + +
); } ) } diff --git a/assets/js/components/email-reporting/FrequencySelector.stories.js b/assets/js/components/email-reporting/FrequencySelector.stories.js index c45951e1f73..2f5969edc47 100644 --- a/assets/js/components/email-reporting/FrequencySelector.stories.js +++ b/assets/js/components/email-reporting/FrequencySelector.stories.js @@ -121,15 +121,3 @@ PreviouslySavedFrequency.args = { }, }; PreviouslySavedFrequency.scenario = {}; - -export const PreviouslySavedFrequencySameAsCurrent = Template.bind( {} ); -PreviouslySavedFrequencySameAsCurrent.args = { - isUserSubscribed: true, - savedSettings: { - frequency: 'monthly', - }, - clientSettings: { - frequency: 'monthly', - }, -}; -PreviouslySavedFrequencySameAsCurrent.scenario = {}; diff --git a/assets/js/components/email-reporting/FrequencySelector.test.js b/assets/js/components/email-reporting/FrequencySelector.test.js index 2bcde7efc7b..4c1ccf5c284 100644 --- a/assets/js/components/email-reporting/FrequencySelector.test.js +++ b/assets/js/components/email-reporting/FrequencySelector.test.js @@ -108,79 +108,73 @@ describe( 'FrequencySelector', () => { expect( containerElement ).toMatchSnapshot(); } ); - it( 'Previously saved frequency (saved monthly, current weekly) indicates saved on monthly only and matches snapshot', () => { + it( 'Previously saved frequency (saved monthly, current weekly) shows current subscription pill above monthly card and matches snapshot', () => { setupRegistry( registry, { startOfWeek: 1, frequency: 'weekly', savedFrequency: 'monthly', } ); - const { containerElement, getByText } = renderSelector( registry, { - isUserSubscribed: true, - } ); - - const indicators = containerElement.querySelectorAll( - '.googlesitekit-frequency-selector__saved-indicator' + const { container, containerElement, getByText } = renderSelector( + registry, + { + isUserSubscribed: true, + } ); - expect( indicators.length ).toBe( 1 ); - const monthlyLabel = getByText( 'Monthly' ); - const monthlyCard = monthlyLabel.closest( - '.googlesitekit-frequency-selector__card' + // Check that there's exactly one current subscription pill. + const pills = container.querySelectorAll( + '.googlesitekit-frequency-selector__current-subscription' ); - expect( monthlyCard ).toBeTruthy(); - expect( - monthlyCard.querySelector( - '.googlesitekit-frequency-selector__saved-indicator' - ) - ).toBeInTheDocument(); + expect( pills.length ).toBe( 1 ); - const weeklyLabel = getByText( 'Weekly' ); - const weeklyCard = weeklyLabel.closest( - '.googlesitekit-frequency-selector__card' + // Check that the badge row exists and contains the pill. + const badgeRow = container.querySelector( + '.googlesitekit-frequency-selector__badge-row' ); + expect( badgeRow ).toBeInTheDocument(); expect( - weeklyCard.querySelector( - '.googlesitekit-frequency-selector__saved-indicator' + badgeRow.querySelector( + '.googlesitekit-frequency-selector__current-subscription' ) - ).not.toBeInTheDocument(); + ).toBeInTheDocument(); - const quarterlyLabel = getByText( 'Quarterly' ); - const quarterlyCard = quarterlyLabel.closest( - '.googlesitekit-frequency-selector__card' - ); - expect( - quarterlyCard.querySelector( - '.googlesitekit-frequency-selector__saved-indicator' - ) - ).not.toBeInTheDocument(); + // Check that the pill text is correct. + expect( getByText( 'Current subscription' ) ).toBeInTheDocument(); expect( containerElement ).toMatchSnapshot(); } ); - it( 'Previously saved frequency (same as the current frequency) shows saved indicator on selected card and matches snapshot', () => { + it( 'Previously saved frequency (same as the current frequency) shows current subscription pill above selected card and matches snapshot', () => { setupRegistry( registry, { startOfWeek: 1, frequency: 'monthly', savedFrequency: 'monthly', } ); - const { containerElement, getByText } = renderSelector( registry, { - isUserSubscribed: true, - } ); - - const monthlyLabel = getByText( 'Monthly' ); - const monthlyCard = monthlyLabel.closest( - '.googlesitekit-frequency-selector__card' + const { container, containerElement, getByText } = renderSelector( + registry, + { + isUserSubscribed: true, + } ); - expect( monthlyCard ).toBeTruthy(); + // Check that there's exactly one current subscription pill in the badge row. + const badgeRow = container.querySelector( + '.googlesitekit-frequency-selector__badge-row' + ); + expect( badgeRow ).toBeInTheDocument(); expect( - monthlyCard.querySelector( - '.googlesitekit-frequency-selector__saved-indicator' + badgeRow.querySelector( + '.googlesitekit-frequency-selector__current-subscription' ) ).toBeInTheDocument(); + // Check that the monthly card is selected. + const monthlyLabel = getByText( 'Monthly' ); + const monthlyCard = monthlyLabel.closest( + '.googlesitekit-frequency-selector__card' + ); expect( monthlyCard.classList.contains( 'googlesitekit-frequency-selector__card--selected' diff --git a/assets/js/components/email-reporting/__snapshots__/FrequencySelector.test.js.snap b/assets/js/components/email-reporting/__snapshots__/FrequencySelector.test.js.snap index 1ee341ab9c9..74b7c19ea2a 100644 --- a/assets/js/components/email-reporting/__snapshots__/FrequencySelector.test.js.snap +++ b/assets/js/components/email-reporting/__snapshots__/FrequencySelector.test.js.snap @@ -16,20 +16,32 @@ exports[`FrequencySelector Story states (visual + DOM) Monthly selected renders class="googlesitekit-frequency-selector__label-row" >
- Weekly + + Weekly +
- Last 7 days + + Last 7 days +
- Sent every Monday + + Sent every Monday +
- Monthly + + Monthly +
- Last 28 days + + Last 28 days +
- Sent on the 1st of each month + + Sent on the 1st of each month +
- Quarterly + + Quarterly +
- Last 90 days + + Last 90 days +
- Sent on the 1st of each quarter + + Sent on the 1st of each quarter +
`; -exports[`FrequencySelector Story states (visual + DOM) Previously saved frequency (same as the current frequency) shows saved indicator on selected card and matches snapshot 1`] = ` +exports[`FrequencySelector Story states (visual + DOM) Previously saved frequency (same as the current frequency) shows current subscription pill above selected card and matches snapshot 1`] = `
- Weekly + + Weekly +
- Last 7 days + + Last 7 days +
- Sent every Monday + + Sent every Monday +
- Monthly -
-
- + + Monthly +
- Last 28 days + + Last 28 days +
- Sent on the 1st of each month + + Sent on the 1st of each month +
- Quarterly + + Quarterly +
- Last 90 days + + Last 90 days +
- Sent on the 1st of each quarter + + Sent on the 1st of each quarter +
`; -exports[`FrequencySelector Story states (visual + DOM) Previously saved frequency (saved monthly, current weekly) indicates saved on monthly only and matches snapshot 1`] = ` +exports[`FrequencySelector Story states (visual + DOM) Previously saved frequency (saved monthly, current weekly) shows current subscription pill above monthly card and matches snapshot 1`] = `
- Weekly + + Weekly +
- Last 7 days + + Last 7 days +
- Sent every Monday + + Sent every Monday +
- Monthly -
-
- + + Monthly +
- Last 28 days + + Last 28 days +
- Sent on the 1st of each month + + Sent on the 1st of each month +
- Quarterly + + Quarterly +
- Last 90 days + + Last 90 days +
- Sent on the 1st of each quarter + + Sent on the 1st of each quarter +
@@ -287,20 +385,32 @@ exports[`FrequencySelector Story states (visual + DOM) Quarterly selected render class="googlesitekit-frequency-selector__label-row" >
- Weekly + + Weekly +
- Last 7 days + + Last 7 days +
- Sent every Monday + + Sent every Monday +
- Monthly + + Monthly +
- Last 28 days + + Last 28 days +
- Sent on the 1st of each month + + Sent on the 1st of each month +
- Quarterly + + Quarterly +
- Last 90 days + + Last 90 days +
- Sent on the 1st of each quarter + + Sent on the 1st of each quarter +
@@ -374,20 +508,32 @@ exports[`FrequencySelector Story states (visual + DOM) Weekly selected (default class="googlesitekit-frequency-selector__label-row" >
- Weekly + + Weekly +
- Last 7 days + + Last 7 days +
- Sent every Monday + + Sent every Monday +
- Monthly + + Monthly +
- Last 28 days + + Last 28 days +
- Sent on the 1st of each month + + Sent on the 1st of each month +
- Quarterly + + Quarterly +
- Last 90 days + + Last 90 days +
- Sent on the 1st of each quarter + + Sent on the 1st of each quarter +
@@ -461,20 +631,32 @@ exports[`FrequencySelector Story states (visual + DOM) Weekly selected with Sund class="googlesitekit-frequency-selector__label-row" >
- Weekly + + Weekly +
- Last 7 days + + Last 7 days +
- Sent every Sunday + + Sent every Sunday +
- Monthly + + Monthly +
- Last 28 days + + Last 28 days +
- Sent on the 1st of each month + + Sent on the 1st of each month +
- Quarterly + + Quarterly +
- Last 90 days + + Last 90 days +
- Sent on the 1st of each quarter + + Sent on the 1st of each quarter +
diff --git a/assets/sass/components/email-reporting/_googlesitekit-frequency-selector.scss b/assets/sass/components/email-reporting/_googlesitekit-frequency-selector.scss index ed9b6caca66..e40e7d37d62 100644 --- a/assets/sass/components/email-reporting/_googlesitekit-frequency-selector.scss +++ b/assets/sass/components/email-reporting/_googlesitekit-frequency-selector.scss @@ -20,6 +20,31 @@ h3.googlesitekit-frequency-selector-title { color: $c-surfaces-on-surface-variant; } +.googlesitekit-frequency-selector__badge-row { + display: grid; + gap: $grid-gap-phone; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-bottom: 8px; +} + +.googlesitekit-frequency-selector__badge-cell { + display: flex; + justify-content: center; +} + +.googlesitekit-frequency-selector__current-subscription { + background-color: $c-blue-b-50; + border-radius: 4px; + color: $c-blue-b-500; + padding: 0 8px; + text-align: center; + width: 100%; + p { + margin: 0; + padding: 4px 0; + } +} + .googlesitekit-frequency-selector { display: grid; gap: $grid-gap-phone; @@ -44,19 +69,6 @@ h3.googlesitekit-frequency-selector-title { display: flex; justify-content: space-between; margin-bottom: 4px; - - .googlesitekit-frequency-selector__saved-indicator { - background-color: $c-neutral-n-10; - border-radius: 50%; - height: 24px; - width: 24px; - svg { - color: $c-neutral-n-300; - height: 14px; - margin: 5px 0 0 5px; - width: 14px; - } - } } .googlesitekit-frequency-selector__period { @@ -74,16 +86,6 @@ h3.googlesitekit-frequency-selector-title { .googlesitekit-frequency-selector__card--selected { background: $c-content-primary-container; - .googlesitekit-frequency-selector__label-row { - .googlesitekit-frequency-selector__saved-indicator { - background-color: $c-site-kit-sk-50; - - svg { - color: $c-site-kit-sk-400; - } - } - } - .googlesitekit-frequency-selector__period { border-color: $c-site-kit-sk-200; } diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_0_small.png deleted file mode 100644 index 347a97d8075..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_0_small.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_1_medium.png deleted file mode 100644 index 9ebb509dc94..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_1_medium.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_2_large.png deleted file mode 100644 index 0eca45c621f..00000000000 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequencySameAsCurrent_0_document_2_large.png and /dev/null differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_0_small.png index e7d9b485e7d..eea83302930 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_0_small.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_0_small.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_1_medium.png index 3ec99ae79b0..a288ef05291 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_1_medium.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_1_medium.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_2_large.png index 4b3dba47a32..973af8ff396 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_2_large.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_PreviouslySavedFrequency_0_document_2_large.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_0_small.png index 890b5aa98c0..1eaa1f4759a 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_0_small.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_0_small.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_1_medium.png index bd0d888f4bc..6739d739ab1 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_1_medium.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_1_medium.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_2_large.png index b7455c11e37..2f2675f3698 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_2_large.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_FrequencySelector_WeeklySelectedSundayStartOfTheWeek_0_document_2_large.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_0_small.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_0_small.png index 3b69c025a81..c80d586b8c7 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_0_small.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_0_small.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_1_medium.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_1_medium.png index ed3584000c1..140c516dd23 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_1_medium.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_1_medium.png differ diff --git a/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_2_large.png b/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_2_large.png index 42be076df5f..9c0a61ab29d 100644 Binary files a/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_2_large.png and b/tests/backstop/reference/google-site-kit_Components_EmailReporting_UserSettingsSelectionPanel_Default_0_document_2_large.png differ