Implement date range services for PAX reporting

[aaemnnosttv]

Feature Description

For PAX to integrate into the same date range used on the dashboard, we need to implement two services for this to be requested by Ads (partner) and updated by SK (ads).

Note regarding dependency on #8559: It won't be possible to QA this issue until #8559 is merged, but you could start work on this issue before then. 🙂 As noted by @aaemnnosttv:

It's not actually a dependency since the IB doesn't touch the widget but the PAX component. We just wouldn't be able to QA it until the widget issue was done.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The PAX reporting widget implemented in Create Ads placeholder reporting widget #8559 should be updated to synchronize its date range with the current date range in SK
  • The widget should load using the current date range
  • The widget should update to use the same date range as the dashboard when changed in the header

Implementation Brief

• Create a new utility for PAX which accepts a SK date range string (YYYY-MM-DD) and returns an object with the shape { day, month, year } (all Numbers) as defined as Date: https://github.com/google/partner-ads-experience/blob/c2799dd0b6306a3d598e6584e0033662c4461bde/sdk/service/ads/ads-date-range-service.d.ts#L19-L32
  Note Date is its own type here notably using 1-index numbers rather than 0-index
• Update createPaxServices to implement a new top-level partnerDateRangeService with its methods
  • get - returns a GetSelectedDateRangeResponse, an object with the shape { startDate: Date, endDate: Date }
    • Use the getDateRangeDates to get start and end dates as strings, then transform with the new utility to get the necessary dates for the response
• Update PAXEmbeddedApp when displayMode = reporting
  • Select getDateRangeDates
  • Add a useEffect to synchronize the current date range with the app
    • inside the effect, bail if there is no app instance available on the ref that stores it
    • use the current date range dates to construct the UpdateSelectedDateRangeRequest (which is the same shape as the GetSelectedDateRangeResponse) using the same utility
    • Call the update on the appServices.adsDateRangeService.update(UpdateSelectedDateRangeRequest)
    • Provide the dates as a serialized string to the useEffect to ensure it runs whenever the range changes, i.e. ${startDate}|${endDate}

Test Coverage

• Add test coverage for the new utility
• Add coverage for the new partnerDateRangeService as an addition to createPaxServices
• No coverage currently exists for PAXEmbeddedApp as a wrapper for an external app

QA Brief

• Setup Site Kit with adsPax feature flag
• Setup Ads module using the PAX app (create an account button on Ads setup screen) - go through all the steps in the PAX to create a campaign
• Go to Dashboard and scroll to the PAX widget
• Verify dates are matching the reference date selection - 28 days, 7 days, etc, it should change with selection like rest of the widgets

Changelog entry

• Add date range support to PAX app.

[tofumatt]

Works for me 👍🏻

IB ✅

[wpdarren]

QA Update: ❌

@tofumatt @zutigrm I start the process of setting up Ads module for PAX, click on the create account button, and then I am sent to the oAuth as expected. When I return back to Site Kit, the app doesn't load and instead I see an error message. See screenshot.

TypeError: Cannot read properties of null (reading ‘endDate’)

[wpdarren]

QA Update: ✅

Verified:

• The dates are matching the reference date selection - 28 days, 7 days, etc, and changes with selection like rest of the widgets. See screencast below when comparing with the search console widget above it.

pax-dates.mp4

[aaemnnosttv]

Looks like the range in the widget is off by 1 on both sides but we can enhance this in a follow-up if needed.