NNS1-3486: adds ReportingDateRangeSelector

frontend/src/lib/components/reporting/ReportingDateRangeSelector.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import type { ReportingDateRange } from "$lib/types/reporting";
+
+  let selectedRange: ReportingDateRange = "all";
+
+  const options: Array<{
+    value: ReportingDateRange;
+    label: string;
+  }> = [
+    { value: "all", label: $i18n.reporting.range_filter_all },
+    { value: "last-year", label: $i18n.reporting.range_last_year },
+    { value: "year-to-date", label: $i18n.reporting.range_year_to_date },
+  ];
+
+  function handleChange(value: ReportingDateRange) {
+    selectedRange = value;
+  }
+</script>
+
+<fieldset data-tid="reporting-data-range-selector-component">
+  <div class="wrapper">
+    <legend>{$i18n.reporting.range_filter_title}</legend>
+    <div role="radiogroup">
+      {#each options as option}
+        <label class="radio-option">
+          <input
+            type="radio"
+            name="dateRange"
+            value={option.value}
+            checked={selectedRange === option.value}
+            aria-checked={selectedRange === option.value}
+            on:change={() => handleChange(option.value)}
+          />
+          <span class="label">{option.label}</span>
+        </label>
+      {/each}
+    </div></div
+  >
+</fieldset>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/fonts";
+
+  fieldset {
+    all: unset;
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--padding-2x);
+      border: none;
+      padding: 0;
+      margin: 0;
+
+      legend {
+        @include fonts.h5;
+      }
+
+      div {
+        display: flex;
+        gap: var(--padding-3x);
+
+        .radio-option {
+          display: flex;
+          align-items: center;
+          gap: var(--padding);
+          cursor: pointer;
+
+          .label {
+            color: var(--text-description);
+            font-size: var(--font-size-body);
+          }
+
+          input[type="radio"] {
+            appearance: none;
+            width: 18px;
+            height: 18px;
+            border: 2px solid var(--primary);
+            border-radius: 50%;
+            margin: 0;
+            cursor: pointer;
+            position: relative;
+            background: transparent;
+
+            &:checked {
+              border: 5px solid var(--primary, #666);
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

frontend/src/lib/i18n/en.json

@@ -192,7 +192,11 @@
     "error_csv_generation": "Failed to generate CSV file",
     "error_file_system_access": "Unable to save file. Please check your permissions.",
     "error_neurons": "There was an error exporting the neurons. Please try again.",
-    "error_transactions": "There was an error exporting the transactions. Please try again."
+    "error_transactions": "There was an error exporting the transactions. Please try again.",
+    "range_filter_title": "Reporting Date Range",
+    "range_filter_all": "All transactions",
+    "range_last_year": "Last year",
+    "range_year_to_date": "Year to date"
   },
   "auth": {
     "login": "Sign in with Internet Identity",

frontend/src/lib/types/i18n.d.ts

@@ -201,6 +201,10 @@ interface I18nReporting {
   error_file_system_access: string;
   error_neurons: string;
   error_transactions: string;
+  range_filter_title: string;
+  range_filter_all: string;
+  range_last_year: string;
+  range_year_to_date: string;
 }
 
 interface I18nAuth {

frontend/src/lib/types/reporting.ts

@@ -0,0 +1 @@
+export type ReportingDateRange = "all" | "last-year" | "year-to-date";

frontend/src/tests/lib/components/reporting/ReportingDateRangeSelector.spec.ts

@@ -0,0 +1,44 @@
+import ReportingDateRangeSelector from "$lib/components/reporting/ReportingDateRangeSelector.svelte";
+import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
+import { ReportingDateRangeSelectorPo } from "$tests/page-objects/ReportingDateRangeSelector.page-object";
+import { render } from "@testing-library/svelte";
+
+describe("ReportingDateRangeSelector", () => {
+  const renderComponent = () => {
+    const { container } = render(ReportingDateRangeSelector);
+    const po = ReportingDateRangeSelectorPo.under({
+      element: new JestPageObjectElement(container),
+    });
+
+    return po;
+  };
+
+  it("should render three options", async () => {
+    const po = renderComponent();
+
+    expect(await po.getAllOptions()).toHaveLength(3);
+  });
+
+  it("should select 'all' option by default", async () => {
+    const po = renderComponent();
+
+    const selectedOption = po.getSelectedOption();
+    expect(await selectedOption.getValue()).toBe("all");
+  });
+
+  it("should change the option when interacting with a new element", async () => {
+    const po = renderComponent();
+    const allOptions = await po.getAllOptions();
+    const firstOptionValue = await allOptions[0].getValue();
+    const secondOption = allOptions[1];
+
+    let currentOption = po.getSelectedOption();
+
+    expect(await currentOption.getValue()).toEqual(firstOptionValue);
+
+    await secondOption.click();
+    currentOption = po.getSelectedOption();
+
+    expect(await currentOption.getValue()).toBe(await secondOption.getValue());
+  });
+});

frontend/src/tests/page-objects/ReportingDateRangeSelector.page-object.ts

@@ -0,0 +1,24 @@
+import type { PageObjectElement } from "$tests/types/page-object.types";
+import { SimpleBasePageObject } from "./simple-base.page-object";
+
+export class ReportingDateRangeSelectorPo extends SimpleBasePageObject {
+  static readonly TID = "reporting-data-range-selector-component";
+
+  static under({
+    element,
+  }: {
+    element: PageObjectElement;
+  }): ReportingDateRangeSelectorPo {
+    return new ReportingDateRangeSelectorPo(
+      element.byTestId(ReportingDateRangeSelectorPo.TID)
+    );
+  }
+
+  getAllOptions() {
+    return this.getElement().querySelectorAll('input[type="radio"]');
+  }
+
+  getSelectedOption() {
+    return this.getElement().querySelector('input[type="radio"]:checked');
+  }
+}